CSUF Health Services
Redesigning to be responsive
Role: Researcher, Designer
Duration: 6 weeks
What is the Problem?
CSUF Health Services website is outdated, and information is scattered, making it difficult to find information and resources.
The current Health Services website is too cluttered with excess information that makes it hard for the main users, CSUF students, to navigate the website for health-related resources.
My Solution
Revamp the CSUF Health Services website, prioritizing improved responsiveness across diverse screens, modernizing the user interface, and optimizing the information architecture for an enhanced user experience. The updated website has been redesigned to ensure seamless responsiveness on both tablet and phone screens, aligning with contemporary design standards.
Goals for design
research thru Competitor Research
Hoag
Clean, neat UI
Tiles make it easy to read services and appointment-making options
Interesting option at the top that allows you to “Pause Animations”
Emphasis on scheduling through MyChart
UCSD Student Health Services
Organized landing page but just needs the images to be either static or take up less space
A static CTA could be better on the homepage
MyStudentChart login at top bar needs more emphasis
research thru Surveys
I asked questions like…
Based on the image provided, what is your initial impression of this website's purpose?
What would make the process of scheduling an appointment easier?
On the website, is it easy for you to find information about the available services offered? Please expand on why it is or is not.
How would you describe the overall usability of this website?
I received replies like…
“It's too clustered imo. I don't like the two line navigation up top, I feel like I don't know where to look”
“…the design looks a bit old fashioned.”
“interactive UI card and make "an appointment text" CTA option would make the appointment process easier”
Key Takeaways
Users encountered difficulties in navigating the Health Services website due to the presence of disorganized links and information.
The existing UI displays signs of aging and necessitates a modernization effort to meet contemporary design standards.
Mapping out survey findings
Pain Points
It's easy to see but feels cluttered
It's too clustered imo. I don't like the two line navigation up top, I feel like I don't know where to look
I think the usability is there but the design looks a bit old fashioned.
Needs
A direct, on-line scheduling tool.
If I don't have to login every time or at least not to remember my password (aka OTP login)
select the UI card "make an appointment"
Motivations
For students to be able to seek medical services.
The description of the service, and the images
A health website to get info and make appointments
Organizing information with sitemaps
While the Health Services website offers a plethora of valuable information tailored to CSUF students, they encounter challenges when attempting to schedule health appointments or locate the necessary information.
By employing sitemaps, I meticulously structured the website's departments, resources, services, and information for optimal user accessibility.
Low Fidelity Designs
With the aim to create a modernized and responsive experience, I broke down my wireframes based on the current desktop information architecture of the active CSUF Health Services website.
High Fidelity Designs
I narrowed the scope of my high fidelity designs on the most essential pages: the homepage, services, and eligibility & fees. These essential pages were designed with the following in mind:
Enhanced copy for conciseness
Revamped for a vibrant and inviting look
Streamlined navigation tabs
Transformation of the "Schedule Appointment" into a more prominent call-to-action (CTA)
Considering the prevalent use of mobile devices among the student demographic accessing the CSUF Health Services website, I tailored the homepage to provide an optimized view specifically for iPad users. This intentional adjustment not only acknowledges the predominant device preferences but also aims to deliver a user-centric experience that aligns with the habits and expectations of the target audience.
Testing the Usability & Design
The objective of the usability test was to identify any major issues, gather information from the user experience, and identify areas for improvement in the overall UI of the website. The main success metrics included:
UI and information are easily digestible by users
The intended audience can identify the purpose of the website
The results revealed:
All participants preferred the new UI
Navigation was more streamlined and obvious for users
The updated palette and overall design provide a more inviting website
Overall takeaways…
The redesign of the CSUF Health Services website was generally successful. Given additional time, I would have proactively sought more feedback from stakeholders to identify potential areas for improvement that might have been overlooked during the redesign process.
While my designs bring a refreshing perspective to the CSUF Health Services website, I believe there is room for further exploration of the color palette and placement. Although I appreciate the brightness and vibrant colors, I aim to fine-tune and refine these aspects to achieve an even more polished result.
In general, I believe there is an opportunity to create a cleaner and more streamlined design, aiming for a modern and current experience that resonates better with the target audience.
What worked
bright colors = more inviting experience
cleaner UI means easier access
new designs that match
4 times out of 5, less is more
What didn’t work
using illustrations for all imagery (sometimes real people are nice too)
using too many colors (takes away, could be a distraction)
condensing all copy into a phone screen can be overkill (too much to scroll for the user)
Browse other case studies
Tabby
A Checklist App For Pet Owners
Kaiser Permanente
Introducing A Therapy Booking Feature