Duolingo already has a strong brand and mature design system, but its web experience shows fragmented navigation and tablet-like layouts that don’t fully support clarity or long-term motivation. In this 6 weeks redesign, I focused on reorganizing key functions, simplifying the structure, and refining the web and mobile layouts while keeping Duolingo’s core identity and personality.
- Learning actions are split across “Learn,” “Practice,”
- and “Letters.” Primary and secondary actions appear at the same hierarchy level.
- No clear grouping logic.
- Layout scales larger instead of adjusting to desktop patterns.
- Spacing and density feel like tablet UI.
- Important areas like progress, streak, and path sections blend together visually.
- The learning path scrolls too much, making progress hard to see.
- Motivation features (streak, daily goals, XP, quests) are in separate sections, not in one place.
- Progress indicators are small or secondary in hierarchy.
- Placement is inconsistent across pages.
Structure, layout, and navigation all break the sense of continuity. Users jump between sections instead of feeling guided through one cohesive path.
Users scan differently on desktop. The current layout, spacing, and visual rhythm do not match how desktop users locate information or prioritize tasks.
Progress cues exist, but they sit outside the main learning flow. They are not tied to the journey, so they lose their power to build habits.
- 1. Create a unified, intuitive learning structure.
- 2. Design for desktop behavior and instant overview.
- 3. Surface motivation within the learning path.
- Replaced long vertical scrolling with a horizontal, section-based layout
- Introduced a map-style overview so all units in a section are visible on one screen
- Converted units into Duo bird icons for clearer way finding and a more playful identity
- Removed “Letters” as its own top-level tab.
- Integrated new letters into the Learn progression where units naturally introduce characters.
- Moved mastered letters into Practice for steady review.
- Simplified navigation into two clear actions: Learn (new content) and Practice (review content).
- Used desktop friendly spacing and rhythm
- Made the hierarchy between primary and secondary content clearer
- Reduced visual density for easier reading
- Unified streak, XP, and goals into one area
- Placed motivation cues next to the learning path
- Increased visual emphasis to highlight daily progress Before After
I explored multiple layout directions and interaction patterns on the web platform to refine navigation, hierarchy, and progress visibility.
Final high-fidelity web UI, reflecting the new structure, layout system, and motivation integration.
The mobile design was based on the finalized visual system. All decisions came from the web version, and the mobile UI uses the same structure, hierarchy, and design principles at a smaller scale.
- Small, targeted improvements often create clearer impact than full reinventions. evolution Symbolic gestures make VR interactions easy to understand.
- Clear problem framing early on makes visual decisions faster and more intentional.
- Strong foundations on one platform make cross-platform work more efficient.
- Working within an existing brand system sharpens choices around consistency and