Embracing the Dark Mode
Project Overview
This project purpose is to enhance user experience and platform consistency on Vidio, Indonesia's leading over-the-top (OTT) platform, by addressing inconsistencies of using mostly light mode and few dark mode pages through its implementation.
Project Details
My Role
Product Designer Intern
Ideation, research, auditing, designing, user interface design for preview purposes, pitching
Team
- Eggy Gouztam (Product Design Lead)
Timeline
Q4 2022
Tools
Figma, Google Sheet
Research Steps
Research Process
1. Auditing
Light Mode
Most of screens in both the platforms desktop website and M-Lite still uses light mode as follows. As mentioned before, it is “most” meaning that there are few pages that incorporate the usage of dark mode that will be shown later.
(a) Desktop View
(b) Mobile View
Dark Mode
In order to enhance user experience, the mobile application has the capability to automatically adjust to the system's setting and enable dark mode, which is aligned with the user's preference. On the other hand, the TV application has already been designed with dark mode from the start to provide a comfortable and immersive viewing experience.
(a) Desktop View
(b) Mobile View
2. Heuristic Evaluation
Inconsistencies
When it comes to user experience, consistency is key - both across different platforms and within the same platform. We have identified a serious issue with in-platform inconsistencies, even within the same platform like desktop. For instance, there is a page in desktop version that utilizes dark mode in the subscription page, which creates a jarring experience for users (shown on image A below). <br /><br /> Similarly, on m-lite (image B), the usage of dark mode in the 'games' feature page is inconsistent with the rest of the platform. As we continue to prioritize user experience, it's crucial that we address these in-platform inconsistencies to create a seamless and enjoyable experience for all users.
(a) Desktop View
(b) Mobile View
3. Desk Research
Advantage(s)
- Better Batery Life
- Google Maps in dark mode reduced screen power usage by 63% (Google, 2018).
- Reddit in dark mode reduced power usage by 41% (Witham, 2018).
- AppleInsider measured a 60% battery savings when testing the battery life of an iPhone in dark mode (Heller, 2019).
- Reduces Distraction (Screen-flicker)
- An entirely black background eliminates screen flicker and subliminal static (BBC News, 2018).
- Apple's Mojave dark mode creates a 'distraction-free working experience that's comfortable on the eyes- in every way' (Apple, n.d.).
- Users spend more time on the app with dark mode, suggesting it is less distracting or more comfortable to use (Twitter, 2019).
- Potentially Reduces Eye-Strain in Low Light Environment
- Computer vision syndrome is 50% more likely to affect computer users (BMJ Open Ophthalmology, 2018).
- Darker colors in low-light environments can help users perceive text and graphics more easily and comfortably, potentially increasing engagement (Singh, 1990).
- Lower Blue Light Exposure
- Can potentially have negative effects on eye health, such as retinal damage and disruption of the circadian rhythm (Tosini et al., 2016).
- Can also lead to age-related macular degeneration (AMD), a common cause of blindness in older adults (Algvere et al., 2007).
- Dark mode could reduce the amount of blue light emitted by a device by up to 70% (Bedrosian et al., 2021).
Disadvantage(s)
- It might lower reading capability, especially for individuals with astigmatism or myopia
- Some studies suggest that reading with light text on a dark background may lower reading capability, particularly for individuals with astigmatism or myopia (Shen et al., 2014).
- According to a study published in Ergonomics, participants were able to detect more errors and read faster when reading with light text on a dark background (Li et al., 2014).
- In brightly-lit conditions, dark mode may increase eye strain
- Some studies suggest that reading with light text on a dark background may lower reading capability, particularly for individuals with astigmatism or myopia (Shen et al., 2014).
- According to a study published in Ergonomics, participants were able to detect more errors and read faster when reading with light text on a dark background (Li et al., 2014).
Competitor Analysis
Although there is no explicit reason why most OTT Use dark UI, the following points may explain this "trend":
- Not Text-Centered
- OTT platforms prioritize the presentation of movies and series over textual content like synopses.
- Textual content still exists on the platform, but it has less significance than visual content.
- Maintaining a proper contrast between text and background is crucial for readability on such platforms (Nielsen & Pernice, 2010).
- Reduce Eye Strain
- The users of OTT platforms usually spend a significant amount of time on the platform, and dark-themed UI can help reduce screen flickers and eye strain in low-light environments (Singh, 1990).
- Dark-themed UI can help match the low-light environment in which people typically watch movies, thus making it more comfortable for users to stay on the app for extended periods.
- Benefits of using a dark-themed UI on OTT platforms include:
- Reducing screen flickers
- Minimizing eye strain in the dark
- Making the users more comfortable and encouraging them to stay on the app longer
- Reducing screen flickers
- Minimizing eye strain in the dark
- Making the users more comfortable and encouraging them to stay on the app longer
Design Goals
- Ensure a cohesive and visually consistent dark mode design across all Vidio platforms.
- Seamlessly integrate dark mode to enhance user comfort and viewing experience.
- Optimize color palettes and contrast ratios to improve readability and reduce eye strain.
How Might We? Framework
- Suggested a unified design language for dark mode across all platforms to create a consistent user experience.
- Implement dark mode with attention to platform-specific nuances for a natural transition.
- Carefully select color palettes and contrast ratios to enhance readability and reduce eye strain, improving overall user satisfaction.
Problem Statement
Vidio faces challenges with in-platform inconsistencies, leading to a potential fragmented user experience within the same platform and across different platforms (desktop website, m-lite, mobile app, and TV app).
Expected Impact
Vidio aims to create a unified and enjoyable user journey across all platforms, contributing to
increased user satisfaction, engagement, and loyalty. This product design initiative aligns with Vidio's
strategy to solidify its position as a leading UI/UX-driven OTT platform in Indonesia.
Aimed metrics will include Happiness and Engagement in accordance with Google’s HEART framework.
| Goals | Signals | Metrics | |
Happiness |
Users find the app helpful, fun, and easy to use with dark mode | User feedbacks and surveys | Satisfaction rating |
Engagement |
Users enjoy using the dark mode and keep engaging with it | More time spent in the app |
|
Desk Pitching
Presented to stakeholders such as product design lead and designOps team:
- Conducted design critique to gather feedback on the proposed dark mode design.
- Received feedback on the improved visual consistency and reduced eye strain.
- Stakeholders expressed enhanced satisfaction with the seamless dark mode integration and decided to proceed with it.
Reflection Time
Key Takeaways
- In a company operating across multiple platforms—website, mobile app, lite website, and television—it's essential to establish a universal system to maintain consistency. Biweekly meetings are necessary to ensure consistency across platforms.
- Auditing and documenting components are essential for the development of new concepts and revamping existing ones.
- Collaborating with the DesignOps team is crucial to ensure color accessibility and evaluate potential changes to the current design system.
- Maintaining comprehensive documentation for each team is crucial to ensure alignment with the overall theme.
If I had more time...
- I will definitely ensure to design the whole project :D
Credits
- Eggy Gouztam as the Product Designer Lead whom I directly report to
- Dana Ramadhana and Metta Anantha P as Product Designers in the Browsing & TV Team
- Freska Paramita and Pandu Wibisono as Product Designers in DesignOps Team
Disclaimer
As my internship ended in Q4 2022, further development phase has been transferred to product designers. Some parts of the project are NDA.