Menu

Design System

Home / Portfolio


Color and Accessibility | Design System

Dark & Light Themes for BlackBerry HUB+


Overview | Learnings | Challenges | Accessibility | Design System



My Role

UX UI Designer - BlackBerry Security

Tools Used

  • Adobe XD
  • Adobe Illustrator
  • Adobe photoshop

Industry

Design for a Blackberry Design System

Secure Mobile Apps for HUB+ Productivity Suite

  • Inbox Email and Notes Apps
  • Calendar and Task Apps
  • Secure Password App
  • Power and Battery Center
  • Contacts App and Calls/Messanger App


Overview


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.




Final Product

Dark Mode UI

Dark Mode Design for BlackBerry HUB+ - Including Secure Inbox App, Calendar, Contacts, Notes, Tasks, Passwords Keeper, Power Battery Center and other security-focused apps.


EmptyData

Illustrations for Light Thene - BlackBerry Hub+ Services




Learnings


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.


code



Dark Theme Challenges


  • 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.


Dark Mode UI




Accessibility and Colour Exploration

dark theme guidlines

Dark Theme testing colour variations

Dark Theme UI

Dark Theme UI

Dark Theme Top Bar Color Explorations

Dark Theme UI

Dark Theme Action Bar Color Explorations

Dark Theme UI

Dark Theme Action Bar Color Explorations


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.





Design System Breakdown


Color Spec

Dark Theme UI

Dark Theme UI


UI Spec

Dark Theme UI


Layout General Template

Dark Theme UI

Dark Theme UI

Dark Theme UI

Dark Mode Code

Dark Mode Code

Dark Mode UI

Dark Mode UI

Dark Mode UI

Dark Mode UI


Illustrations

Dark Theme UI

Illustrated background adjusted for Dark and Light background.

Dark Theme UI

Dark Theme UI


Explore here more Illusrrtations & Onboarding screens


Light vs Dark Example

Light Mode UI Dark Mode UI


Dark Mode UI

Dark Mode Design for BlackBerry HUB+ - Including Secure Inbox App, Calendar, Contacts, Notes, Tasks, Passwords Keeper, Power Battery Center and other security-focused apps.


Summary

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.


Onboarding Screens, designed for BlackBerry Keyboard Availble on Google Play


More Works: