Conducting an interface inventory and establishing a core component library for Point Health's Design System
When I joined Point Health, one of the first projects I was assigned was to pick up where the previous designer had left off updating a design library. Before I started, I wanted to understand what had already been designed, what had been built, and where the potential gaps were between Figma and the app. I started by taking screenshots of each screen on the app and mapping out all the existing flows in Figma. Since I was still new to the product, it was an excellent opportunity to learn about the product while gaining a fuller understanding of where conflicts might lie.
Taking inventory of common components
Once I captured all of the screens in the core flows, I started to figure out the standard components and patterns. I grouped screens and collected the common patterns that needed a single design throughout each flow. At first, this seemed like it would be an easier task, but as I dug into each design, I started noticing minor inconsistencies throughout each component.
- A 4px border when it should have been 1px.
- One heading that was title case and another that was all caps and another that was sentence case
- Small inconsistencies in spacing. Incrementing incoherently from 4px, 5px, 6px, 8px, 21px, 22px, to 24px
- Inconsistent ordering of information for similar pieces of content in the interface