Independent Redesign

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.

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.

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.

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.