Independent Redesign

Duolingo is a language-learning app and website that has over 500 million registered learners, according to a November 2020 article.

Guiding Questions

• Does the error page offer suggestions to get around the error?

• Is the error page easy to understand?

• Is anything inaccessible?

• What can be done better?

Note

• This project was self-initiated, and it was not commissioned or implemented by Duolingo. I was not privy to the information, data, and business requirements that Duolingo designers had, so our design ideas may differ.

Redesign Outline

1. I changed the technical wording 'Error 404' to a more easy-to-understand wording 'Page not Found'.

2. Instead of a paragraph form, I presented the workarounds with bullet points.

3. I offered 2 more suggestions: reminding users that they type in the correct web address and that they copy the correct web address, following the best design practices of the British government: https://design-system.service.gov.uk/patterns/page-not-found-pages/.

4. I changed font colour #AFAFAF to colour #3C3C3C in order for the page to be accessible while adhering to Duolingo's design language.

5. I had the links to be always underlined regardless if the mouse cursor is hovering over them.

A/B Test

I ran an unmoderated A/B test from 3 February 2022 to 11 February 2022. Thirty-six participants took part in it, with 39% of participants from Germany and 31% from the USA. I recruited the participants from CareerFoundry's Slack.

Test Objectives

1. Find out how learners feel about the Duolingo error page for desktop

2. Determine learner preferences regarding my proposed design elements, such as layout, content, etc.

Two designs were used for the first A/B test:

1. Version 1, Duolingo's original design

2. Version 2, my proposed design

After choosing their preferred design, the participants were provided the option of answering the following 2 questions:

1. Why did you choose this design?

2. Is there anything else that you would like to add?

They were free to skip the questions.

Test Limitations

1. The participants may have not been active learners of Duolingo.

2. I could not ask follow-up questions since the test was unmoderated.

Based on the results of the A/B test

Participants overwhelmingly preferred my preferred design over Duolingo's original design. Based on the comments that I received from the test, I am going to adjust slightly certain design details of the proposed design.

1. I am going to make the bullet points smaller.

2. I am going to make the text horizontally-aligned with Duo, which is Duolingo's green-bird mascot.

3. I am going to reduce the indentation of the bullet-point text.

My Recommendations

1. Change the technical wording 'Error 404' to the more user-friendly wording 'Page not Found'.

2. Present the workarounds with bullet points instead of in a paragraph format.

3. Offer 2 more suggestions:

   • Ask users if they typed in the correct web address.

   • Ask users if they copied the correct web address.

4. Change the font colour #AFAFAF to colour #3C3C3C in order for the page to be accessible while adhering to Duolingo's design language.

5. Underline the links.

Future Consideration

1. Duolingo uses the typeface DIN Next Rounded for body text. Since I did not have it during this case study, I used Nunito as a substitute, as recommended by Duolingo's design language for people who do not have DIN Next Rounded. To align more with Duolingo's design language, I would prefer to do future redesigns using the DIN Next Rounded.