Problem
Design guidelines were limited for University Hospitals UI components leading to many inconsistencies throughout the website and beyond. There was also the need to migrate from using Adobe XD to Figma due to Adobe halting support for XD.
Solution
A comprehensive, ever-growing design system was needed to provide consistency and optimization for University Hospitals user interfaces. This project initiated a smooth transition from XD to Figma, with an easy to navigate asset library streamlining efforts for future wireframes and prototypes.
Role
- Senior UI/UX Designer (Solo)
Tools
- Adobe XD & Figma
Ideation & Discovery
- Ideation & Discovery
- Design & Development
- Results
Ideation & Discovery
The first step was to gather knowledge of brand requirements by working closely with the graphic design team, reviewing the brand style guide, utilizing the existing style guide in XD, analyzing the html structure and CSS styles of UHHospitals.org, and referring to older prototypes in XD.
There was also a review of design systems found online from other health care systems like Kaiser Permanente and Cleveland Clinic to inspire an ideal structure for this new design system. External examples of design systems within Figma were also studied for strategizing how this new implementation will help streamline future prototyping and wireframe design work.
Design & Development
It was exciting to begin introducing Figma to the team and begin building out the UH style guide. An atomic design methodology was used where the most basic elements were created first. This included font styles and colors converted into a style library to be utilized in the Figma properties panel. These styles were listed in the design system with guidelines of appropriate use along with examples of content blocks, and spacing requirements. Following this convention, milti-state components were created like buttons, form elements, cards, tabs, etc. Responsive, interactive page components like global navigation, footers and a hero section were developed to easily drag and drop from the Figma asset library for quickly building webpage prototypes.
Dev Handoff & Monitoring
Web developers appreciated Figma’s developer mode and how easy it is to navigate the design system and follow it’s guidelines.
Product managers and other stakeholders enjoy the prototype views and the collaboration tools available in Figma. They also enjoy the quick turnaround on projects due to the increased productivity the design system provides for prototyping.
Results & Reflections
The UH Design System continues to grow as new branding challenges occur and new components are needed. We are looking forward to utilizing variables within Figma to build out a dark mode.
The design system components will also be linked to their counterparts from a newly developed asset library within the website’s content management system.
