Shay Chu
Product Designer | Multilingual | Writer for Bootcamp, part of UX Collective

Redesign

Duolingo's Contact us Page for Desktop

Image alt tag

Project

Independent Project

Role

Product Designer

Timeline

1 Day

Intro

Duolingo is a language-learning app and website that has a market capitalization of around 3.967 billion USD at the end of the trading day of 4 January, 2022.

On the same day, I participated in the daily UI challenge #028 Contact Us, and I decided to improve the UI of Duolingo's contact us page on the desktop.

Guiding Questions

  • Is there anything inaccessible?

  • Is there anything that looks off?

  • 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.

UI Analysis & Redesign
Image alt tag

Duolingo's Original Design

Image alt tag

My Proposed Design

Redesign Outline

  1. I underlined the clickable links with the same colour of the clickable words. Underlining better informs users who are colour-blind and/or visually-impaired about the clickable links.

  2. I shortened the long horizontal lines above and below the contact us section because they are not symmetrical, that is, the right side of the 'Contact Us' tab is longer than the left side of the 'Mission' tab. I then center-aligned the text.

Accessibility Issue

Key Point: Accessibility Issue

Let us step into the perspective of users who are unable to distinguish between some or all colours, for a moment.

The affordance of the links being clickable is not presented clearly to users who are unable to distinguish between some or all colours.

The affordance of the links being clickable is not presented clearly to users who are unable to distinguish between some or all colours.

Before & After
Image alt tag

Duolingo's Original Design

Image alt tag

My Proposed Design

Summary

My Recommendations

  1. Underline the clickable links with the same colour of the clickable words to accommodate users who are colour-blind and/or visually impaired.

  2. Shorten the long horizontal lines above and below the contact us section. Then, center-align the text. I acknowledge that this recommendation may be put off to the side due to the limited impact on business needs from the time and energy investment of resources that is needed to change the screen.

Future Considerations

  1. Regarding accessibility, I also noticed that the blue colour #1CB0F6, which I recognize that it is a part of Duolingo's design language, on a white background (#FFFFFF) is not up to modern standards. This combination has the contrast ratio of 2.44:1 while WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

  2. If possible, I would like to conduct A/B Testing with the old screen and the revised screen to see if there is any noticeable difference in the rate of contact for Duolingo.

Drop me a message
Let's share ideas & discuss ways to collaborate!