CEI Editora
A new corporate website and materials catalog, from the audit to the version in validation.
The problem
The old site was a single WordPress page built with Elementor. Before writing a single line, I measured the published home page and listed what got in the way of visitors.
- No menu. There was no navigation. The only way to reach a section was to scroll through the whole page.
- Weight with no payoff. There were 26 scripts and 11 stylesheets for a single page.
- Accessibility. 11 of the 13 images had no alt text, including the logo, which was also a link and therefore had no name for screen readers.
- Search and sharing. There was no meta description. The summary used when sharing mixed button text with the menu and had a typo.
- Duplicated content in the code. The three value blocks were built twice, one version for each screen size, which doubles the work on every change. And the Coleção Criativa section had no heading, which broke the hierarchy.
- Ambiguous links. Three different links carried the same text, "Conheça o nosso catálogo completo" (see our full catalog).
- Contact. Phone, e-mail and Instagram were written without links. The WhatsApp number on the main button was different from the one in the footer.
- Catalog. There was no search, no filter and no way to look inside a material before ordering it.
- Company info. There was no address, privacy policy or terms of use.
Measured on the published home page on November 2, 2026.




The solution
I reorganized the site into pages with a clear purpose and turned the catalog into a showcase, so the material could be presented better.
- Seven pages with a menu. Home with tabs per project, About, Educational Solutions, a page for each project, Partners, Contact us and a 404 page. Old addresses redirect to the new ones.
- A catalog of 82 materials. Books, manuals, games and kits, searchable by title, grade, subject or author, with a filter by project.
- Book-style preview. Page turning, thumbnails, zoom, full screen and search inside the text. The text comes from Portuguese OCR, generated in batch by Python tools.
- Protected previews. Pages only open in the site's reader, with temporary access, usage limits and a watermark burned into the image.
- Coverage map. A map of Brazil showing presence by state, fed by the database.
- Contact that arrives. A form validated on the server, with a submission limit, and every channel clickable.
- No number without proof. Metrics not yet confirmed show up as "data under validation", and testimonials only go in when authorized.
Architecture
I used a dedicated server instead of a static site for two reasons: previews need access control, and the catalog needs to change without touching the code. Updating the catalog does not erase contacts or testimonials.
The MVP was validated in a test environment. Once finished, the goal was to move everything to CEI's VPS, set up in an organized way and maintained by the company's IT team.
How I tested it
I used Opus 5.5 to speed up the workflow, not to decide for me: it helped me put together the verification scripts, and I checked every result. Lighthouse showed where the real cost was, such as images without set dimensions, contrast and unused JavaScript, and I went straight to those points instead of optimizing blindly.
Every critical flow became a test case with an expected result: searching the catalog, opening a preview, turning a page, searching inside the book, submitting the form and trying to open a preview outside the reader. I ran all of them at widths from small phones to wide monitors, to keep the layout responsive on as many devices as possible, before releasing it for internal validation.
Results
| Home page | Before | After |
|---|---|---|
| Navigation | No menu | Menu with submenus |
| Pages | 1 | 7, plus one per project |
| Scripts | 26 | 1, the rest on demand |
| Stylesheets | 11 | 1 |
| Images without alt text | 11 of 13 | 0 |
| Meta description | None | Yes |
| Catalog | Links to other pages | 82 materials with search and preview |
Same criteria on both home pages, on November 2, 2026.
What I would do differently
In the final version, I would move the institutional pages to Astro and keep React only where there is interaction: the catalog, the preview reader and the form. Almost the whole site is content that rarely changes, so visitors would get ready-made HTML instead of waiting for JavaScript to build the page. That matters most on phones, where much of the audience comes from.
The preview server and the database would stay the same. The change only touches the layer visitors see, without redoing what has already been validated.
