Hoo-Dini: Design System for Duolingo.

Role
Product Design
UI Designer

Contributions
Design
Documentation

Duration
14 weeks

Team
Self + 3

Does Duolingo have a design system? Maybe Yes?

Seems like Duolingo most definitly would have a design system right? Because of it’s

But...

🌪 Icons have their own random rules
Different size and weight. Same icons appear inconsistent across different parts of the app

🎨 No standardized button style
The number of button styles that Duolingo has just goes on and on and on. and on.

♿ "Oops, can't see that!"
Low color contrast across the app reduces readability and makes it harder for users with visual impairments to navigate effectively.

“Styles come and go. Good design is a language, not a style.”
– Massimo Vignelli, Italian Designer

While good style and a strong brand identity appears to make the brand put together, Duolingo lacks standardisation and consistency. So, we introduce you to

✨ Hoo-Dini ✨
(🔊 Hoo-Dee-Nee) Hoo echoes the sound of an owl- our beloved Duo mascot. Dini suggests the mystery and intrigue of Houdini’s magical performances.

What do we value?

Our guiding Principles

One for All, All for one

Exploring Hoo-Dini’s potential across various stakeholders

Imagine

Summer, a junior designer, just joined Duolingo as a new employee and is tasked with creating a new learning page

Timeline for Summer to complete her first task
⚠ Disclaimer: The estimated hours provided in this breakdown are generated by ChatGPT and are intended to replicate a realistic scenario for planning and reference purposes. Actual time required may vary based on individual skill levels, project complexity, tools available, and workplace dynamics. These estimates should be used as a guideline, not as definitive benchmarks.

37–47 hrs

ETA without design system

The time spent creating custom elements increases significantly, particularly during the prototype phase.

30–38 hrs

ETA with design system

Given this is a first task, the designer may also spend additional time clarifying expectations or seeking feedback, which could extend the timeline slightly.

🙌 Time Savings: 7–9 hours

It’s not just Summer. Without a design system, challenges arise for everyone:

Existing Designers: Designs that don’t speak the same language

“Why are button layouts different? Which icon pattern should I follow?”
Not having standardised design components can lead to inefficiencies for designers, as they spend more time reinventing elements instead of focusing on solving user problems.

New Designers: Lost in the onboarding maze

“Which component is the right match?”
Let’s say your company has a design system but doesn’t have any rules or guidelines to help support design decisions- It can lead to inconsistent use of components, confusion among designers, and a fragmented user experience that fails to align with the brand's vision.

C-Suite: Falling behind the game

If our competitors can deliver faster and consistent experiences, we risk losing our position in the market. Every inefficient process is money we could have invested in new features or market growth.

Users: Learning gets lost in the shades

Failing to meet WCAG AA standards for color, text size, and other accessibility guidelines can result in a product that excludes users with disabilities, diminishes inclusivity, and risks legal challenges while negatively impacting brand reputation.

How is Hoo-Dini the solution?

Existing Designers: A shared design language
Introducing design teams with a standardized library and documentation of reusable components, a hierarchical, scalable, atomic token system and an efficient, simplified design workflow.

New Designers: Onboarding made easy
Onboarding can be made easy by providing a map to the maze guiding every step of the way.

C-Suite: Maximising the ROI
This can be done by addressing three key areas: Competitiveness, through unified branding and faster design; Scalability, by ensuring seamless growth across features and platforms; and Cost Efficiency, by reducing duplicate efforts and enhancing internal collaboration.

Users: Accessible learning for all
Hoo-dini prioritizes accessibility by enhanced colour contrast across the app and increasing touch targets to support users with low vision, motor challenges, speech impairments, hearing impairiments, or situational disabilities.

Let’s Duo This! ✨

For new designers like Summer, design system not only saves time and resources but also ensures consistent quality, scalability for future projects, and better focus on core aspects of design like usability and user experience.
Ready to work some design magic? Use our UI Kit and design system docs to speed up your journey and create delightful, consistent experiences!

Figma UI Kit
Zero Height Documentation