TL;DR
Increased speed to market by 55% by introducing an unified design system across platform.
Role
By early 2018, the HYP3R platform had expanded to 3 distinct products built and maintained by multiple teams across different time zones:
After 3 years, we’ve identified a considerable slow down in our development cycles and a considerable increase in the amount of regressions introduced and stories not completed each sprint.
I meet with with leads from product, design and engineering to discuss to better understand our current situation:
Most importantly, the above issues resulted in an average of 15 to 20 bugs and regressions per sprint, which we calculated was an average of 20 points of additional work per sprint.
Our design, engineering and QA teams are facing a bottleneck caused by the considerable amount of design and technical debt we’ve accumulated, which results in a decrease of productivity.
If we overlook these pain points, our speed to market will slow to the point of hindering our ability to innovate and compete in the market.
How may we empower designers, engineers and QA specialists to move faster and be more productive, while maintaining the quaility of the user experience?
With an understanding of the problems, I assembled a “tiger team” to drive the initiative, with design, engineering and QA leads from different teams. The first task at hand was to align on a solution. Ultimately, we decided to:
Develop a modular design system that enables teams to use the same design and code assets across products
This method not only consolidates our efforts but also prevents redundant tasks and capitalizes on the collective input of all teams.
To make this happen, we aligned on a “slow boil” implementation strategy where we’ll start in parallel consolidating components and refactoring the codebase while we redesign the look-n-feel.
This approach ensures consistent progress from the outset and allowed us to leverage the initiative to refresh the user experience which was growing stale by that point.
Our initial priority was to gauge the full scope of the design debt. I organized an audit with lead designers and engineers to identify and document the components across products.
This allowed us to analyze their functional needs of each component and identify shared use cases across products. Once completed, I conducted a design sprint where we consolidated similar components and document use cases into a single source-of-truth.
Before we began design work, I conducted the design sprint with the whole design org to establish the groundwork. As a result, we formulated a style guide that outlined our typography, colors, icons, and spacing.
I subsequently divided functional scope among the design team — beginning with foundational elements like buttons, inputs, and drop downs, we then gradually advancing to more complex patterns, including menus, navigations, and marquees.
To optimize efficiency and alignment, we evaluated progress daily making necessary adjustments and sharing insights. Additionally, I orchestrated weekly documentation sessions, enabling designers to meticulously detail specifications as a team.
Aside from direction and management, my main contribution to the project was the redesign of the log in experience and navigation. With the introduction of an unified look-n -feel, we wanted to enable users to log in once to have access to their full suite of products.
In parallel, I collaborated with our brand designer to refresh our product iconography to reflect the new look-n-feel:
As the design team revamped the user experience, the engineering team concentrated on decluttering the codebase. They began by tokenizing the foundational elements of the system, ensuring consistent and efficient modifications.
Subsequently, the team consolidated components into a centralized repository, empowering any engineer to contribute changes or utilize pre-existing components. During this phase, all redundant components with overlapping use cases were eliminated.
After unifying the component codebase and completing the redesign, the team embarked on an refactoring phase to replace each component with its system equivalent across all products.
The design system designed, built and implement across our products in around 9 months. As a result, we:
