— Case study 11
A language school's site rebuilt around its own verb: destravar
project overview
A rebuild of a Brazilian online language school's website in Portuguese, English and Spanish, elevating an identity the brand had already redesigned but its website never caught up with.
shipped outcome
All pages built in PT, EN and ES on a preview deployment: a 13-section home, method, pricing, testimonials, FAQ, contact, careers and privacy. The CMS and the final content pass with the client come next; testimonials stay openly placeholder until real ones arrive.
Outubro Idiomas teaches English, French, Spanish and German to Brazilian working adults in live online classes. It had already redrawn its name, colours and mark; the old site still had the right content but none of the brand. Most visitors are expected to arrive on a phone from WhatsApp, so the site has to convert there first, and every page has to stand on its own in search.
The brand's own verb, destravar (to unstick), became the signature interaction: a doodled cord untangles as the hero headline resolves, and 'língua' lands as the cord straightens. The brandbook governs palette, Source Sans as the only typeface and the official lockups. Motion uses GSAP and Lenis with WebGL deliberately rejected, to protect mobile performance. Every page exists in three locales with localized URLs, and pricing, FAQ and testimonials read from Payload-shaped stand-ins so the CMS can replace them without touching a page.
All pages built in PT, EN and ES on a preview deployment: a 13-section home, method, pricing, testimonials, FAQ, contact, careers and privacy. The CMS and the final content pass with the client come next; testimonials stay openly placeholder until real ones arrive.
— Interface evidence
These are the verified interface captures from the project build. Scroll inside taller frames to inspect each complete page.
— Delivery process
The work is sequenced around risk. Domain rules and failure states come before interface polish; automation arrives before handoff.
The old site's content was extracted and the references analysed; the job was to elevate a redesigned identity, not invent a new one.
Destravar became the hero interaction: the untangling cord, drawn like a doodle, timed to the headline.
Portuguese unprefixed, English and Spanish with localized slugs, generated from one explicit route map that keeps /admin safe.
Every page rendered from Payload-shaped stand-ins, so plugging in the CMS swaps function bodies, not pages.
— System architecture
Each layer has one job and a narrow contract. That keeps external services replaceable and product behavior testable.
outubro / hero
destravar
the cord untangles, língua lands
locales
pt · en · es
pages / 3 locales
Built-in i18n pattern with dictionaries per locale; no i18n library.
Exact rewrites and redirects per page, so /metodo, /en/method and /es/metodo are the same page.
Small client leaves own the animation; WebGL rejected for mobile performance.
Pricing, FAQ and testimonials behind get* functions the CMS will implement.
— What shipped
The cord untangling as the headline resolves is destravar drawn literally, not a generic unlock icon.
Palette, Source Sans as the only typeface and the official lockups come from the client's brandbook, overriding design-taste defaults where they conflict.
Each page has its own slug in each language, so every locale is a real page for search, not a query string.
— Engineering pressure
Most visitors are expected to arrive from WhatsApp on a phone, so the motion tier was chosen for mobile performance first and WebGL was left out.
Final copy, testimonials and this year's prices are a pass with the client still open, so the build ships honest placeholders rather than invented ones.
verified project destinations
next transmission
Bring the operating problem. We will shape it into a clear product brief and a buildable next step.
Start a project