"Design Systems are like homes...and lego projects - always a work in progress."
Context
Managing & scaling the Design System at Online Metals has been a fun challenge. When I joined the company in 2022, there was an existing design system with lots of opportunity for evolution!
I started with getting familiar with the "lay of the land" by understanding cross-functional teams' current design system pain points to begin identifying opportunities to scale the system in a way that would provide immediate impact in improving design & dev efficiency.
First off, I identified opportunities to start organizing the system & libraries in Figma according to page type, devices, etc...to streamline the process of finding components & designs and allow the design team to work more efficiently.
I met with the design team to understand their current experience and points of friction, and to discuss system & file organization that would make sense to them.
Upon conducting a component inventory, I discovered that there were many opportunities to address consistency, discoverability & scalability:
1️⃣ Many designs existed only as frames, and needed to be turned into components & applied to the designs
2️⃣ While the system had existing styles, these styles needed to be applied to many components.
3️⃣ Accessibility needed to be addressed in terms of text size and color contrast, according to WCAG & AA standards.
4️⃣ Components were not built with auto layout, so there was a big opportunity here for improving design responsiveness.
5️⃣ Component & wireframe naming conventions were inconsistent, and this caused difficulty in locating components via asset search. I referenced Google's Material Design & Apple's Human Interface Guidelines (HIG) for inspiration on familiar naming conventions and patterns for us to leverage, and collaborated with design & dev to determine direction.
6️⃣ Many components existed singularly, and would benefit from being combined into component sets with properties & variants.
Leveraging Atomic Design as our Holy Grail for scalability!
Rebuilding frames with auto layout and turning into component sets with properties & variants - I started with foundational components that were highly used in our designs, such as buttons, input forms, tooltips, etc...
After that initial work, I used an incremental approach to update the rest of the components in the system, working hand-in-hand with the designs being addressed in our project release cycles and addressing the associated components simultaneously.
I collaborated with our dev team to define and align on initial documentation & annotations for handoffs, iterating on the templates & process over time.
After the first year, we had already started to reap the benefits of having a more efficient & consistent system (yay!), and now it was time to set our sights on improving scalability and taking our design system to the next level!
I created a design system survey to share with our cross-functional teams to help establish a base line on our design system: understanding usage, navigation, each team's pain points, identify opportunities and to improve governance. We will measure the outcome with another survey later in the year.
I also scheduled stakeholder interviews with our Marketing, Product & Execution teams to discuss in more detail and gather more qualitative feedback on our design system to help inform next steps.
One area of opportunity was to include more animation at the component level to help streamline the ease of creating prototypes for user testing:
In early 2024, the business made the decision to discontinue our progressive web app (PWA) and turn on our mobile responsive site, which had previously been suppressed.
This was a huge design system project focused on creating components for the entire mobile responsive experience, as previously, our design system had components primarily for the PWA view, but NOT for the responsive mobile view, as it was suppressed.
After conducting the initial mobile experience inventory, I worked with our Product Owner to prioritize the creation of new designs & components (and addressing accessibility, inconsistency & desired functionality in the existing designs) for the mobile responsive experience, and planning out degradation of the old PWA components.
Another desire was to make our handoffs more clear and efficient. With the recent release of Figma's Dev Mode & Dev Annotations, I worked with the business on the budget proposal to get our execution team's seats upgraded for Dev Mode as it was released from Beta, and collaborated with our devs to demo the new features and get alignment on how we would leverage Dev Mode as we integrated it into our design workflows & handoffs.
For the first initial handoffs leveraging Dev Mode, I included a little tutorial for our execution team and collaborated closely with the devs to ensure the process went smoothly & to identify any improvements that needed to be made to our new handoff process moving forward.
Cliche, I know, but teamwork really does make the dreams work to facilitate a smooth design-to-dev experience. Collaboration & communication is absolutely key to ensure that teams are informed & aligned to function smoothly! 💫
Currently, I am working on transitioning our styles to variables with a very incremental approach:
1️⃣ Initial lift: Transition color styles to variables keeping naming conventions as-is.
2️⃣ Create NEW typography variables (thank you for the new feature, Figma!) & link to existing styles.
3️⃣ Define & create dimensions & spacing tokens (do not exist in our system yet)
4️⃣ Collaborate with design & dev teams to discuss preferred naming conventions for semantic aliasing.
