Designing
Dark Mode
for Wego Apps

Platform

iOS & Android

Timeline

1 Month

Role

Visual & Interaction Design

Turning the Lights Off

Apple launched iOS 13 along with Dark Mode in September 2019. A couple of months before that, Wego has been contacted by Apple representatives to consider about building a dark mode for our iOS app.

We were skeptical at first, but decided to do our own study and find out whether it's useful or not.

The aim of this project is not just about making it look good, but also accessible and it has to perform (in terms of usability and metric) as well as the light mode.

We also took this chance to review and improve the quality of our design for both light and dark mode.

Challenges

Dark mode is famous for its "reputation".

These are the well-known benefits of Dark Mode:

1. Dark mode makes the screen easier to see in low-ambient lighting, for example late at night or early in the morning.

2. The dark mode could help you consume less energy and improve your phone's battery life.

3. It makes the contents shine by focusing less on the interface. It uses more vibrancy to make foreground content stand out against the darker backgrounds.

While all of these are not 100% false information, they are also not fully correct. There are a lot of pros and cons of dark mode. But most of the time, it varies for everyone depending on the user's eye health.

Not about converting white to black.

At the beginning of the project, we thought it would be about flipping background and text colors. Ho Schrfrom Refactoring UI explains it best in his tweet.

"When implementing dark mode, don’t throw away the visual cues in the light version by naively inverting the color scheme."

Steve Schroger - Refactoring UI

Keeping colors align with the brand color.

Our brand color (light green)  has a really high contrast to the dark theme, which makes it hard to blend well with the overall color theme.

We needed a way to keep the colors on brand and looking good at the same time.

The Value of Dark Mode

With the reputation it has, we need to find the value in investing our resources to build the Dark Mode. If we are going to build this, we have to make sure that it benefits both users and the company.

I did a quick desk research, looking at sources online to find the benefits of the Dark Mode. Although back then there weren't much credible sources for this topic, I found some interesting reads about Dark vs Light mode.

As a disclaimer, the researches cited on the links below were found after we launched the Dark Mode.

Here are the reasons why we decided to design and build it:

Dark mode works differently for different types of eyes.

Dark Mode seem to work differently for each person and their eye condition. In particular, those don't have a cloudy ocular media such as cataract might feel that light mode is better for their eyes. While people with said condition would suggest the opposite.

It also depends on the environment.

A research made by researchers from the University of Florida concludes that the environment plays a big part on how easy it is to read in either Dark or Light mode. In their research, they found out that it is easier to complete the tasks they ask participants to do in Dark Mode, especially in low-light physical environments.

Dark mode has been around for decades.

Dark mode might sound novel but the world of computers was once black and white. Typing on a black screen with white numbers and letters used to be typical. In a more modern computer era, from what I've observed in some companies I've worked at, software developers are using code editors in Dark mode.

Photo by Museums Victoria on Unsplash

Exploration and Experiments

Since dark mode is still an upcoming feature, not many products have yet to implement dark mode on their apps.  Thus, I couldn't do much competitive analysis.

So in this phase, I was always on the look for dark mode design inspirations and experimented with a bunch of color themes in order to get the "right" feel.

We did a quick usability test of our most common user flow:
flight search and hotel search.

We tested to around 10 people in different age groups. The purpose of the test is to understand the usability and legibility of the dark mode color theme.

Focusing on the contrast, not the colors.

When I was testing the design, someone pointed out that the dark mode does not "float" right. It looks fine, but does not feel like it is the same app, despite having done the tasks easily.

From that point on, I understand where I could improve the visual design. I started to focus on legibility, contrast, and the way the app feels instead of focusing on the hex codes.

In the first exploration on the left, you can see that it actually looks fine. However, compared to the light mode, it has a different contrast and it does not feel like it has the same balance. Compared to the one on the right, it has the same feel and contrast with the light mode.

Focusing on color functions.

Once I get the "right" feel of the app, I need to convert the whole app to a dark mode. To make the process of making the dark mode screens faster, I give the colors names, based on their functions. This way, I can speed up my workflow, I call these colors "the foundation".

Working with components.

As we have already built our design library, with the light mode styles applied, we only need to change the color and text styles accordingly. By the end of the project, we have two versions of the same component: a dark and light version.

Mix and match with the brand color

Sometimes the brand color just doesn't work with the dark mode. Because of that, the dark mode needs some flexibilities and exceptions to make it look good.

In the example above, using the brand color as the header color just doesn't feel right. It does not look good and feels out of place. Thus, I used dark color for the header background and the green color as a color accent.

"A dark mode does not (always) have to be derived from the existing light theme."

Nick Babich - UX Planet

Adjust, when you must.

As quoted by Nick Babich of UX Planet, the colors you use on dark mode does not have to follow the ones you have on the light mode. Because colors are perceived differently depending on the background color. On the hero image and map pins below, I did not change the colors and keep the light mode colors.

Result and Recognitions

Here's some screenshots of the Dark Mode screens. These are taken from the live app that you can download on the App Store.

After we launched the dark mode, we waited for 2 weeks to collect the data and feedback from our users. Here are the result.

50% of users are already using dark mode in the first 2 weeks.

We expected the darkmode to have less users than light mode. Surprisingly, 50% of our users are already using Wego app in dark mode.

Conversion. Dark mode = Light mode.

With the previous assumption, we naturally thought that dark mode needs to pick up before it can perform well. However, it turns out our dark mode and light mode has a similar conversion rate, with only slight differences in numbers.

Featured in the App Store

Along with the launch of iOS 13, Wego is one of the pioneers of dark mode in the Middle East, North Africa, and Southeast Asia. We got featured worldwide in those regions along with other apps.

Learnings

Knowing what I knew after the project, I would say that asking for feedback is the key to the project success. If I could change one thing, it would be to ask feedback earlier by comparing only one page of light mode and dark mode to get the right feel before proceeding with other pages.