Website Redesign
UC Davis Health
To establish UC Davis Health as an expert within the online healthcare community, my team redesigned our website to represent the kind of quality, individualized care we provide across Northern California.
My role: UI/UX Designer
Why redesign?
Our sites had been leveraging a design system that had been established incrementally over many years. Not only was the system showing it's age, it also had many inconsistencies; resulting in a web presence that didn't do our brand's mission and values justice.
Looking at our home page, you can see inconsistencies within our system ranging from typography to color palette. When typography and color palette lack cohesion and coherence, users have difficulty understanding what actions they need to take to complete their tasks.
User research
Utilizing site satisfaction surveys and user testing, we identified the core groups within our user base. We found that the majority of our audience are general health seekers, followed by prospective and current patients. After identifying our user base, we gathered their feedback regarding our current sites and the pain points they faced when interacting with them.
Feedback from users
Getting feedback from our users further illuminated the weaknesses within our digital presence. Across our various audiences, there seemed to be a consensus that the amount of information on our sites was overwhelming. Not only was information overwhelming, users also pointed out that confusing navigation made it hard to filter through. These pain points would drive our decision making as we transitioned to creating a new design system.
General health seekers
“It’s difficult to find information and when I do find it it’s often written in a way I can’t easily understand.”
Prospective patients
“Confusing navigation and limited search results don’t allow me to quickly and easily find information.”
Current patients
“I’m overwhelmed by information and can’t figure out who to contact about specific issues. There aren’t clear links to the services I need.”
Health care workers
“I’m less inclined to make referrals if I can’t easily find physicians by specialty or other qualifying criteria.”
Design system
Creating a new design system necessitated breaking apart and evaluating our old one. Taking an inventory of our old design system really put into perspective just how much inconsistency existed within our web presence. We used to leverage many different kinds of cards; between the different background colors, type treatments, and layouts you can get a taste for the visual dissonance that inconsistency caused on our old site design.
Goals for our new system
Consistency
Ensure consistency across all our components, from typography to color treatment etc.
Noise reduction
Reduce unnecessary information, and ensure legibility of necessary information.
Intuitiveness
Make navigation intuitive and simple so that users spend less time looking for specific information.
Modularity
Create modular components that can be used on any page in any order.
Defining design tokens
Leveraging design tokens helped us organize our brand guidelines into variables that became the building blocks for our future component system. Design tokens are vital to both our Figma prototypes and GitLab environment as they ensure homogeny across our website's entire digital footprint, and promote UC Davis Health as a professional brand that values quality and accessibility.
Developing components in Figma
In the next phase of creating our design system, we identified building blocks that would address our users' needs. The majority of our web content deals with health and contact information. As such, we focused on building cards, promos, and CTAs that became the bones of our modular components.
My contributions
Set up our design token structure in both Figma and our GitLab dev environment
Contributed to the design of various components, from wireframe to final prototype
Led the front-end development of all components and templates, collaborating with a cross functional team of engineers and product managers
Owned the accessibility of our templates, making sure all components pass WCAG standards
Showcasing our expertise
A big part of UC Davis Health’s mission involves conducting ground breaking research and fostering innovation. To highlight these aspects of UC Davis Health, we built a comprehensive news hub. Users can now browse any topic or condition depending on their personal interests. We also built a platform to highlight patient stories, so prospective patients can hear first-hand from current patients about the care they received from UC Davis Health.
Promoting our services
One of the most direct ways UC Davis Health’s site aids in patient acquisition is by promoting our excellent services to prospective patients. I integrated the Google Maps API with our own data to develop a filterable map that provides users with detailed information about every single one of our locations. With this interactive map information such as services, specialties, and parking are now accessible with a few clicks.
Showcasing our interactive locations map and how it can be used to find specialty clinics across California.
My contributions
Utilized the Google Maps API to create a filterable locations map for current and prospective patients
Measuring our impact
Post-launch, we were able to gather metrics to analyze the impact of our work on UC Davis Health's digital footprint. Most notably, we saw a 47% increase in Google clicks and a 63% increase in impressions YoY across our entire website. We also saw a marked increase in page visits to our new and improved newsroom.