Our design team led the creation of a new web design system to ensure consistency and enhance the marketability of the various products Teamworks has acquired in recent years.
The team
VP of Design
4 Product Designers
Timeline
Q2 2023
Problem
Teamworks acquired many products from 2019 - 2024. We had a total of 10 products and were also in the midst of building several more. The products didn't work together or look like they were part of the same universe. This made it difficult for our users to have a consistent experience across the different products and for sales to sell product bundles effectively.
Solution
Our ultimate goal was to ensure that all our products could communicate and work seamlessly together. To achieve this final vision, we needed to make incremental progress, beginning with a unified navigation solution and overall look & feel across all our web products.
Let’s start with the good stuff, what did we accomplish after we created the new web design system?
Using our own ROI calculator, we were able to work out that we are saving at least $240K with the implementation of the design system.
**The calculation takes into account the average cost per designer and the minimum efficiency gains. The savings in reality are thought to be much higher.
Since implementing our design system, we estimate saving about 50% more time on component creation. Designers can now quickly import and repurpose components, reducing the need to build many components from scratch.
All acquired products adopted the new navigation after our team was able to persuade product stakeholders on the value of the unification. The unified navigation was then successfully rolled out to all our customers by end of 2023.
The VP of Design set a vision of a cohesive operating system and in order to achieve this, he tasked our team to create and implement a new design system to unify the look and feel across our products. A designer on our team was working on a product scheduled for a redesign as part of its strategy. The VP of Design tasked this designer to create the foundational base components for the system.
After a foundation system file was created by my colleague, I took the initiative to:
Prioritize accessibility: Audited and updated components to pass accessibility (meeting contrast guidelines and more).
Aid engineering: Created detailed documentation and updated components to account for missing states and interactions. I also created a component tracker in Confluence (now in Notion) for engineering to see design progress.
Boost communication: Carved out time within our weekly design critiques to discuss the design system realtime. Also created a design system Slack channel for async discussions.
Promote collaboration: I set up a Trello board for the team to audit and create component tickets to allow themselves or others to track our work.
There is a lot to unpack with what our process was with the design system. If you'd like to learn more, please set up a chat with me and I'd be happy to tell you more!
As far as implementation, the company's priority was to get a unified navigation in place to market our product suite as a cohesive operating system. Below you can see how our web experiences changed to feel a bit more like they belonged together.
Before
After
Before
After
Before
After
The design system project encountered many challenges but the those challenges ultimately proved to be a necessary step in our growth as a team. A few challenges to note:
Products operate on a variety of tech stacks, making one front end library a difficult goal to meet
While this was not a design problem, there was difficulty getting alignment around approach to our unique issue of multiple products on multiple tech stacks.
Solution: This is an ongoing problem we are trying to solve. For now our team has decided to work with engineering on setting up a few different libraries that look the same but work in Angular, React and Ruby. This is a known tedious approach, but we had to take into account business goals and revenue.
Deciding what components go in the main design system file vs. local product design system files
Our products are vastly different in functionality and complexity. A product might need a complex table that another product doesn't need. A product might need a special select component that would never be used in another product.
Solution: Each designer is responsible for creating special components and communicating with the larger team around whether there is a need for that component to live in the main system file. It isn't a perfect process but it has kept individual product designs moving along.
We're continually refining the web design system, as it's an ongoing project. It was a strong team effort, and my personal goal in this project has been to create dialogue, challenge the current state and drive our team to improve and evolve the system to meet the needs of our products.