HYP3R

Valhalla Design System

A modern user interface update

TL;DR

Increased speed to market by 55% by introducing an unified design system across platform.

Status

Shipped

Role

  • Product design
  • Design management

Background

By early 2018, the HYP3R platform had expanded to 3 distinct products built and maintained by multiple teams across different time zones:

  • Engage enables businesses to monitor social posts shared from their physical locations and engage their visitors through social interactions.
  • Visualize enables businesses to create social walls to display social content in their physical locations.
  • Acquire enables businesses to create audiences to retarget their visitors on ad platforms.
Engage
Visualize
Acquire
Log in

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.

Research

I meet with with leads from product, design and engineering to discuss to better understand our current situation:

Key findings

  • We maintained different front-end codebases between products to allow EPD teams to move faster, but this resulted in an accumulation of design inconsistencies.
  • The design team met regularly to align on design approaches, but we lacked documentation and shared assets that help us keep the work consistent and avoid repeated work.
  • We lacked processes to coordinate efforts between teams managing different products.

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.

Problem

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?

Solution

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.

Redesign track

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:

Implementation track

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.

Outcomes

The design system designed, built and implement across our products in around 9 months. As a result, we:

  • Increased speed to market by 55% across design and development cycles
  • Cut front-end bugs by 75% on sprint-to-sprint basis

More projects

This is my work  ↓