Duolingo design examples

Duolingo

Landing page where a user can start learning a new language or open a popover to sign in via email, Google, or Facebook.

Duolingo

Landing page where the user selects a language to learn from a grid of options and views core product features.

Duolingo

Onboarding step where the user chooses between starting at the basics or taking a placement test for French.

• Sign Up

Duolingo

Onboarding step where the user selects a daily language learning goal ranging from 5 to 20 minutes per day.

• Sign Up

Duolingo

Onboarding screen where the user is prompted to take a placement test to jump ahead in their language learning journey.

• Onboarding Checklist
• Setup Wizard

Duolingo

Detail page where the user translates the phrase 'Agreed?' into French and receives a green success banner with a prompt to continue.

• Success
• Onboarding Checklist

Duolingo

Onboarding screen in a logged-out state where the user is prompted to choose between starting from basics or taking a placement test, alongside daily goal tracking and profile creation nudges.

• Onboarding Checklist
• Welcome

Duolingo

Home screen where the user navigates their language learning path, tracks daily goals, and views a weekly leaderboard.

• Home
• Leaderboard

Duolingo

Home screen where the user views their language learning path, tracks daily goals, and reviews recent friend requests via a notification popover.

• Home
• Dashboard

Duolingo

User profile page displaying an activity timeline, language learning progress, and a friends list.

• Profile
• Activity Log

Duolingo

Settings page where the user configures their account details like username, email, audio preferences, and profile picture.

• Account Settings
• Profile

Duolingo

Settings page where the user can connect their account to a classroom by entering a teacher's email address to share their learning progress.

• Account Settings
• Team Management