Wellstar Health System DLS
Overview
Since 2020, Wellstar Health Systems has seen tremendous growth in size and tech stack. The healthcare non-profit’s competitive track record of success in the Atlanta area has led to the addition of top-tier facilities and the acquisition of other hospitals year after year.
With such a rapid rate of expansion and such a high influx of digital assets, Wellstar’s digital product team saw an opportunity to build a design system with scalability to match.
Role & Responsibilities
As a UX/UI Design Intern, my primary responsibility was to develop a fresh Design Library System (DLS) that emphasizes organization, visual consistency, clear documentation, and conformance to WCAG 2.1 standards.
The Challenge
The digital product team inherited a DLS from a former member of the team. While this DLS had great aesthetic appeal, it lacked a level of approachability for the current design team. Many artifacts lacked documentation for contextual usage, and the UI decisions presented risks for inappropriate application that could break WCAG 2.1 standards of accessibility at a fundamental level.
The existing DLS needed to be reimagined entirely. I accomplished this goal by custom building a new, intuitive system of design resources for Wellstar’s designers, product owners, developers, QA analysts, other organization team members, and third party vendors.
The Process
To structure my workflow for this project, I followed the classic double-diamond process. The idea behind this method is to break your work into two major phases.
In the first phase, you seek to ensure you are designing the right solution that fits the user's needs. In this case, the users would be designers using this design system. In the second phase, you work to make sure you are delivering the resulting product most effectively.
Phase One: Discover & Define
Foundational research
To build a strong foundation for effective design systems, I performed a competitive analysis of widely applauded design systems made available to the public, including Google Material, Atlassian Design System, Uber Base, and Salesforce Lightning, among many others. This ensured I had a proper understanding of what it would take to create Wellstar a top-tier system.
Synthesizing results
Auditing these various design systems gave me key aspects of an effective structure for Wellstar's DLS. The team needed an extensive layout of resources quickly accessible by a small team of designers including:
Grid System
Layout System
Spacing guidelines
Type Scale & System
Color System
Effects System
Icon library
Accessibility guidelines
Graphics & illustrations
Component Library
Archives
Sandbox spaces
Prioritization & Alignment
To foster collaboration and consistently reach tailored solutions, I prepared and lead bimonthly sync meetings with designers, developers, product managers, and QA to ensure the design system would be easy to use by all team members. Some challenges we overcame in these meetings included solving how to:
Consistently represent hover states
Display multiple calendar UI with separate code bases
Reach consensus on hex values and removing opacities
Test for component implementation changes
Phase Two: Develop & Deliver
Foundational research
Artifacts from the original design system were difficult for everyone to work with, so I was encouraged to start from scratch. I reworked the design system structure using atomic design principles. I built the "atoms" of the design system to serve as the foundation for all other design decisions. Atom examples include:
Type scale: made for continuity between various devices and friendly for responsive design
Type system: outlines proper usage of type, hierarchy, and typesetting across all Wellstar designs
Color system: provides guidelines for appropriate uses of brand and UI colors to satisfy WCAG standards and maintain visual consistency
Effects system: details approved uses of visual effects, such as gradients and shadows, to deliver a consistent experience for users and easier handoff for QA and development
Molecules
Next, I built a component library to create distinctions for common molecules used regularly in our design work for the Wellstar website and mobile app. All completed components would be cross-checked for accessibility and feasibility for development and QA. Below are some key ways in which these new components are superior to their predecessors:
Increased consistency in visual emphasis decisions for buttons and similar elements
Enhanced clarity and consistency for disabled and focus states
Simplicity and clarity for usage and implementation by design and dev through component descriptions and documentation
Organisims
Finally, after composing all the necessary molecules from the newly-created DLS atoms, it was time to systematically formulate complex organisms. Presets like button components, background colors, spacing variable units, among many more, were combined intuitively and rapidly to form a vast array of desperately needed section and page templates, including:
Scheduling modals
404 pages
Form field layouts
Search landing pages
Section headlines
"Blank canvas" page templates
CTA’s & Hero banners
Personal Challenge: Quick Start Guide
A value I seek to maintain in every project I undertake is finding at least one opportunity to go "the extra mile." This increases my personal investment in the project and gives the resulting product a unique edge that other designers may not think to explore when given the same project.
I created an extra file with a step-by-step guide of links, resources, and templates for designers to get started adopting the DLS and increase communication on how their design work is meant to be understood from start to finish.
Walkthrough Tutorial Presentations
In addition to the extensive documentation made for the DLS, I created supplementary tutorial training videos in which I presented walkthroughs of the uses and benefits of the various files found in the library. Not only did this provide an additional way to learn how to use the DLS, my presentation skills upsold the value of the DLS to the team.
“Everything is easily searchable with different terms. I am starting to appreciate the documentation components a lot.”
“UX improvement gets a thumbs up from me. We are tackling items that needed to be addressed and will make the Wellstar web experience better.”
“The new design system has significantly reduced my “busy work” time. A project that would usually take me 1 day can now be completed in a couple hours. It is a life/time saver. ”
Outcomes
A working, viable system of designs for how Wellstars website and mobile app should work and feel
A set of guidelines to ensure that the designs are consistently, appropriately, and accessibly implemented across all digital platforms
A quick start library of resources providing any figma user with a way to dive straight into designing with our system