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
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
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 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.
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!