Design Systems

We collaborated with various heads of department (engineering, marketing, product, growth) to determine the aspects of the platform we should prioritize for the design system. We wanted to consider business goals, team objectives and user needs when deciding where to spend our design and development resources.

We learned that with Hello Alpha's transition to B2B/enterprise software, our focus should be on product updates that will help onboarding and retention of new patients. From that we determined a prioritized list of components to add to the library for the patient platform (PDB). Please see Base Design System if you'd like to see the full list of components in Figma. Here are a few samples.

Based on reports from the software engineers, the level of detail we added to the specifications made a significant improvement to the quality of components they produced and the time required - given that we removed a lot of guesswork in spec expectations.

This proved particularly useful when developing unique behavior of components.

Significant care was taken in outlining the reasoning for design decisions. This helped with onboarding new designers to the team and as reference when employing a component in a mockup. It also helped earn product buy-in when the UX behavior requires significant developer resources.

We invested a lot of time researching the latest accessibility and usability guidelines before we added each component - creating an initial baseline level for a wide range of user scenarios and abilities. For example, significant consideration went into typography, colors and states.

We also aimed to be meticulous in adding components to Figma - making full use of its design system and component library features. This led to significant improvements in our efficiency when creating mockups for new ideas.