About this project
Dark themes have gained popularity in recent years due to their potential benefits, including reduced eye strain and improved battery life. This feature provides users with a visually appealing and user-friendly dark theme option while maintaining the application's core functionality and aesthetics.
My role: Research & Design
Tools: Figma
The problem
Not having a dark theme can lead to increased eye strain and discomfort for users, especially in low-light environments. It may result in reduced usability and readability, potentially discouraging users from prolonged use of the application. Additionally, without a dark theme, users may experience higher battery consumption on devices with OLED screens.
The solution
Design a dark theme that resonates with existing styles. Build a mechanism for users to switch between themes in the app, or set their theme to match their system settings. Improve the developer experience implementing color schemes.
Research and discovery
In my role with Welocalize, I managed our feature request forum UserVoice. Here we gained insights from our employees and customers about what we should do to improve their experience using our products. Part of my job was to evaluate each idea, gather requirements, and formulate actionable development items. When I saw a dark theme request submitted to the forum, I got excited because I am a big fan of dark themes myself, and the development team had been wanting to build one for a while. Many other users voted in support of this idea, so I quickly kicked the project into action.
I began conducting user surveys and interviews to understand preferences and pain points related to the dark theme. I then analyzed industry best practices and existing dark themes in popular applications. Material Design became our beacon.
Darken with grey approach.
Information architecture
To properly define the theme, I thoroughly reviewed the current light theme of our applications. I took note of the color choices, typography, and UI elements and how they corresponded to the color variables defined in the codebase's documentation. I categorized the function of each color (e.g. gray-900 is used for paragraph text) which served as a helpful guide for defining the final dark color palette.
Define the solution
The front-end of our codebase supports numerous applications, both internal and customer facing. Ensuring style reusability across these applications and preventing any unintended disruptions is paramount. To achieve this, we collaborated closely with our front-end architect during the solution phase, ensuring alignment with the existing style framework. Our solution involved toggling a global class that would switch the themes accordingly.
Design
I created two different dark theme mockups based on my exploration with color. One with deep blues, and one with black and grays. After presenting the prototypes to users we reached the decision to implement the black and gray theme
Light theme
Deep blue theme
Dark theme
Retrospective
One of the major successes of this project was our commitment to a user-centered approach. We started by conducting user surveys and feedback sessions to understand their preferences and pain points. This helped us ensure that the dark theme we designed would truly meet the needs and expectations of our users.
Our design team collaborated effectively throughout the process. We encouraged open communication and brainstorming sessions, allowing diverse perspectives to shape the final dark theme. This collaboration led to a more robust and thoughtful design, with input from both designers and developers.
Our project reaffirmed the importance of user feedback. Users provided valuable insights throughout the design and testing phases, which directly influenced our decisions and led to a better end product. Regular feedback loops should be an integral part of all future design projects.
Designing a dark theme was a challenging yet rewarding endeavor. We successfully created a user-centered, accessible, and visually appealing dark theme that enhances the overall user experience. By learning from our successes and areas for improvement, we can apply these lessons to future design projects and continue to provide outstanding design solutions for our users.