Elevate Design System

image

image

The product

Welltok's B2B & B2C products, including Welltok Central, CaféWell Itinerary & Reawrds, Patientology and more.

My role

Product Designer September 2019 - March 2020

Lead Product Designer from March 2020 - present

The challenge

😔
With 7 acquisitions by Welltok between 2010 and 2018 clients using Welltok's products don't have a cohesive design experience. Additionally, there were few core components built for reuse for either designers or developers to rely on as a source of truth, losing both time and consistency.

As the lead designer on Welltok's consumer-facing product CaféWell, the product and I pioneered all-new styles, components, and patterns for a new user experience using Elevate. At the beginning of the new CaféWell project, our definition and documentation of the design system were still relatively exploratory. The challenge throughout the early stages of the project and design system was to ramp up quickly to define & standardize a working design system for both designers and developers to refer to maintain consistency and increase efficiency.

The goal

Create a scalable design system of components with documentation that can create a cohesive design experience for internal and external users as well as streamline development work.

As both projects evolved, I was able to expand on components beyond immediate use and relied heavily on our design system documentation for communication with developers so I could streamline both time and Figma design files.

The few core components of CaféWell built out as instances in Figma in September 2019.
The few core components of CaféWell built out as instances in Figma in September 2019.

The approach

Audit and prioritize

Core components across Welltok's products were audited and prioritized to begin defining styles & building atomic components that would be most often reused.

image

In addition to styles & core components that would be used repeatedly throughout a product, I also considered patterns which would be recurring elements made up of multiple components or behaviors that core components would have across products.

Explore & build UI components

When building out new components & patterns there were several things that were considered for each new addition to the library:

  • Accessibility
  • Scalability & flexibility
  • Functional
  • High visual quality
  • Mobile responsive (to both web & native iOS & Android)

As the component library on Figma grew, design efficiency increased. I was able to focus on higher level UX design flows instead of recreating components across pages or responsive sizes.

Documentation

After building out many of the core components & patterns in Figma I began to document the guidelines and uses of the elements in Zeroheight, a document accessible by anyone in the company.

This document served as an invaluable resource for myself and the developers as we collaborated to build these components out on CaféWell as they were able to inspect spacing, size, color, accessibility considerations as well as expected behavior.

Next steps

After designing, documenting, and collaborating with the developers to build out many functional components live on CaféWell, I envision the next steps to be integrating all HTML/CSS/JS components for all variations on Zeroheight to ensure continued proper adoption beyond the Product Team.

I have also begun to generate a backlog of prioritized components and patterns to build in Figma and document on Zeroheight. I will continue to iterate, update and collaborate both with developers and other designers on our finished library as we continue to evolve Elevate with new products.

This design system is a continued & ongoing project and many of the components are now being used by other designers on the team in other Welltok products.

Say hello!

Have questions or want to talk UX? Feel free to connect with me!

View my resume1202.1KB