Design Systems &
Component Libraries
ROLE | UX Designer
TOOLS | Figma, Adobe CC
The PROBLEM
The internal app is proprietary software developed in house over the last 17 years. It is shrouded in legacy code. Due to ever evolving technology, time and resource constraints, and complexity of the app, there were inconsistencies in function, appearance, and naming conventions amongst other things. The inconsistencies slowed down adoption time in new feature adoption and the time users needed to complete the various workflows required of their positions. As well as the time the developers and product teams needed to understand the user’s requests.
Getting to know
The Product
The app is an intranet used exclusively by employees of the company. Each department and role has a series of pages and workflows that are specific to them.
Across the departments, there are nuances that must be honored to account for the complex, specialized roles the users hold.
INtegration
& Adoption
After a number of iterations, the prototype testing and interview sessions revealed a clear direction. The site architecture was revamped around the user, not the content. Each user group had a single all encompassing page with everything relevant filed neatly within reach.
The design system and component library is only as valuable as it is accessible. In order to optimize adoption, I created the working document in Figma and encouraged the developers, product owners, analysts, and data architects to weigh in.
Everything from color palette and behaviors of forms and modals to the process of order handoff from one department to the next. This process allowed the design system to be commonly owned and revered. Each party held ownership and each agreed on its validity.
Once agreed, I expanded the component library to include all variances of the app’s headers, icons, fields, etc. This allows me to quickly put together high and lo-fi mockups and prototypes that are as close to the real experience as Figma allows.
