Design System
Converting AAA’s design system from Sketch to Figma
About the project
In Spring 2022, I joined AAA, where my team transitioned from Sketch to Figma. During this transition, we needed to migrate the UI components to Figma. In addition, the team decided to take the opportunity to improve each component and build Design 3.0. This change was made to enhance the visual, accessibility, and user-friendliness while maintaining ease of use for designers and developers.
Role: Designer
Company: Clublabs- AAA (Automobile Club of Southern California)
Team: 4 UX Designers and development team
My Role
There were four UX designers working on a design system, including myself. To build it faster, we divided the components among ourselves and focused on the ones assigned to us to build them efficiently. The components assigned to me were Modals, Bottom Sheet, Radio, Check Box, and Tiles. I was responsible for auditing the components, identifying the use cases, defining all the variants, and writing documentation. Once the team checked and finalized the design, I worked closely with the developers to build the components. Additionally, I reviewed the engineering work and wrote stories if needed to ensure the quality of each component.
Goals
Recreate the old components and enhance it
Gather all the use cases and identify how to simplify these cases
Enhance the accessibility
Enhance the ease of use for each component
Approach/Process
Component Audit: I gathered all the use cases to identify all the variants needed. This helped to ensure that we covered all the necessary variants and made changes if required.
Competitive Analysis: I checked how other design systems are doing it by analyzing the size, spacing, interaction, variants, etc., and compared it to our component to enhance it further.
Designing the components: I documented all the variants and used the latest colors, typography, spacing, and atoms. Wrote requirements, such as when to use, the do's and don'ts, and anatomy.
Update the design team: I shared the new design and updated the team on it. Explained rationale and gathered feedback. Additionally, I checked if all the cases were covered.
Iterate: I iterated until it is finalized to hand it off to the development team.
Work with engineers: I explained the requirements and supported them in case of any confusion or questions.
Review engineering work: I checked all the spacing, colors, typography, interactions, etc., to ensure that the design was in line with the design requirements.
What we did to improve the design system and UX/UI engineering work
1. We provided examples for desktop and mobile views in the documentation, which designers and developers can reference.
2. We improved the accessibility of our components by specifying the starting point for keyboard navigation.
3. We documented the usage of each component for designers to easily select the appropriate component for their designs.
4. We utilized Figma's auto layout, variants and properties features to allow designers to easily switch between different designs and states.
5. We created the anatomy for engineers to see how it is built and see the bounding containers. Additionally, to see what the individual elements that live in the component are.
Accomplishments 🙌
Improved productivity of design and development teams
Consistency of UI elements across AAA's product lines
Components made responsive
Improved accessibility, making sure it is WCAG-compliant
A one true source to view the components
Takeaways 💡
Overall, this was a good learning opportunity for me as I was able to explore Figma’s features, like making variants, boolean, properties, instance swap, and auto layouts.
It is essential to conduct competitive research to gain insights, learn best practices, and adapt them accordingly.
AAA offers various product lines, and as a designer, I focus on the insurance product line. While designing and paying attention to details is essential to this task, continuous collaboration with designers assigned to other product lines is also necessary to ensure all use cases are covered.
Maintaining good documentation and organizing files can reduce confusion, ensure smooth implementation, and minimize communication errors. Also, this will reduce the need for back-and-forth communication between designers and developers and those using the component library.