View project
Lettrage rouge « Agence Norry » de l'animation de chargement du siteLettrage rouge de l'animation de chargement Agence Norry, version mobile
Möko
X Norry

How do you combine seriousness and gamification in a learning method?

Creation of the Möko website, a 100% AI-powered English learning method: strategy, ergonomics, copywriting, design and Webflow development designed to combine educational rigor with a playful dimension.

OVERVIEW

Designing the website of a 100% AI-powered learning method.

‍For the launch of Möko, Agence Norry took charge of the entire project: strategy, ergonomics, copywriting, design and Webflow development. The goal wasn’t to slap a showcase website onto an existing product, but to build an experience that shows the Möko method itself from the very first second.

Context & Challenges

Two requirements to meet at the same time, without sacrificing either.

‍The Möko brief set a clear constraint: an art direction credible in the eyes of demanding post-secondary schools, yet lively enough to make people want to come back every day.

  • Building proof of seriousness: visually translating a method aligned with the CEFR, with a “The Observation” section that lays out the problem before the solution.
  • Avoiding the “quiz app” effect: designing a dashboard-style interface (the “gym for English”) engaging enough not to be abandoned after two weeks.
  • Embodying the founders: giving the project a human face through a dedicated section on Lucas and James rather than a simple “about”.
OUR SERVICES

What Agence Norry built, from A to Z.

  • Content strategy: Definition of the site architecture — observation, method, vision, origin, key moments, results — to build conviction page after page.
  • Ergonomics & journey: Design of a journey that alternates serious educational sequences with more playful moments, with no break in tone.
  • Copywriting: Writing of all the copy, with a voice that embraces both educational rigor and brand energy.
  • Design: Creation of the complete art direction — the “3 steps” card, the “gym” dashboard interface, the “key moments” timeline, the mobile mockups — and of all the site’s screens.
  • Webflow development: Full integration of the site, interactions and animations on Webflow, from desktop to mobile.
drag
strategic approach & methodology

Translating the Möko method into the very structure of the site.

  1. Learn: We designed a first sequence (“The Observation”, then the presentation of the method) that lays the groundwork before revealing the tool.
  2. Practice: We designed the dashboard interface — the “gym for English” — to make the logic of regular training tangible.
  3. Validate: We built a results section and a “key moments” timeline that showcase the progress and the story of the project.

‍This 3-step loop, modeled on the Möko method itself, literally structures the order of the site’s sections.

Concrete Webflow & Design solutions

A Webflow site designed as a product demo.

  • On-screen dashboard recreation: Integration of an interactive mockup of the Möko dashboard directly in the site, to show the tool rather than describe it.
  • Custom components: Cards, “key moments” timeline and team blocks designed and integrated specifically for this project.
  • Dedicated mobile mockups: Creation of a three-screen sequence showing the Möko experience on mobile.
  • Responsive integration: Full adaptation of every section for daily mobile use by students.
See the testimonial
SEO - AEO - GEO

Positioning in a market where schools are looking for a method, not a gadget.

‍We structured the site to speak to search engines as well as AI answer engines:

  • Structured markup: A natively clean Webflow architecture (proper Hn hierarchy, dynamic alt tags) to ease indexing.
  • GEO (Generative Engine Optimization): Content structured so that Möko is identified by conversational AI on queries related to post-secondary English learning and the CEFR.
  • Loading speed: Streamlined code engineering for strong performance scores, essential for a tool designed for daily use.
WEBFLOW TRAINING

Giving the Möko team the keys to their platform.

‍So that Möko can evolve its site at the pace of its product news, we trained their teams:

  • CMS management: Updating educational content and visuals independently.
  • Getting started with the Webflow Editor: Editing text and visuals without risking breaking the design system.
  • Respecting the design system: A clear guide to keep consistency between educational rigor and the gamified universe.
conclusion

A site that demonstrates the method rather than telling it.

‍By building each section of the site around the “learn, practice, validate” loop, Agence Norry delivered to Möko much more than a showcase: a concrete demonstration of their method, designed and built end to end on Webflow.

OTHER PROJECTS

DISCOVER OTHER PROJECTS

Hair care

How can you translate the excellence of Head Spa into a premium training website?