UCLA Student Health & Wellness Center

Improving the usability and accessibility of information for students.
mockup
Project Overview
This studio project was for a studio class IS 279 UXD during my graduate study in UCLA under instruction of Professor Boyden. It was an opportunity for the class to design an industrial project, and to help UCLA Student Health website serve the community better.
Team Member
Jennie Lee__ Project Manager
Lily Zhuo__ Client Partner
Hajar Azzam__ UI UX Designer
Ada Gu__ UI UX Designer
Edda Chan__ UI UX Designer
Darin Buzon __ UI UX Designer
Stakeholder
Amrit Nagra_ Director of Clinical Operations
Matthew Geddert_ Developer
David Beren_ Executive Director of Student Health
My Role
User Research, Research Deliverables, Wireframes
Project Kickoff
UCLA student Health & Wellness Center is a critical online service for students. It mainly deal with UCship insurance, Vaccine, and clinical appointments.
UCLA Student Healthy website has not been updated over a decade. It is currently facing a lawsuit due to the accessibility issue. As other UCLA websites are evolving into a more modern and consistent branding style, Ashe Center website, as a critical online service, needs to keep up with the bigger picture as well as improve its user experience.
•  Critical online service for students.
•  Website facing lawsuit due to accessibility problem.
•  Did not updated in over a decade.
User ResearcH
Research Plan
A User Research Plan was created right after the meeting to layout the whole research process. 
The team conducted email survey and google analytics research to gather quantitative data for the research. At the same time, email survey helped us to recruit further more for the qualitative research. 
Quantitative ResearcH
Screening Survey
We collaborated with the UCLA Student Affairs IT Team (SAIT) on a user survey. After finalizing the survey design, the survey was released on the UCLA SAIT website. 
We identified 56 people interested in the in-person research methods, and four people were able to participate in our two in person research sessions. 
View full survey result here.
survey paper
Quantitative ResearcH
Google Analytics
From Google Analytics, we were able to gather quantitative data collection regarding the following categories: Traffic, audience demographics, acquisition and behavior flow. 
View the full report here.
ResearcH Synthesis
Quantitative Research Insights
Check out what I found out about the market.
🔍 Insight 01.
Top reasons to visit the website
28% Student who visit UCLA Student Health website for scheduling an appointment. 24.7% of them are trying to check informations about either immunization or vaccine.
🔍 Insight 02.
Information required the most
16% Of the student require to have obvious and direct button to the scheduling the appointment.  16% want to have easy access to the UCSHIP insurance. 
🔍 Insight 03.
Acquisition
79.3% Users use Chrome through organic search to access the page. And most of them are from the mobile device. 
🔍 Insight 04.
Californian & New Yorker
PeakTraffic comes beginning of each quarter. Most users are new users or occasional returning users.
Qualitative ResearcH
Usability Testing
We recruited 4 participants for the qualitative research through the surveys with compensation. In-person quantitative user research including usability test, followed by a in depth user interview.
The interview and usability testing is created base on the data from qualitative research. Most mentioned 6 simple tasks and 2 hypothetical scenarios were presented to participants. 
View the full report here.
Schedule An Appointment 
50% failure rate
Find UC SHIP Coverage 
75% failure rate
Immunization requirements 
50% failure rate
ResearcH synthesis
User Journey Map
Meet our user Amelia!
ResearcH Synthesis
User Pain Points
the team classify and synthesis the research informations together, and came up with three main user paint points.
🔍 Pain Point 02.
Most Needed Info
No student focus content hierarchy to help with usability. The most needed information buried under the pile.
🔍 Pain Point 01.
Accessible Navigation
User experience cognitive overload, too much information simultaneously, resulting in the user not being able to navigate the website.
🔍 Pain Point 03.
Branding
UCLA Health & Wellness Center website has not been updated in over a decade. It is not consistent with current UCLA branding.
Define & Ideation
Problem Statement
Define & Ideation
Brainstomring
How might we help the users to find the information more efficiently?
Define & Ideation
Goal Statement
Design
Information Architecture
The team conducted both open and close card sorting in order to understand what users’ point of view for the layout of the website. 
🔓 Open Card Sorting
For the open carding sorting, we provided a stack of cards of current tab on the home page for user to classify, along with sticky notes to write the titles of different groups they sorted the cards under. 
🔒 Close Card Sorting
After that, close card sorting session were conducted with another group of user with same stack of card and group titled with combination of current website main page name and the result of the open card sorting. 
Design
Site Map
The existing site map has no structure. All the information are just cluttered on the homepage. After the result of card sorting activity came out, the team organized them in a proposed site map.
The proposed site map focusing on the hierarchy of the information architecture. It also involves some visual design decision making, for example, differentiating patient portal as a CTA from service and insurance as a sub page. 
BEFORE
AFTER
Design
Wireframe
Design
Responsive Web Design
Design
Style Guild
The design follows the UCLA brand guidelines to keep the consistent look and feel for UCLA brand. On top of that, the team developed components using the fundamentals elements to differentiate the portal from other UCLA website. 
Checkout the full guideline here.
design
Hi-Fi Prototype
💻 Desktop

Homepage Re-design

User will be able to access the needed info through the organized information architecture and web page layout.
usability testing
Impact
The last round of usability testing on the prototype, since we did not have the whole flow redesigned, we compare the time user spend to find the information to measure the effectiveness. 
84 sec ↑
Schedule An Appointment 
72 sec ↑
Find UCSHIP Coverage
116 sec ↑
Immunization requirements 
Retrospective
Takeways
🤝 Teamwork
Different design roles in the same team has different emphasize.
It was an interesting experience, instead of each team member trying to toggle with different design tasks, we developed coordinate roles like, client partners who mainly taking care of communication with the stakeholders, and project manager who keep track of the timeline. 
💻 Design Testing
Usability testing Key performance indicator needs to be consistent.  
Instead of using failure rate to measure how hard it is for user to complete the task in the beginning, later we realized due to the constraints of time and scope, we can only redesign the homepage, which made us change the KPI to time on completing the task. 
Process Deck
More Projects:
Wayhome
Internship
Responsive Design
Web Portal
Agile UX
Bento's Kitchen
Freelance
Mobile App
Design Thinking
MVP
scroll to the top
Copyright © 2020 wanying gu. All rights reserved.
emaillinkedinInstagram