Student-to-Student Peer Counseling

A website redesign targeting key usability issues causing problems for the club.

TIMELINE
‍2 Months

ROLE
‍Sole Designer

TIMELINE
‍User Testing
Design Solutions
Prototyping

WHAT IS SSPC?

Student to Student Peer Counseling is a student-ran peer counseling service at UC Berkeley. The website is fundamental to SSPC’s mission, responsible for booking appointments, communicating recruitment information, and spreading awareness of the org.

THE CURRENT PAINPOINTS

❌  Failed Appointment Bookings

Students were selecting dates that were too early from the calendar.

❓ Poor Recruitment Info

The SSPC email was filled with messages from confused students wanting to join our club and not knowing how even after being on the website.

🗓️  Outdated

The SSPC website hadn’t been updated since 2012, meaning several pages and services written were misleading, hindering the ethos of our services.

A MEASURABLE IMPACT

After implementing the redesigned website, the appointment failure rate became 0% and we grew our recruitment email list by 2-3x other semesters.

Jump to Solution
SURVEY

Assessing welcomeness, trustworthiness, and activity

In addition to researching the general usability of the website, I also wanted to ensure that the website was achieving a greater goal--helping students feel comfortable and empowered seeking mental health support. I sent out surveys to a majority college student demographic, seeking feedback on their impressions.

USABILITY TESTING

Observing key problem points

I also conducted live usability tests, where I asked participants of college age to complete tasks that were generating difficulties. Below are some key tasks I asked participants to achieve.

ANALYSIS AND SYNTHESIS

I grouped the findings I found into groups to find overarching themes of usability problems from the website.

After researching, I was left with a deep trove of knowledge that was somewhat overwhelming. It was important to me to systematically take in to account every nugget - leading me to affinity mapping!

Some categories I sorted by: what worked and what didn't for each desired trait (welcoming, trustworthy, active), general advice, and usability (Nav, appointments, readability, etc).

POINTS OF IMPROVEMENT

While the website performed well in many ways, there were spots of improvement to focus on.

01

The Homepage's lack of information about counselors and personality hindered feelings of trust and welcomeness.

  • - The top banner and slider gave an unclear idea about the purpose of the website with call-to-action.

    - The text lacked contrast and lacked readability, causing them to skip crucial information.
  • - The text lacked contrast and lacked readability, causing them to skip crucial information.
  • Top banner (a slider) gave an unclear idea about the purpose of the website

02

Why students were choosing the wrong dates on our calendar book system

Rather than reading the instructions that specified how in-person appointments needed to be booked more ahead of time, users completely skipped straight to the calendar feature during usability testing.

03

Joining our team is effortful and confusing.

Users are expected to email the organization for information rather than have it immediately accessible.

LOW AND MID FIDELITY PROTOTYPING

🧠 Brainstorming and Sketching solutions

I ideated several solutions for user problems like making appointments on time & restructured pages to become more focused and effective.

User feedback I received helped me validate some layouts (such as homepage and join our team features). Additionally, I was able to choose a new design for the appointments page!‍


📋 Mid-fidelity prototyping allowed me to test navigation and restructure information architecture.

I made quite a few assumptions about the priorities of users. For example, I assumed that finding "Resources" was more important than an "About" page (which I hid under "more" for efficiency).

"If I wanted other mental health support, I wouldn't come here to look for Resources"

I also added a "Home" button so that users who weren't familiar with the practice of pressing the logo for Home could still easily access it.

MY FIRST HIGH FIDELITY PROTOTYPE

I used the same initial survey questions to test my first high-fidelity prototype on more users.

From the initial audit, I knew that UI elements, content, and photos played a large factor in perceived welcomeness, trust, and activeness. I rebuilt the hi-fi on Wordpress to test it authentically to another population (n=24).

The Verdict: While other factors improved, trust went down.

➡️ Survey qualitative feedback indicated a lack of content & information hindered trust.

To remedy this, I added more information about SSPC specifically pertaining to factors of trust.

Users indicated that the lack of text and immediate context made the website seem new, unfinished, and unestablished. I added elements that encouraged trust, like photos, more content, and detailed captions.

FINAL DESIGN

After some final design changes to ensure trustworthiness, the final design was complete!
‍

Homepage

There is a call to action that prioritizes the main focus of SSPC.
‍‍
There is more relevant imagery with more personality and people to build a strong sense of welcomeness.
‍
A more readable ‘About’ paragraph highlights key factors in trustworthiness of the service + site.

New
Previous

Click image to see full page

Click image to see full page

Booking Appointments: Since adding this format, appointment cancellations resulting from dating issues are at 0%.

Before, the available times were automatically set 1 day in advance for online appointments. This meant that students needed to manually choose a date 3 days in advance for in-person appointments.

Now, available times are programmed into 2 different calendars accordingly (one for online appointments and one for in person appointments), eliminating need for a user to manually change the time at all.
‍

New
Previous

Click image to see full page

Click image to see full page

Join Our Team: Our email list for interested students increased 3x!


Join Our Team now features 1) a top section with clear instructions on info sessions and 2) an interest form that students are able to fill out to be added to the email list. Lastly, I compiled an FAQ answering common questions that SSPC gets emails for.

New
Previous

Click image to see full page

Click image to see full page

REFLECTION

I learned a lot from this project!

1. Users differ so much. In terms of opinions on UI and impressions, users come in with such a large range of opinions that it is impossible to take into account everyone’s wants and needs. Focusing on usability and general trends are more important.
‍
2. Not getting the results you want is hard, but valuable. After I tested my first high-fidelity prototype, I was really disappointed and discouraged with the results (especially with trust). However, looking back, the feedback I got was able to help me address very real issues with the new design. Separating myself from my work is something I’ve had to learn throughout this process.
‍
3. Perfectionism is not compatible with design. While creating this presentation, there were so many times where I wanted to go back and change my design, but I know that doing so would not stay true to the design process. Design projects are done with time constraints, so aiming for perfection is a) often impossible and b) not helpful.

Thanks for stopping by, let's design together!
WORK
ABOUT
RESUME