I appreciate you taking the time to review this case study. I chose this example because I feel it demonstrates:
My ability to lead long-term complex efforts based on collaboration & industry best practices
My ability to influence team culture & process over time
My ability to set up team members & teams alike for success
In July 2022, I joined Unite Us as the Lead UX Designer. Aside from being the primary & support designer for various domain teams, the position was also meant to focus on advancing the existing design system. My experience using very mature design systems at my previous companies helped to drive these efforts.
In two and a half years I consolidated multiple component libraries prioritizing consistency & accessibility improvements, established & utilized a process for evolving the component library, developed a design system roadmap & JIRA backlog, and influenced how teams thought about how to design & build products.
The accessibility improvements specifically served as a differentiator for the company during multiple contract discussions with customers.
A consolidated & intentional design system used across the platform
Single component & pattern library for engineering and matching library for designers
Process for evolving design system
Alignment across teams on methodology for building platform features
When I joined the team and started learning about our process, it felt very "Wild West" to me. The platform was being built using a mix of disjointed component libraries & one-off custom solutions. There was also no official process for updating or maintaining the design system itself.
This led to designers often needing to create deliverables from scratch as well as some engineers & product owners not even being aware that our component libraries existed.
Part of this was a symptom of the custom functionality/features built for individual customers in the past. However, there was still an opportunity for efficiency by consolidating the component library & realigning our process.
How do you consolidate multiple component libraries & one-off custom components while simultaneously influencing teams to change how they build products & retrofit new components into legacy areas of the platform?
Like many of my past projects, my first step was Discovery. I began with a platform audit. Once I became familiar with the history of how the platform had been built, I documented a sitemap focusing on which components were being used on which pages of the platform. It was painfully tedious but it helped accelerate my familiarity with the platform UI as well as the inconsistencies & limitations of the existing components.
Some examples:
Buttons across the platform were implemented as components and as one-off custom buttons not linked to the component library
Some components were being implemented to act as a similar component due to a gap in required functionality
The brand font being used across the platform lacked licensing
One of our engineers also contributed to the platform audit. That contribution included identifying one-off "orphan" components missing from the library and unused components that we could archive.
The next step in my journey was Consolidation. This included learning how to create component libraries in Figma. The process of finding the right amount of complexity when building components was a useful reminder of the flexibility-usability tradeoff. It was also immensely helpful dedicating time from the design team's weekly critique sessions to the component library. I'd demo component updates, the team would provide feedback, and bring any issues with existing components they find. I also made sure to collaborate with the Principal Technical Writer to include aspects from the writing style guide into the component library updates.
Consolidation also included collaborating with engineering leaders to develop a component library roadmap, JIRA epic & backlog, and template for component library-related JIRA tickets. This template helped ensure we were considering accessibility needs, functionality needs, and the flexibility to be compatible with all apps in our platform. We additionally agreed to structure the new component library to align with the Atomic Design methodology.
While making progress on the component library, I also focused on the Codification of our process. On top of the time to discuss components with the design during critique, I established recurring strategy calls with my engineering & product partners and office hours for anyone from the broader teams to attend.
Additionally, the design team required a process for creating new components and updating existing ones, so we established our Design System Governance Process. This process included a list of steps required to make updates to the component library involving competitive analysis, researching best practices, and bringing the updated design to the team to review & agree on next steps. I was pleased to see multiple designers use the new process to make various contributions to our component library based on needs from our customers & team roadmaps.
"The design system has improved my everyday workflows immensely.
I’m able to design things faster because I can simply pull in assets and have confidence that they are being used across the company.
It also helps the team create more scalable solutions - not just at the atomic level but also by unlocking larger solutions across the board."
We successfully created a consolidated component library with improvements to usability & consistency. The extra effort we put into accessibility improvements also helped the company land a significant contract and drive some great conversations with potential customers.
It was also a pleasure to see the design team embrace & utilize the new Design System Governance Process to drive their own component library contributions. Being able to say that I led a measurable culture change on a design team is one of the proudest highlights of my career.
When my time at the company came to an end, there was so much I didn't get to finish.
The UX Director and I were in the process of onboarding a new accessibility tool with more advanced testing capabilities and unfortunately I didn't get a chance to put it to use.
Figma's additional Dev Mode features provided potential for some very valuable enhancements to the UX/Dev handoff step in our process. Regrettably, I was still in the planning stages of using Dev Mode to make our process more efficient.
Iterating on the design system remained on the roadmap as well, including implementing a communication strategy for sharing updates & versions with the broader teams, aligning with a recent branding update released by our Marketing Design team, building in considerations focused on localization, and writing component guidelines. (Dos and don'ts, anatomy, etc.)
This experience taught me so much about myself & the magnitude of effort design system work requires.
As someone who's experience before this role had been solely corporate eCommerce, I had to deprogram myself a bit and learn how to ask for forgiveness instead of permission. I also learned how to create a system meant to set others up for success as opposed to needing to own all the work myself.
Curating a design system requires more collaboration & evangelization than I expected. I spent a lot of time teaching team members how to think and build features with a component library instead of defaulting to a custom solution with little to no reusability. Ensuring progress took consistent conversations focused on what we were currently building, how we want to build in the future, and how to prove the value of what we were doing to our partners & leaders.
I'm proud that I can say I left the design system in a better place than when I arrived.
"Having worked with Jake previously, he was my first call when hiring for a Lead Designer. I was elated when he joined our team, and he absolutely delivered as hoped. With his incredible focus and vision, he leveraged his quiet but powerful leadership style to bring the team and our design system forward. Not only creating beautiful, consistent, accessible components, he also established a governance process to make sure things remained sustainable and scalable. He also built strong relationships with our dev teams to positively connect the UX design system to the dev component library to ensure consistent implementation.
Thanks to Jake’s comprehensive approach, our UX team designs more quickly, our dev teams build with confidence, and our products are more robust and accessible than ever before. I couldn’t be more grateful."
