3

Duolingo’s redesign: 4 things they got right, 1 possible improvement

 1 year ago
source link: https://uxdesign.cc/duolingos-redesign-4-things-they-got-right-1-possible-improvement-acec8af9ec10
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Duolingo’s redesign: 4 things they got right, 1 possible improvement

Duolingo logo

First, I realize that I’m a little behind here. I’m currently learning Japanese on Duolingo, and my dad, who’s learning German, got this update a bit ago.

His thoughts were simply, “I don’t like it.” But that’s what I’ve come to expect from any large-scale redesign at first. People don’t like change, they have no idea how they actually feel about the new design.

I’m here to talk about three things I think Duolingo really nailed with this redesign — and 1 possible improvement.

Injecting stories

Stories as part of home tab

Stories as part of the home tab

In the previous iteration of Duolingo, “Stories” were a separate tab. “Stories” are little back-and-forth discussions with cute illustrations and speech bubbles, where you answer questions along the way. They’re a great way to contextualize a lot of what you’ve learned and an effective tool for learning. However, making “progress” on stories felt pointless when all of the “real” progress was on the home tab.

Injecting stories into the home tab has made me feel like I’m getting credit for that work, and it’s forcing me to do them! This is a great design.

As a bonus, different languages have different tabs in their bottom navigation. For example, in Japanese, there’s a tab for learning hiragana and katakana. Because of this, a … tab exposes whatever tabs won’t fit, and moving stories into the home tab reduces the tab load.

Splitting up crowns

Breakdown of current crowns

From https://blog.duolingo.com/new-duolingo-home-screen-design/

I’m a completionist. I can be paralyzed by the idea of finishing something partway, moving on to the next thing, and then coming back and continuing the original thing.

In the previous iteration of Duolingo, a skill, such as “Shopping at a Convenience Store” was one button. After you did a lesson, you’d see some progress applied to that button and you’d tap it again, and do another lesson. After a certain number of successful lessons, you’d get a crown, and move to the next level.

There were 5 levels, and then an additional “legendary” level. Because of my nature, I would grind away at “Shopping at a Convenience Store” until I had achieved legendary status before moving to the next lesson. This had two negative impacts:

  1. I’d burn out. No one wants to talk about convenience stores for that long.
  2. Too much of what I’d learned was short-term memory. When you do 15 lessons in a row about the same information, you store a lot of information in your short-term memory and can’t call upon it when it’s actually needed.
New breakdown of crowns

From https://blog.duolingo.com/new-duolingo-home-screen-design/

In this new version of Duolingo, they’ve split up these crowns and spaced them out. This means simpler, forward-moving progress. You complete a lesson, and you move on to the next lesson. Additionally, different related categories can be interspersed to increase long-term retention.

Zoom to current location

Two screenshots of Duolingo, with one showing the scroll to current location FAB and the other showing the current lesson with the FAB hidden.

Scroll to the current lesson FAB

With the injection of stories and the splitting up of crowns, the content now scrolls for a very long time. This can mean scrolling for quite a while to get to a different unit you want to review or to check out a previous guidebook (another great update).

A simple, but important addition was a simple “scroll to current lesson” arrow (as a floating action button [FAB]).

Crazy dynamic top nav

Two screenshots of Duolingo showing off dynamic top nav

Dynamic top nav!

Each unit starts with a thick bar with information and a guidebook. These bars are colored to break up the content in a joyful way. Additionally, as you complete levels, they change to gold to indicate completion and purple to indicate legendary status.

What’s more impressive is that, as you scroll, the top nav dynamically changes to match. It’s surprisingly effective and seeing all of the subtle use of these dynamic colors is very satisfying.

I also think it’s a testament to Duolingo’s color palette — it’s extremely cohesive, to the point where colored icons in the top nav look good regardless of the color background they end up on. Quite a feat!

Possible improvement: zoom out

Overall, this redesign has been impressive and delightful. Even my “possible improvement” falls into a “nice-to-have” bucket rather than a need.

With this seemingly endless scroll of content, I wonder if the ability to zoom out to see your progress on a grander scale could be useful.

Even a simple display of the percent completion of the total course would possibly further gamify the experience. Doing something like this is probably tricky because if it’s constantly exposed, it could be deflating as you watch your progress tick up by 1% after spending an hour on the app — learning a language isn’t a quick process after all!

However, being able to zoom out the course map even slightly could help improve the ability to navigate to previous lessons you’d like to review, and could have the added benefit of exposing your progress from a bird’s eye view.

Conclusion

This redesign surprised me at first — because as a human, change is scary. But as I’ve settled into it, I’ve seen almost no reasons to complain and I’m really impressed by some of the decisions the team made.

And as always, the visual design quality of Duolingo is extremely high. Incredible animations, illustrations, and components abound.

Congrats to the team!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK