Background
UCLA Health is a health care system comprised of 4 hospitals, 200+ clinics, and the School of Medicine at UCLA. UCLA Health is ranked #1 for best hospitals in California, and #6 in the nation, but their customer-facing website (uclahealth.org) was far from reflecting this top quality of care. Slalom was brought in to design and re-build the uclahealth.org website using Drupal CMS.
Problem
UCLA Health’s customer-facing website had accumulated tech and design debt over years of prioritizing business-first decisions, resulting in a disjointed experience that made it difficult for patients to find care through the UCLA Health website.
Role
As the Design Lead on this project, I am responsible for scoping the direction of the new uclahealth.org website, as well as the creation of designs for development.
My responsibilities include:
- User and stakeholder interviews
- Site metrics analysis
- Facilitating vision and ideation workshops
- Journey mapping
- Information architecture
- Site map
- Roadmap definition
- Wireframing
- High-fidelity mockups
- Visual design direction
- User testing
- Documentation for development
Team
For the 9-week Discovery phase, I worked with a small Slalom agile team consisting of a Product Manager and a Development Lead to explore user needs, define business and technical requirements, and scope the MVP release.
Moving into the development phase, we brought on an additional Visual Designer, and two Full-stack Developers.
Discovering the patient perspective
I conducted 12 stakeholder interviews with members of the UCLA Health marketing department, as well as 9 user interviews, and a survey of 55 LA residents to learn about current and prospective UCLA Health patient pain points of the current website:
“I feel frustrated since I used the website to do my due diligence so I don’t have to call the number, but I end up having to call on the phone anyway [because I can’t find what I’m looking for].”
“Patients need to not just feel like they’re going to be taken care of, but know for sure that UCLA is taking the steps needed to take care of them during these times”
“There are too many dropdown options that it made it hard to scan through all of the options in each nav option (e.g. For Patients and Visitors has 28 options to look through)”
Many of the pain points stated in stakeholder interviews were also reflected in the user interview and survey results – this was a good sign that the business was relatively aligned and receptive to user needs.
We also were able to define user mental models for the current UCLA Health website:
Prospective patients are intent-driven toward finding a doctor for their condition, with a particular focus on location and distance to avoid infamous LA traffic.
Existing patients visit uclahealth.org for information, not to make appointments. They use myUCLAHealth or myChart for appointments.
Patients seek step-by-step visit information on what to expect when they enter the hospital or clinic, especially in COVID times.
The website lacked “humanity.” It felt unrelatable to many users, rife with large paragraphs of marketing-lingo, accessibility issues, and sterile imagery lacking diversity and the human side of healthcare.
Aligning on goals and vision
I facilitated a series of 5 remote workshops (Miro to the rescue!) to align the business on product personas, vision, business and product goals, metrics, current state journey, and future state opportunities, to finally arrive at a list of features prioritized by impact vs. effort.
Vision Statement
Create an intuitive web experience for prospective patients to find the best care and resume normal life, so that UCLA Health can offer best-in-class lifelong health care.
Sitemap, wireframing, prototyping, testing
After understanding user pain points and business objectives, I created a new sitemap and outlined key features. A visual designer now joined the team, who helped to wireframe and prototype an initial round of designs which we used to test flow, layout, look & feel, and functionality with 8 users.
As we tested with users, we adjusted content on each page and interactions according to feedback. Generally, layout and functionality were working, and we got feedback that the new design was markedly improved from the current website.
As we continued to refine existing pages based on user feedback and design additional pages, I created wireframes to finalize layout and functionality.
Rebranding UCLA Health for the new website
UCLA Health’s existing web brand guidelines were very open-ended, so we ran a UI Look & Feel workshop with the clients to define the visual direction for the website. Our clients saw opportunity to have an updated brand look and feel for the launch of the new UCLA Health website.
We aligned on three words that reflected the look and feel of the website, along with chosen image references, to start defining the visual design:
Approachable
Contemporary
Realistic
I am working with the visual designer to create and align with the clients on a new visual web brand for UCLA Health.
Developing a Design System for UCLA Health
As UCLA Health tackles their overall rebrand, we are the first property to start defining and applying their new look and feel. The design system that we are creating for the website will not only make the web experience more consistent for end users and speed up design and development; it will also inform other UCLA Health teams (such as Content and Patient Experience) on brand guidelines to follow.
I am actively working with our visual designer to develop this design system in Abstract as we continue creating pages for uclahealth.org.
What’s next?
I am continuing to work with UCLA Health to align their content strategy across the website as well as wireframe, user test, oversee final UI for new pages, add to the design system, and communicate with development as they build the pages we’ve designed.
Feel free to contact me at pan.stephanie@gmail.com for more details on this project!
STEPHANIE PAN 