Visual and interaction design.
Q4, 2019
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.
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.
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.
Steve Schroger - Refactoring UI
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?
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 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.
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.
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.
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".
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.
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.
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.
Here's some screenshots of the Dark Mode screens. These are taken from the live app that you can download on the App Store.
We expected the darkmode to have less users than light mode. Surprisingly, 50% of our users are already using Wego app in dark 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.
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.
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.
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.
Improving the likeliness of conversion by making discounts more achievable and less demanding.
