BlackBerry Design System
When I started at BlackBerry the design team had just started creating a shared system to be used in a future UI refresh. I worked with a handful of talented BlackBerry designers to overhaul the UI and write the guidelines for how and when to use different patterns. It would become the proudest accomplishment of my career to date, and the hardest thing I’ve ever worked on.
Google PlayStore screens using components I helped design
Inconsistency across our products
The design aesthetic, interaction patterns and usability were incredibly fragmented across all six products. We had multiple styles for the same components and no source of truth for members of the design team to follow. We needed a system that could work within the existing BlackBerry suite of products but also be a platform for evolution.
Product Audit
A frequent struggle for me when incorporating a new component into the design system was accounting for its every use case. To fully understand how we would scale our components, we needed to meet with product teams for each of the apps to figure out their specific needs.
The design team’s job was not only create a cohesive brand experience between the apps, but to find a working ground in which components could be reused in the development process. Coming out of our audit, we had documented specifically where each product needed its own flavour which helped us set up some guiding principles.
“80% System”
“20% Flavor”
Guiding Principles
Leveraging what we had learned, we then worked to set up parameters to define what kind of system we wanted.
Strict
We wanted a comprehensive and detailed documentation and will be fully synchronized between design and development. There will be a strict process for introducing a new pattern in the System. A strict system should be very broad in order to cover the majority of cases the teams may encounter.
Modular
We wanted our products to be made of interchangeable and reusable parts. It suited well for BlackBerry apps that have to scale quickly and that have to adapt to multiple user needs.
Centralized
The design team at BlackBerry is fairly small and focused. It made sense for us to take charge and evolve it. However, everyone is allowed to participate and make suggestions to improve the system, this is in order to create a sense of membership which also makes sure that the system covers the needs of product teams across BlackBerry.
Top Navigation Banner
At the start, I was tasked to do some visual explorations for the main inbox application BlackBerry Hub. Here are some samples of my early explorations looking at using gradients and colour in an effort to create a modern and cohesive visual language.
However, I had forgotten that this one component not only needed to feel at home in BlackBerry Hub, but also in Calendar, Notes, Tasks, and Settings.
Bringing our products together
The Hub+ services logo acts as an umbrella for the entire suite of apps which became a common theme that we ultimately leveraged. Bringing together the apps is a ribbon pattern that is woven through each app so customers will always know they are using a BlackBerry application!
Internship Highlights:
As a result of being on the design systems team, I was able to learn to work interdisciplinary with multiple product teams across different campuses.
It felt incredibly satisfying to know that my contributions would be implemented to effect a wide range of products.