How I redesign the Gojek app into Dark Mode
Dark mode is always a challenge. It’s not as easy as flipping the color from white to black and call it a day.
In this story, I will tell you how I redesign the Gojek app into dark mode. I did the exploration back in November 2020 and published the design in December 2020 on Dribbble.
P.S.: Gojek might have changed some components layout by the time I published this piece.
Introduction
Gojek is an Indonesian on-demand multi-service platform and digital payment technology group based in Jakarta. Gojek was first established in Indonesia in 2009 as a call center to connect consumers to courier delivery and two-wheeled ride-hailing services. Gojek launched its application in 2015 with only four services: GoRide, GoSend, GoShop, and GoFood. Valued at US$10 billion today, Gojek has transformed into a Super App, providing more than 20 services ranging from transportation to bill payments (Gojek, 2021).
I chose this app to adopt dark mode because there are so many use cases that involves people interacting with Gojek app at night. This study case will discuss on why and how I redesign the Gojek app into dark mode.
Current Version (Light)
Gojek’s current version is light themed and always has been. Only its streaming service app, GoPlay, has adopted dark mode version.
Research
The first step is to figure out the why. Do people really need the dark mode to be implemented in Gojek?
I have found three main scenarios why we need dark mode.
- When you’re out in the dark and waiting for your GoRide driver to arrive, the only thing that shines is your phone opening the app. This might be prone to criminals, especially if you’re in the shady vicinity.
- When you can’t sleep and craving midnight snacks, you wouldn’t want your phone flashing your eyes while scrolling for potential bites in the dark, right?
- Today’s iOS and Android has support for dark mode at systemwide level. In their respective device settings, people can choose Dark Mode as their default interface style and schedule automatic changes between the appearance modes. Because people make these choices at a systemwide level, they generally expect all apps to respect their preferences.
The benefits of dark mode
Apart from those scenarios, I found some very interesting benefits of implementing dark mode in most, if not all apps.
Health and well-being
Everyone can relate to being in a room where the lights are turned down and you’ve got this white screen blinding you, …
(Sameer Samat, VP of Product Management for Android and Play at Google)
One reddit user also did a great job of summing up this point with a brilliant comment of dark mode.
Harvard Medical School (2012) study conclude that exposure to light suppresses the secretion of melatonin, a hormone that needed for sleep. While all light do that, blue light at night does so more powerfully. That’s why most car interface dashboard uses blue for its primary color to keep us awake while driving.
So is nighttime exposure bad? Some studies even suggest there’s a link between light exposure time at night to diabetes, heart disease and obesity. Although it’s not the main cause for these diseases, we shouldn’t risk it. Since these exposures suppress the secretion of melatonin as said above, this very reason is a part of why so many people don’t get enough sleep and researchers have linked short sleep to increased risk for depression, diabetes, and cardiovascular problems.
An article by NN Group (2020) suggest that visual output tend to be more optimal in light mode for people with normal vision (or corrected-to-normal vision), but dark mode could be better for people with cataracts and related disorders. Long-term reading in light mode, on the other hand, can be linked to myopia.
Battery saving
Dark mode apps will help your battery last longer. Google has reported that using dark mode on OLED screens improves battery life significantly. The dark mode in the YouTube app, for example, saves around 15% screen energy as compared to the light one at 50% brightness. The dark mode saves a whopping 60% of screen energy when set to 100% screen brightness.
While most of Android devices have adopted OLED screens for a long time, Apple finally updated their entire smartphone lineup to use OLED last year.
This little juice saved by dark mode can be useful when you’re at the end of the day with no access to charging station whatsoever.
Safety
Smartphone is a distraction in the dark, especially when you’re using it with full brightness. This kind of distraction is dangerous when you’re in a disreputable neighborhood. This made you an instant target since you’re holding the only thing that shines in the dark.
In 2010, two female students were robbed and roughed up in separate incidents near Boston University. In both cases, the women were walking alone in the middle of the night while talking to their smartphones.
While dark mode may not turn off the light completely, but at least you’re not the shiny one anymore.
It looks stunning, doesn’t it?
Let’s be honest here, dark mode just looks stunning, with the right process.
Gojek’s Branding
The next step is to understand Gojek’s Branding, to do that, I study their social medias, website, apps, and their Gojek Design’s website. From the site, I gathered some information about their brand guidelines.
Dark Mode Fundamentals
Colors
Since it is dark mode, so the colors have to adapt to the dark side too.
Showing colors on darker surfaces means the differences between your saturated and unsaturated colors will stand out a lot more (Microsoft Design, 2019).
For branding purposes, Gojek has six main colors for its categories of services.
- GoGo Green for Transportation & Logistics
- ShopChop Red for Food & Retail
- BuckBuck Blue for Payments
- WatchPop Pink for Entertainment
- WorkPerk Purple for Business
- AllDay Orange for Daily Needs
Each main colors has its darker shades to compensate for components hierarchy.
Depth (and shadows)
To define component hierarchy, we often use drop shadows to simulate elevated heights. The higher component’s position in the hierarchy, the more significant its height in shadows. But when in dark mode, it’s getting a bit tricky to use the same approach to emphasize more important elements (Babich, 2019).
If we see Apple’s Human Interface Guidelines, they suggest to only use colors to distinguish different depth of elements. In Google’s Material Design, we mix different shades of gray and a little bit of drop shadows.
In my approach, we use different depth style for different purposes. For solid color backgrounds, we follow Apple’s Human Interface Guidelines’ approach. There are five shades of gray for each different elevation levels.
Maps background is a little bit tricky to work with, they don’t consist of one solid color like other backgrounds. Forcing it to use the solid color approach will result in colliding with some key cartographical elements in the map.
To work best with maps background, I use a drop shadow to differentiate between maps background and its foreground. This type of shadow also simulate farther level between elements.
Photos & Illustrations
To further emphasize the dark theme in the app, we shouldn’t stop on the cards and UI elements. We can enforce the dark rule to the marketing illustrations as well.
But if we use marketing materials where there’s a photography involved, we can’t just flip the colors, do we?
No, that’d be awful.
The sensible approach would be like this,
Design
Okay, now that we have decided what are our fundamentals of the dark theme, we can start redesigning the app.
Let’s take a good look at a few components:
GoFood Categories
These category cards really eliminate the drop shadows in favor of solid color background to define depth. But it doesn’t stop there, if you take a look closer to every illustrations, you can see that each illustration has been completely redesigned–color wise to match its background. Black elements in the illustrations is converted to white so it doesn’t completely disappear when clashing with dark backgrounds.
Shortcuts Bar
For this component, the same rule before in GoFood Category Cards also applied here.
GoRide Page
In GoRide page, there are a few things to look at since this is a more complex page that involves a map as its background. As said before, solid color backgrounds doesn’t work when the background is a map because it can clash with cartographic map elements. Instead, we use drop shadow to illustrate elevation.
As for the color of the shadow, I use soft shadow with category color for the respective services like GoGo Green for Transportation & Logistics or ShopChop Red for Food & Retail. See below for example on GoFood Order Page
Voucher Card
Restaurant Card
and so many more! You can try the experience here.
However, dark backgrounds are not without their drawbacks. Text on dark backgrounds, for example, can be difficult to read while using a screen in a well-lit room or in direct sunlight. So the only time you shouldn’t use a dark mode is if you’re confident your app will only be used in broad daylight, but that’s a rare case, and certainly Gojek is not the case.
This is why an automatic switch to and from dark mode when sunset and sunrise respectively comes in handy (just like in Google Maps). Users don’t even have to turn several times a day, which is absolutely exceptional usability. For more control, users can also easily switch manually via the app settings page.
Thank you for reading this piece about my exploration. Any feedbacks are welcome! ✌️
References
- Apple. (n.d.). Dark Mode. Accessed Nov 19, 2020 from https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/.
- Babich, Nick. (2019). 8 Tips for Dark Theme Design. Accessed Nov 20, 2020 from https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6.
- Budiu, Raluca. (2020). Dark Mode vs. Light Mode: Which Is Better?. Accessed Apr 10, 2021 from https://www.nngroup.com/articles/dark-mode/.
- BU Today. (2010). Cell Phones a Dangerous Distraction at Night. Accessed Apr 10, 2021 from http://www.bu.edu/articles/2010/cell-phones-a-dangerous-distraction-at-night/.
- Gojek Design. (n.d). Gojek Branding. Accessed Nov 11, 2020 from https://gojek.design.
- Google. (n.d). Dark theme. Accessed Nov 19, 2020 from https://material.io/design/color/dark-theme.html.
- Harvard Health Publishing. (2012). Blue light has a dark side. Accessed Apr 10, 2021 from https://www.health.harvard.edu/staying-healthy/blue-light-has-a-dark-side.
- Koemets, Reeno. (n.d.). The Benefits of Dark Mode: Why should you turn off the lights?. Accessed Apr 10, 2021 from https://blog.weekdone.com/why-you-should-switch-on-dark-mode/.
- Microsoft Design. (2019). Designing for Dark Mode: More Than Flipping a Switch. Accessed Jan 24, 2021 from https://medium.com/microsoft-design/designing-for-dark-mode-more-than-flipping-a-switch-c21fb38722d2.
- Priambodo, Briandito. (2019). Turn the lights off — designing for dark mode 🌌🌒. Accessed Jan 22, 2021 from https://uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-wego-ios-app-6c4967e59dd6.
