In every wood in every spring there is a different green 🍃
Design System Enhancements
Increasing designer velocity through
design system enhancements
How it started...
The Galaxy Design System was created to enable rapid development through a set of predefined components based on the Angular Material framework. In order to maximize adoption of the framework amongst design and development teams and reduce amount of guesswork and toil during sprints, I lead the effort to enhance the design system through key component improvements. My key targets audiences for this project were my peers, who included both engineers and designers.
"A good design system should be a force-multiplier for development"
Interviews
In order to understand where friction was occurring within the design system, I decided to interview my peers directly. I had access to 11 designers in total and performed the interviews in person and virtually. The primary question I had my subjects answer was:
"What is your greatest challenge using the design system and UI kit currently?"
I was most curious about how my peers were currently leveraging the UI kit to perform their tasks and if there were any shortcomings that could be rapidly iterated on. During my interviews, I learned that one of the greatest sources of toil that my peers encountered was the initial set-up of elements, screens, and components before they began their projects. An additional source of toil that I identified was the lack of micro-interactions, which often resulted in designs that didn't quite match up to what was developed.
Card Sorting
In order to better understand what my peers required in terms of document set-up and micro-interactions, I decided to run a small card-sorting activity in person and virtually. I had my peers write down their individual challenges that they faced in these areas and then grouped them according to shared themes.
After grouping the cards into their respective themes, I had my peers dot-vote on which cards they felt were the most important. The outcome of the voting showed that my peers wanted some sort of kit for each of their areas of work that included UI elements relevant to their products, as well as UI elements that more closely resembled product software (primarily buttons and button states)
Handy dandy kits and elements 💼
UI Design
I decided to jump right into UI design for this project as I had really good feedback from my peers on the types of problems they were facing, and the existing UI kit made it easy to put together kits as well as applying changes to existing components. Having an established UI kit really sped up this process as I didn't have to work from scratch for everything and was able to rapidly iterate on component combinations to come up with something that worked for my users.
I designed the kits for both desktop and mobile versions of our software, and included some dark mode elements as well in preparation for our roll out of dark mode.
In addition to the kits, I tweaked the atomic elements for the navigation as well as buttons to showcase different states that they could take. This better reflected production software and allowed for higher-fidelity designs to impress stakeholders. I was especially proud of the kits that I created as they allowed my designer-peers to hit the ground running with their projects and reduced a lot of the setup involved at the start. This allowed our business to reduce the time for designer hand-off to engineering and allowed for more rapid ideation on projects.
User Testing
I made sure to gather feedback and test my changes out on my peers throughout this project. As these changes were directly related to our existing UI kit, it was easy to perform rapid ideation around different concepts and receive feedback directly within the Figma app itself. I had my peers leave comments using Figma's commenting tool on different aspects of the project and addressed each as they came in. By utilizing Figma's built-in commenting feature, I was able to keep a lot of the feedback centralized and act on it quickly as it came in.
I realized quickly that creating kits solely for my platform team wasn't going to be enough, and that my product team also was looking for kits specific to their products as well. Creating kits for the product team lead to additional changes to atomic elements specific to those products.
As our platform and products have grown, I have continued to iterate and improve on the kits and states for elements. Since the UI kit is a living artifact, this will be an ongoing task.
What did I learn?
I really enjoyed working on this project as it directly related to what myself and my peers work with every day. I ended up modifying 137 components and creating 10 different kits, and have plans to continue improving the components and kits to steadily increase designer velocity. After sharing the changes with my peers, designer velocity increased by 34%.
These types of projects where I get to improve the tooling and artifacts used by myself and my peers are the most rewarding kind, as it allows me to be a force-multiplier and help unblock my peers from tedious or toilsome tasks.
137
Improved components
11
Happy designers
34%
Increase in designer velocity
2
Cans of Redbull