DuolingoWireframe Challenge

Minimalistic designs have always been my thing. When it comes to apps, these designs keep us moving without thinking twice. Duolingo is such an app which has helped me effortlessly learn a new language.

What is Duolingo

Duolingo is an American language-learning website and mobile app, as well as a digital language proficiency assessment exam. The company uses the freemium model: the app and the website are accessible without charge, although Duolingo also offers a premium service for a fee. [Wikipedia]

How it works

Duolingo helps user to learn hundreds of languages. When we select one, it prompts if user is a newbie. The exercises are tailormade based on user’s proficiency level. It gives challenges, milestones constant motivational notifications as user progresses.

The logo of Duolingo is interactive. It is an animated bird which gets excited when user practices more, and weeps if user doesn’t. It does quite a good job to keep the app active.

The happy path I chose to work on

I selected the path when user enters the app for the first time.

1. First time, user would be seeing the animated logo, the app name, and very subtle description which says the most important feature of the app that the learning is free.
2. Then, user enters to set of screens connected by a progress bar on top.
3. At this stage, app collects some basic data like the preferred language, purpose of learning, media they came to know about Duolingo, etc.
4. Once user completes these basic questions, they can start practicing.

Duolingo screen shots

Challenge

The challenge is to reverse engineer the app back to wire frames and prototypes. The low fidelity prototypes are simple drawings, and wire frames are done in Figma.

Prototypes

Prototype models the solutions to defined usecases/problems. This comes after the discussion by the designers during the concept/ideation stage. Instead of going through the entire design cycle based on an assumptions, prototypes validates their concepts by putting an early version of the solution in front of actual users and collecting feedback as early as possible.

Wireframes

Wireframes are blueprints to showcase functionalities and interactions in the system. Looks and visual appeals are not factors at this stage. Main concern with wireframe is presenting the content in an intuitive and natural way that is familiar to users.

Screen interactions

Screen interaction depicts possible process flows.

1. Screen 1: User opens Duolingo. Two work flows are possible, as new user or as existing user. We are covering new user scenario.
2. Screen 2: User can select the language. On selecting language, user navigates to screen 3. Screen 2 and following have a back button to navigate to previous screen.
3. Screen 3: User checks course details and taps continue button.
4. Screen 4: User selects source, and on selection navigates to screen 5.
5. Screen 5: User selects purpose, and on selection navigates to screen 6.
6. Screen 6: User selects Goal, and on taping continue button moves to screen 7.
7. Screen 7: User selects language proficiency, and on selection navigates to Exercises.
8. Screen 8: Selects answer and tap check button.

Personal takeaways

This is my first wireframe design experience. The crucial part was finding the balance between what to include and what to omit, and still make everyone understand what I am trying to communicate. This distinction actually helps user and designers not to get biased with funky visual elements , but concentrate on functionalities. Simplicity is the key.

This project helped me to look more into design aspects such as screen consistency and order of communication. I got a sense that UI elements are placed on the screen for the best usability of the user.

I believe there is so much more to learn and discover, but definitely this inspired me to move forward.