Scalable design
Building upon the previous design system, we started at the token level. Based on user interviews, people were confused on when to use specific colors, text styles, corner radiuses, etc., resulting in a wide variety of usages across the 40+ teams.
Results:
We built out schematic tables to help illustrate the proper color, typographic, etc. usage backed by accessibility best practices, team needs, and brand standards. We then created an internal, central Figma library to start that had complete documentation for every single component.
We built out schematic tables to help illustrate the proper color, typographic, etc. usage backed by accessibility best practices, team needs, and brand standards. We then created an internal, central Figma library to start that had complete documentation for every single component.
Next, we worked tirelessly with every team to help implement the tokens and basic components into their workflows, update wires, and ultimately hand off to dev for production.
Lastly, we established a system for updating the code repository that wouldn't require a complete overhaul of the backend. Before, every product team was responsible for maintaining their own code. Now, they pull updates from a token library, reducing the amount of manual labor and inconsistencies for the brand.
Putting our system to work
Product teams are busy, and often times unable to help stress test components. In these cases, our team worked with multiple teams to help stress test new UI patterns and templates that affected more than one team at a time. The goal was to create a solution that felt consistent to our system, but adapted to each teams unique needs.
Animated features: In one case, multiple product teams wanted a creative way to showcase various features to potential buyers. i.e. the difference between Blind Spot Monitoring, Lane Departure, Parking Sensors, etc. The Design System team worked to craft brand approved animation templates and built out patterns to help showcase this component in various ways.
Informational Design: A common request from both the product and brand teams were creative support. The Design Systems team sat in a unique position. While we were part of the product org, we had more flexibility to help tie brand into our various digital solutions. This allowed us to art direct photoshoots, craft unique design UI's (as seen below), and communicate between product and brand.
Auctions: A unique project we were able to undertake was completely reimagining our Auctions space. The UI was in desperate need of a refresh and no product teams were asigned to this line of business. So, our team used it to stress test many components and work with developers to lay the foundation of an intuitive system. Later, this line of business turned into four separate product teams we helped shape!
