Building a scaleable design system.
Re-design and create a notification and modal system that is scalable and covers all potential use cases within the product as the team adds features.
Introduction
Modern cycling computers are a dance involving three players. There’s the software on the computer itself. The software on the computer is how the user interacts during a bicycle ride. Next, there’s the software on your smartphone. A quality modern cycling computer expects that you have your smart phone with you but each company handles that a little differently. Finally, there’s the software that exists in the cloud, which is the focus of my work for this project: The Hammerhead online Dashboard.
The Hammerhead product team is in the midst of expanding on and adding multiple new features to the Dashboard.
My solution must also be consistent with the Dashboard’s current design language while looking for opportunities to borrow from the K2 unit itself (the bicycle computer).
"I was brought on to re-design and create a notification and model system that is scalable and covers all potential use cases within the product as the team adds features."
I started by taking stock of the current Dashboard system and documenting all modals and notifications as they currently appeared. Taking special care to measure the dimensions and document both what’s consistent/inconsistent, and for myself to understand all use cases in which modals are required.
"I also examined the K2 UI itself to look for opportunities to start working towards a visual language that can match between the Dashboard and the bicycle computer itself."
After I documented everything and I took the time to understand the “why” and “how” of both the Dashboard as a product and all the potential use cases of the modals and notifications, I began a series of design explorations with the various style guides provided to me and looped-in the PM and Lead designer for regular reviews to help ensure I was taking this project the appropriate direction and accounting for all possible use-cases of modals and notification states.
The Dashboard is using the Material UI library so I knew that my solutions needed to rest within those constraints to ease the burden on the implementation side.
