UX UI Designer - BlackBerry Security
Tools Used
Design for a Blackberry Design System
Secure Mobile Apps for HUB+ Productivity Suite
Even when Dark Mode wasn’t yet a thing, it still existed on the BlackBerry Devices. The concept of dark mode isn’t entirely new, as it traces its roots back to the early days of computing when the first computer screens were already in “dark mode.”
Later on, it gained significant traction when major tech giants Apple and Google officially integrated Dark mode themes for their OS. Since then, dark mode options have become increasingly popular, with many apps adopting this Design.
In my role, I led a comprehensive dark theme design system for all products within BlackBerry HUB+. This involved conducting a detailed case study and research to understand challenges related to dark theme usage. And developing design system guidelines to ensure accessibility and visual aesthetics were optimized for both dark and light backgrounds.
In the era before computers, our reading habits were centered around books. Our eyes got used to reading with dark text on a white background. This was when we were working and studying during the daylight and sleeping at night. Nowadays, when we use our devices around the clock, users want to have the possibility to customize their devices, giving their eyes a rest, especially during nighttime use. Dark mode makes devices in low-light environments more comfortable by reducing glare and preserving night vision. The shift to dark mode has also brought various advantages, for potential battery life improvements, making it easier for anyone to use a device in a low-light environment.
From my extensive collaboration with developers and asking their preferences, it seems like Dark mode has proven to be highly beneficial when coding. Beyond providing much-needed relief to their eyes during extended screen time, it also enhances the entire coding experience. It’s interesting how the color-coded elements, both in dark and light mode, allow developers to quickly understand code structure, making component identification and differentiation a seamless process. This enables them to scan through code rapidly, improving productivity and cutting down the time spent on line-by-line code analysis.
Text and Color
In dark theme design, text can be challenging to read if color choices and contrast levels are not carefully considered.
Solution
I was conducting thorough testing to ensure sufficient color contrast, adhering to established accessibility guidelines. Use fonts that are easy to read in low-light conditions, with a unified Brand color palette that is adjusted to Light vs Dark themes.
Color Contrast:
Colors may behave differently on light and dark backgrounds, which demands a well-thought-out color palette to keep Brand Identity.
Solution
I worked through a careful color palette for a consistent Brand Identity tailored explicitly for dark and light themes, ensuring that it effectively communicates the intended message and is compatible with the Brand.
Cluttered Interfaces:
Dark UI designs can quickly become cluttered due to the absence of “white space” in light themes.
Solution
Prioritize clean and minimalist Design. Carefully consider the spacing between elements to avoid overcrowding. Maintain visual hierarchy through well-defined layouts and grouping of related components.
User Preferences:
Only some people prefer dark themes, which can create a challenge in satisfying a diverse user base.
Solution
Offering users the option to switch between light and dark themes. Provide clear instructions on making the switch in the user interface settings, allowing users to personalize their experience.
Creating an inclusive experience requires careful consideration of color exploration and an understanding of various design principles that prioritize accessibility and diminish the reliance on color as the sole conveyor of critical information.
Visual Hierarchy Exploring card-based Design in dark themes, I learned that maintaining visual Hierarchy becomes essential. For example, shadows cannot be perceived the same as with the light theme background. Shadows play a significant role in conveying depth in UI, but their perception differs in dark backgrounds. I have been experimenting with different shades between Blacks and Greys to strike a balance and communicate an effective hierarchy emphasizing elements based on their importance.
High Contrast Design: Color contrast and tones used on a dark theme are vital for all users, but especially for people with poor vision or color blindness and disabilities. Users must be able to perceive content. This is why opting for a high contrast design, especially in critical areas like text and icons. Careful use of gradients, semi-transparent colors, textures and background images.
Avoiding Relying Solely on Color: One valuable approach I’ve embraced when designing for colorblind individuals is to begin with a monochrome black-and-white layout as the foundation. This deliberate choice ensures that essential information is clear, regardless of color perception. I used additional visual cues, such as labels, patterns, or icons, to provide context or differentiate elements. This ensures that users with color blindness can still comprehend content.
WCAG Checker To ensure a sufficient contrast between the text background and elements is visible at the right proportion, I checked the ratio requirements with WEBAIM and Contrast Checker contrast ratio for text and graphic objects.
Testing Internaly with Users: I was conducting simple usability testing to get valuable insights into the user experience that can help identify areas that may need improvement.
Explore here more Illusrrtations & Onboarding screens
When designing a product, I constantly research industry standards and competitors, considering brand values, target audience and usability requirements. While creating the Dark Theme Guidelines for BlackBerry Products, I also had the opportunity to investigate the different aspects and challenges of accessibility. Dark mode has evolved a lot but still can create many accessibility issues. Saturated colors should be used carefully, and darker-tone colors like red or brown might be hard to read. Those primarily found it challenging to pass WCAG’s accessibility standards. Overall, for some people, dark mode is more accessible, for others, the white background would be preferable. This is why users need to have customization, having both a dark and a light mode, allowing the users to choose and making the switch easy to find. Design is about functionality, and more thought should be given to accessible color choices when designing, both for dark and light screen modes. The goal is to create products that will be easy to use, accessible for everyone, and effective — ensuring a trustful and positive experience from the user’s perspective and the company’s impression.
More Works: