E-commerce dark mode case study
Turn the lights off and enjoy the luxurious experience!
In the iOS versions 13.0 and beyond, people can choose to adopt a dark, system-wide appearance called Dark Mode. Since the launch of this feature, a lot of popular apps have adopted dark mode as optional browsing experience. Interestingly though, there aren’t many examples of E-commerce apps that offer a dark mode theme.
As Al Tayer Group’s first and exclusively digital e-commerce site, Ounass boasts over 500 luxury brands; and in the world of high-end brands and VIP customers, experiences are essential! They attract customers, engage them, and create memorable events that connect them emotionally to the company or brand. It was therefore only natural for Ounass to remain ahead of the curve and offer a unique experience that no other luxury competitor shares: Dark Mode.
Why Dark Mode?
Dark UI’s are dramatic, stylish, elegant and it compliments luxury. A black background design reinforces striking visuals, introduces a sense of mystery, has better contrast, and supports visual hierarchy.
Another benefit of Dark Mode is the importance placed on users’ health and wellbeing. The bright light of one’s white iPhone screen, set against a darker room setting has alleged damaging effects on users’ eyesight. The other commonly known advantage of Dark Mode is the reduced energy consumption on devices with OLED or AMOLED displays — longer battery life, here you come!
Design
The process was quite tedious at first: it was challenging to decide on a color palette that would ensure a balanced contrast, all the while maintaining a consistent and luxurious look & feel between both modes.
We started experimenting by removing all of the extra elements, and just focusing on the foreground and background colors — if you’re as obsessive as any designer is, you’ll know that grueling multiple iterations are key to any successful implementation.
Instead of going with an all-black background, we instead decided to select a dark gray shade to be our background color. Dark gray surfaces have the ability to showcase a wider range of colors, elevations, and depths, as shadows are traditionally more visible on gray settings (as opposed to a true black setting). In addition to this, light text on a dark gray surface also has less contrast than light text on a black surface, which allows users to browse and engage with the content with less strain on the eyes.
Once we were confident that we hit the right tone, we started injecting typography and visual assets to see how it would blend against a darker contrast.
✍ Keeping in mind the Design Goals
- Achieve a strong, dramatic look for striking visuals.
- Project a feeling of style and elegance, luxury, and prestige.
- Help focus and guide the user’s attention with minimal distractions
- Support visual hierarchy and information architecture.
Examples with Imagery
Examples with Content
Design System
The next step in our process was to make sure all the colors were mapped 1 to 1 to our existing color library. For other designers, the system acts as a guide they need to use while designing new features, and for developers to automate components with the right color output. This process is very important as it establishes a strong discipline for both designers and developers to follow.
Colors
Why do we need a system?
We can bucket it into 3 main principles:
- Efficiency: Instead of repeatedly building similar components from scratch, Design Systems enable designers & developers to reuse components and thereby increase efficiency.
- Consistency: Design Systems introduce a shared set of principles and rules to build components. It becomes much easier to create consistent experiences across different platforms.
- Scale: Increased efficiency and consistency lead a company to build faster products at scale.
Typography
Iconography
How to turn on Dark Mode?
- Go to Settings > Display & Brightness.
- Select Dark to turn on Dark Mode.
- You can also set Dark Mode to turn on automatically at sunset or at a specific time. Go to Settings > Display & Brightness and select Automatic. Tap Options to set a schedule for Dark Mode.
The Future is Dark
Pun intended
This project wouldn’t have been possible without the support of our technology, product, and QA team. What started as just an experiment on our app’s A-Z Designer page tab, and getting excited over the idea of how the whole app could look in Dark Mode, eventually turned into a passion project for everyone in the team.
Want to experience Ounass, download the app here.
And don’t forget to check out how we designed the Ounass Native App!
