Dark Mode

Memrise 2020 / UI Design / Information Architecture / Usability Testing / Project Managment

About Memrise: Memrise is a language learning app that helps people acquire the real language by exposing them to videos of native speakers and encouraging them to practise communication.

The project

My task was to design a dark mode version for the product. During the project, I collaborated closely with two developers (Android and IOS). I also involved a UX researcher to understand how the dark mode can improve the user's experience and that the new UI will perform well. At the final stage of the project, I involved the marketing team in promoting and introducing the dark mode outside the product.

Exploration

Usability testing

I was looking at how we can improve some areas of the product using the dark mode implementation. My main focus was on learning sessions. The main goal was to enhance users experience around task completion and limitation of distraction.

Accessibility

I used this project as an opportunity to improve accessibility, especially colours and contrast. (Resources and tools that I have used: tsark, Material design, WCAG).
Define the UI patterns and rules

We found that some of the UI patterns that we are currently using do not apply to the dark mode during the process. We had to come up with a new solution across both modes.

Development

Design system

Part of the project was to create clear guidelines and a Dark Mode design system.
It was essential to share and explain the new UI across my team. So all designers can easily follow and implement the latest designs. To do that, I used critique sessions to present the progress of my work.

Front end

I wanted to ensure that we are keeping visual consistency across both platforms (IOS and Android). That is why I make the whole team (me and two brilliant developers) collaborate very closely. Thanks to good communication and visibility, we quickly identified any issues and reacted to them.
Usability testing

In this case, it would be difficult for us to learn much from testing without the app's full functionality. To collect better feedback, we developed the app's beta version. We implemented necessary changes based on test results. We tested how people interact with the dark mode as opposed to the current product. I intended to check how the dark mode is performing. We conducted several testing sessions. Our primary focus was on readability and task performance.

Release

After release, we closely monitored the data. We look at numbers according to performance and conversion. We were looking for any areas to improve or revisiting some of the visual solutions. We noticed that our users are very keen to use dark mode, and they are expressing their appreciation by rating us in the App Store and Google Play. I was pleased that we have prepared ourselves before the dark mode become an expected feature.
Translation:”With Dark Mode 2.0 again great! - I was not very convinced of the yellow redesign of the app. The first dark mode was already pretty great, but the update yesterday has topped that up again. Looks super clean, especially that the top is no longer blue, but dark grey. Keep it up!