Due to an outdated system with lack of maintenance, our design language across products and platforms showed huge disconnect. Leading this effort, I revamped the Hotwire Design Language to create a modern, accessible and efficient Design System.
With accessibility as a focus, I revisited our current color system to understand their contrast ratios and how accessible they were, while also understanding how certain color blindness could affect how users preceive them.
The current system had no clear guidelines on how our primary, secondary, or any other color were suppose to be used. There wasn't a clear definition on when to use red or when we should use blue. When taking a look at the hex codes used in our website, I was able to clearly see how this resulted in a disconnected experience across our products. By clearly defining how the primary color should be used, this resulted in a less noisy UI full of loud red.
I explored how motion would look in the overall experience. Exploring how users interact with elements on a screen and what feedback they expect through that interaction. From bottom sheets, map and scroll interactions. The goal was to provide consistency in motion across our product, and create a more engaging and interactive experience for our users.
After thinking through guidelines and system rules, I moved into designing new components for the Design System, and collaborated with Developers to move the components into a token system in React. We redesigned pages within IOS and Android and slowly launched them out.