Turn the lights off - Dark mode for Wego app.


Visual and interaction design.


Q4, 2019

Product & Platform

Wego is an online travel search engine company. In this project, I led the project and designed the dark mode for Wego mobile apps.


The dark mode had 50% adoption in the first 2 weeks with the same conversion rate as the light mode.


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 about the benefit of dark mode.

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

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


It's not as easy as flipping a switch

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 the colors aligned 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.

How might we keep the colors on brand, has good accessibility, and also look good at the same time?


The Value of Dark Mode

Dark mode is famous for its "reputation"

During the desk research, I found some of the well-known benefits of Dark Mode:

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

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

  • 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 depends on the user's eye health.

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.

Environment affects how people perceive colors

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.

Design exploration

Getting the right "feel"

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.

Image: Dark mode explorations

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

Image: The colors used in the app.

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.

Image: The component translates between dark and light mode.

Focusing on color functions

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 below, 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.

Image: The light green brand color does not work well in dark mode.

Adjust, when you must

As quoted by Nick Babich of UX Planet, the colors you use on dark mode does not have to be the opposite of 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.

Image: Sometimes, keeping the light mode color works better.


The dark mode performs as well as the light mode.

Featured on the Apple App Store in the Middle East, South East Asia, and North Africa.

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

Image: The final design live in the mobile app.

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.

Image: Metrics of the dark mode and light mode, compared.

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.

Image: The recognition we received in the App store


Asking for feedback is the key to success

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.

Little research is better than no research at all

The dark mode was a novelty back then and I am glad that I spent sometime doing the desk research before jumping into the design. Otherwise, I wouldn't know the pros and cons of dark mode, as well as the importance of this feature. Without the desk research, I might end up naively flipping from light to dark without thinking too much.

Thanks for reading!

Check out my other projects:

Stop the Churn, Stop the Burn: New Offers Experience

Improving the likeliness of conversion by making discounts more achievable and less demanding.

Turn the Lights Off: Designing Dark Mode for Wego App

Featured on the Apple App Store for consecutive weeks in the Middle East, North Africa, and South East Asia.

Muslim Prayer Times and Qibla Finder Widget

Improving the likeliness of conversion by making discounts more achievable and less demanding.

Visual Design Gallery

Some design explorations I've done in recent years. You'll find animations, interactions, icons, and illustrations here.