After several products across the organization were found to have been using different styles and UI components, a need was identified to create a design system and a UI Component library so that developers could utilize standard CSS.

 My role: UX Research + Design, Co-Product Strategy/Management

Research

Baseline research was conducted to understand developer needs. I accomplished this by creating a survey and sharing it with devs across product teams. We learned that:

  1. 100% of devs were creating complex components (i.e calendars) from scratch each time they were assigned a project 

  2. It takes  70% of developers  more than one work day to complete the building of a complex component

What this tells me

Devs are developing the same component differently each time the component is needed. Along with that, the amount of time it takes to build from scratch is taking up valuable time and leads to sprint goals not being met, thus product timelines constantly being behind schedule. 

We also found:

About half of developers work on 3 to 4 applications with UI screens. Of those, 60% of developers usually need to edit their code after QA due to visual defects.

What this tells me

Visual defects would not be occurring if there was a standard component to use. In addition, if most devs are assigned to about four products and they are recreating the same components over and over for all of their projects, that is a lot of time wasted doing the same thing. This doesn’t seem like the best use of time. 

When we asked developers about their needs as a developer, every single one stated that a UI component library would be extremely helpful to utilize their time efficiently. 

Team creation + product vision

  1. In order to make sure we build a product that is compatible with all of the varying technologies used across the family of companies, we built a team full of UI developers from each business area, data architects, a tech lead and two UX designers (myself included) who are also acting as product managers.

  2. My UX counterpart and I decided to put together a high level product roadmap to visualize, goals, milestones and KPIs. We shared this with upper management in order to get the green-light to make this an allocated project 

review + next steps

We have been working on this as a side project as developers can not be allocated at this time, but have gotten so much ground work done.

  1. We’ve established a design inspired by Atlassian and Bootstrap and have started writing content.

  2. We have created standards for icons, typography, and colors.

  3. Most importantly we have conducted component inventory across products and have made recommendations on which to use and are working on redesigning others.

A proof of concept is set to be delivered by end of 2021 in order to pilot the tool with a new internal product during Q2 2022. Once we conduct usability testing we want to test the tool on an existing application to ensure it integrates well with older technologies.

The hope is that developers will be fully allocated by Q1 2022.