Redesigning UWSOM Service Learning Site using website responsive design to connect 70+ health organization to students in the Pacific Northwest.

The Challenge

Redesign an archaic website that fails to meet the needs of students in the medical trying to find and sign up for service learning opportunities.

The Outcome

A clean navigation, which provides students and providers have a central area to easily find service learning opportunities making the website more accessible and useful.
Role
Volunteer Experience: Lead UX/UI Designer
Timeline
Nov. 2020 - Present
team
Shareen Chang
Siddhant Jain
Jennifer Lai
Yenny Park
Project for
UW School of Medicine Service Learning

THE PROBLEM

While the old home page gives users a quick call to action to start their journey of exploring service learning opportunities, there are multiple problems with this layout.

Old UWSOM service learning home page

1. States are not labeled. This is confusing for users who are not familiar with the shapes of states or the geographic locations of these places. Washington is divided into two regions giving the appearance that they are two different states.

2. The homepage does not provide sufficient information and direction for users to understand and navigate through the website.

3. The homepage only has one actionable function (selecting a location) with no guidance, context, or other capabilities.

USER RESEARCH

Medical student avatar profile icon
Medical Students
Prospective / health sciences student avatar (boy wearing glasses) profile icon
Prospective / Health Sciences Students
Organization provider avatar (professional looking man) profile icon
Organization Providers

We conducted six semi structured interviews and created task scenarios for usability testing with these three main stakeholders.

Here are the main insights:

"I don't know where to sign up for opportunities."
Pop up information about opportunity on old website

With not enough color contrast in a huge chunk of information and no direct button or link to sign up, users are not able to quickly sign up for an opportunity therefore losing interest quickly.

"The pictures and descriptions about the location is helpful."
Old website card view of opportunities page

Users found when browsing the site, the pictures, short description, and location were 3 key information that help them see if they are interested in an opportunity. The pictures gave context to what type of work the students would be engaging in, giving them an insight to the work. The location helps students identify how reasonable it is for them to do this service learning opportunity. The short description allows them to read more about the opportunity and see if users are interested in the work.

Here are the main PROBLEMS that we are targeting:

01

Outdated Look

02

Difficult Navigation

03

Confusing Sign Up

1. Outdated look: The visuals of the site make it unappealing to browse and difficult to find the information users are looking for.

2. Difficult Navigation:
Users are unable to look at multiple categories or locations at the same time.

3. Confusing Sign Up:
Users aren't able to quickly sign up due to the text overload and lack of dynamic view of information.

Wireframes, Ideation, Process

New website system flow chart

Redesigning a major part of the website's information architecture to streamline the user's flow when browsing and signing up for opportunities.

Wireframes made on whimsical

We conducted market research on other service learning / volunteer websites. We also went through multiple design iterations and many pivoting points on what our stakeholders needs and wants are and how they would be interacting with the website.

THE SOLUTION

New Home Page

New redesigned home page
  • Easier access to critical information. By scrolling down, users can read through other useful information such as onboarding info, becoming partners etc. before diving directly into finding opportunities.
  • Addition of photos gives life to the website. It shows real life pictures of students at their service learning opportunities giving more context to what some of these opportunities involve.

Navigation + Browsing

New redesigned navigation system for finding service learning opportunities
  • Addition of a filter system; users can filter by category and volunteer type to browse relevant opportunities that match their schedule.
  • Clear button to learn more or sign up with appropriate visual hierarchy so that users can easily read important information and easily sign up.
  • Pop up overview and opportunity's info page are separated to reduce cognitive load. We separated additional detailed information to another webpage allowing users to keep multiple tabs open of different opportunities.

Thoughts and Next Steps

As the technical team develops the web page for the general public to use, we want to conduct additional usability testing with our target audience to see if our design meets the goals of the stakeholders. With these insights, we hope to continue to iterate and improve the design.

We also plan on seeing if there is an increase of usage of the website or are students still finding service opportunities elsewhere or are they successfully using the website to sign up for relevant opportunities.

Continuing on, we want to focus more on the provider side as well as other parts of the website. While we did interview one provider, our project focused on the students' experience of finding and signing up for an opportunity and less on the other tabs of the website such as "Donations", "Resources", "Training" etc. We want to see if there is continued development on those section of the website.

Thank you to Leonora Clarke, our project manager, who gave us the opportunity to work on this project and being so flexible and understanding!

Thanks for coming by !
Got any questions? Or just wanna chat? Connect with me through email or LinkedIn!
If you were wondering, sorry my Tik Tok account is a secret :)
EmailLinkedin