Pipeline Design System

PipelineDeals has been around for 16 years and has had many designers who all made their own ideas of what the application should look and feel like. With so many ideas throughout the app there becomes the issue of different user flows, inconsistencies in the user interface, and other design and tech debt.

As the business has wanted to modernize the application and remove the debt that has accumulated.

Date: Early 2020 - Ongoing

My Role: Lead Product Design

Design: Requirement Building, Interaction Design, Information Architecture, Product Design, Design System, Visual Inventory

Stakeholder Objectives

Business Objective

Make the application look more modern and easier to navigate for users.

My Objective

Create and ship a design system that contains components to be introduced throughout the entire application.

Challenges

---

The three large challenges that we came across are:

1. Legacy Code

2. Remote Collaboration

3. Shipping

Challenge #1

Legacy Code

A front-end code base that spans over 15 years leads a great deal of difficulty when it comes to creating a system that has is consistent components. The newer pages throughout the app were created with React while older pages are on Backbone.

The challenge was solved by working with engineers to upgrade all of the pages to react. However instead of having the engineering team create the updated pages to look exactly the same as before the design team mapped out which components should map to the same location on the application.

Challenge #2

Remote Collaboration

After COVID-19 hit the product team went from a in-person team that would be able to easily collaborate. Starting in March 2020 the team was feeling the pressure of figuring out a good way to collaborate that was more than just Zoom meetings.

In order to help with collaboration the design team decided to move from Sketch to Figma to allow for real-time communication. This made a large difference for the both the product team as well as the engineering team. Not only did it streamline meetings when everyone was able to be in the same document at the same time, but helped the engineering team get more details from the design team.

Challenge #3

Shipping

A design system is only as good as it being in the product itself. WIth a collaboration between the design and engineering team the team decided to use Storybook as the design system source of truth.

This allowed the engineers to have an easy way to know what the By being able to integrate the design components into the live code.

Design Process

Visual Inventory

Site Map

Style Guide - V1

Moving to Figma

Storybook

Retrospective

While this project is still ongoing the large items in a retrospective that could be improved would be more than a month to create a design system.