top of page
Building a design system
In order to increase efficiency and consistency across all teams at Premier, the current design is being updated to a Vue based component library called Element. I was hired as a general designer for the company and also to assist in building and maintaining a new design system along with the senior designer.
Getting Started
Before I was hired, the senior designer and development team decided on using Element for implementing new designs and updating old ones over time. Once I joined the team, we talked through best practices and what components to include. I then started creating each page, sections, components and updating any examples of usage using Figma. I was inspired to use the page format for the design system from Babylon Health. Their layout seemed the most appropriate for organizing our system as well.
Results
Our design process has been streamlined since implementation. The amount of time to deliver a project has significantly decreased and is more consistent. This has allowed the senior designer and I to focus more on the UX challenges presented vs. spending a significant amount of time on the look and creating components.
Figma Preview
Click the button below to preview a clickable design system in Figma. Some of the links have been removed and only visible for current team members.
Next Steps
This will be a ongoing project that will be updated frequently. There is more documentation of principles, patterns and guidelines still need to be defined.
Figma just released the variant feature, so we will continue to update the design system to make switching between different states of components easier and faster. Below are a few screenshots of implemented variant examples as shown within the purple dashed box.
 Button |  Select |  Radio |
|---|---|---|
 Input |
Education
bottom of page