About
Resume
Art & Design
Hoo-Dini: Design System for Duolingo.
Product Design
UI Designer
Design
Documentation
14 weeks
Team
Self + 3
While good style and a strong brand identity appears to make the brand put together, Duolingo lacks standardisation and consistency.
Hoo-Dini is a design system built for Duolingo with the motivation of providing standardisation across its digital presence, reduce friction for easy design-dev collaboration and overall deliver consistent magical experiences.
Figma Community UI Kit
Documentation (Zeroheight)
“Styles come and go. Good design is a language, not a style.” – Massimo Vignelli, Italian Designer
Explore
First, let’s breaking everything apart
The first thing we did was conduct a comprehensive audit for the Duolingo app and documented every little thing from color and typography styles to media and icons. This helped us identify issues and inconsistencies within the system. Using an Atomic Design Framework, we broke the system down into its smallest building blocks to map what existed and surface missing components, interaction patterns, and layout rules.
Here’s when things looked a bit fishy
While good style and a strong brand identity appears to make the brand put together, Duolingo lacks standardisation and consistency.
Icons have different sizes and weights. Same icons appear inconsistent across different parts of the mobile application.
The number of button styles that Duolingo has just goes on and on and on. and on. and on.
Accessibility issues came up very early on in the audit. Low color contrast across the app reduces readability and makes it harder for users with visual impairments to navigate effectively.
Define
Our core principles
In the process of creating this design system from ground up, it was important to establish core principles. They are- Consistent, Intuitive, Inclusive.
Build
Building the system 0-1, giving Duo a makeover
We built a scalable Figma design system library with token-driven foundations, responsive auto-layout, and structured component variants. We maintained branching, version control, and publishing workflows to ensure consistency and smooth cross-functional collaboration.
The smallest, reusable elements of the interface.
Ex- Colors, Typography, Icons etc.
Basic elements that create functional, reusable components.
Ex- Input fields, Buttons, etc.
Distinct sections and blocks of an interface.
Ex- Header, Footer, Cards etc.
How is Hoo-Dini the solution?
Introducing design teams with a standardized library and documentation of reusable components, a hierarchical, scalable, atomic token system and an efficient, simplified design workflow.
Allowing this level of customisation for components saves time for designers and developers. These components adapt seamlessly across various use cases and layouts, ensuring consistency and usability.
Hoo-dini prioritizes accessibility by enhanced colour contrast across the app and increasing touch targets to support all users.
TestingIt’s like building a Lego set!
We conducted a usability test with five designers, asking them to recreate an app screen using components from Hoo-Dini’s design system. We observed how they navigated the library and refined the structure based on their behavior.
Documentation
A single source of truth
We documented the system in Zeroheight, creating a single source of truth for the organization. The hub brings together design principles, accessibility guidelines, components, and usage standards, making it easy for teams to access, reference, and collaborate consistently across the product.
ImpactOne for all, all for one
Exploring Hoo-Dini’s potential across different stakeholders:
LearningTakeaways
01
Design systems aren’t just pretty components — they’re a behavior shift. Getting people aligned matters as much as building the UI kit.
02
I leveled up my Figma muscle — component properties, nested variants, auto-layout tricks, naming logic, and branching workflows became second nature.
03
Treat the design system like a real product — give it a name, build structure, test with users, ship versions, and keep iterating.
Let’s Duo This!
Hoo-Dini 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.
Stakeholder Pitchdeck
Figma UI Kit
Zero Height Documentation