Design Systems

01. Overview

With more and more projects being requested of our team, we realized that the best way to manage our time, the consistency of our output, and the consistency between brands would be to create a brand new design system. It would be the best decision we would ever make for Point32Health. If you want to hear the worst, just ask.

It went on to become the driving force behind all three public websites as well, as the member portals, and eventually other user portals as well, such as broker, provider, and special products.

Team/Roles: Daniel Dodman (contributor), Casey Addy (contributor), Alex Escobedo (contributor), David Burnett (contributor), Matthew Pugsley (researcher)

Timeframe: 2022-2024 (roughly 2 years)

02. Ideation

We tried different design system setups that could be used by designers, developers, QA testers, product owners, and others. Our goal was to create a design system that could be applied to various brands with little customization.

Early research, conducted through extensive online browsing, as well as deep design conversations amongst the team showed us that we would need a number of things from these components:

  • they would be centralized and easy to access for anybody on the product teams

  • they would need to encompass a common look, such as typography, sizing, spacing, layout, etc., that would work across all current and future company segments

  • components would need to be carefully researched, built, and then socialized with the larger group

  • Each component would come with a “philosophy card” to explain how we arrived at that particular solution, and how it should be used across the enterprise

03. Design

The validation of components was done through several stages:

  • personal validation: we would test the component ourselves to look for areas of improvement

  • team validation: the component was then released to the larger UX team to play around with and look for errors, inconsistencies, inconvenient builds, and so on

  • usability testing: how did our new components stack up and how were they perceived

  • Dev/QA: we would release these components to our technical team to build as well as look for points of weakness

  • Rinse and repeat: you can never have to many iterations, your work will almost inevitably improve each time, but keeping to schedules and release dates dictated how many iterations we build

04. Validation

By starting with basic components (grid layouts, typography, colors, etc.) we would have the most impact for our perspective users, including ourselves. These would be required for any and all projects.

We rapidly followed this up by creating a list of needed components (both existing and desired) and ranking them based on how often they would be used.

Each component would need the following:

  • A process of research, explore, build, test, refine, and repeat

  • variations for all brands and interactive states

  • philosophy pages to guide designers and others (when to use, how to use, positioning, etc.)

During my time at Point32Health, over 40 categories of ready-to-use components were launched. Each category has multiple sub-components, ranging from simple to very intricate.

05. Results

Over the years, we created a great collection of parts that met everyone's needs and made designing web pages easy for planning, creating, building, and testing.

  • Streamelined results: pages that would have taken days or even weeks, were able to be completed in a mere number of hours

    • examples: Terms of Use added to portal (1 day turnaround including specs), password reset (1/2 day), reimbursements (2 weeks), registration & onboarding (2 weeks), REL/SOGI (2 days), public nav and footer (1/2 day)

  • Improved communication: the design team, development, and stakeholders had a common understanding of what builds would look like

  • Improved collaboration: It enhances communication between design, product, and development teams by creating a common language. Everyone works with the same tools and standards, fostering better alignment across the board.

  • Cost efficiency: By reducing the amount of custom work needed for each project, a design system can cut down on costs associated with design and development. Teams can focus on solving user problems rather than reinventing the wheel

Previous
Previous

Registration & Onboarding

Next
Next

Navigation & Findability