We designed a website for Dartmouth Students Against Sexual Violence, an umbrella organization centered on gender-based violence response and prevention.
ROLE
Lead product designer
TEAM
Three designers One product manager
TOOLS
Figma
DURATION
10 weeks June - August 2023
MY ROLE
On this team, I mentored our two other designers, providing them with guidance and concrete feedback on their designs.
For one of the designers, this was her first time working on a client project. I met with her on a weekly basis to cover topics such as user interview best practices, communication with a client, and tips for transitioning from UXR to design. I also crafted a timeline for this project and kept the team on track with our milestones.
PROBLEM
Dartmouth lacks a clear, easy-to-use website with information on gender-based violence resources and student organizations.
The current website for Dartmouth's Student and Presidential Committee on Sexual Assault (SPCSA) are ineffective at communicating the college's resources and initiatives.
Old website:
COMPETITIVE ANALYSIS
We researched existing gender-based violence prevention websites to understand how they showcase resources.
We specifically focused our search on websites for college students, since they are our primary user group.
Click to zoom
Here were our three major takeaways from competitive analysis:
Use language that makes users feel supported. Examples include "you have options" and "here for you."
An exit site button helps users leave the site if they encounter triggering information.
A straightforward interface with clearly outlined options helps users make informed choices about what is best for them and their situation.
USER INTERVIEWS
We spoke with four Dartmouth undergraduates about their experiences with sexual violence prevention on campus.
These students had varying levels of experience with GBV prevention, with some being involved in related organizations on campus. We asked them questions such as:
RESEARCH INSIGHTS
Based on our formative research, we generated the following insights:
LACK OF CLARITY ABOUT RESOURCES
Students need help remembering the resources available to them
Misunderstanding about the difference between confidential resources and responsible employees
HIGHLIGHTING THE WORK OF ORGANIZATIONS
"We do so much work behind the scenes that isn't properly broadcasted right now" - SPCSA exec
Helping students understand what kinds of initiatives they can get involved in
How might we help students feel supported while researching sexual violence resources?
WIREFLOW
We developed a preliminary wireflow, but struggled to organize the content in an intuitive way.
Click to zoom
Because there was so much information we wanted to convey in this website, we decided to dedicate subpages to each section of content. While this helped us organize the site, ultimately, it became complicated.
The site hierarchy was too deep, meaning that users wouldn't be able to easily access key information and resources.
UX RESEARCH: CARD SORTING
9 students participated our card sorting activity to help us better understand user expectations of site flow.
Similar to our user interviews, these participants demonstrated varying levels of familiarity with sexual violence resources on campus. Below are the given instructions and results:
UPDATED SITEMAP
Using the insight gathered from card sorting, we updated the site's wireflow and created a more streamlined sitemap.
We aimed to reduce site depth by splitting up the website into three main subpages. Within each subpage were anchor links, keeping all relevant information on a single page. While this created additional scrolling time for our user, my team agreed this would create a more frictionless site experience.
GREYSCALES
My team divided up greyscales, each of us individually designing one page and creating the landing page together.
Click through my iterations below:
Final Screens
Homepage
Providing clear, accessible information to students
Resources
Dartmouth offers a plethora of resources. We designed an easy way for students to find what they're looking for.
TAKEAWAYS & NEXT STEPS
I particularly enjoyed the UX focus of this project because it allowed me to delve deeply into research and user perspectives!
As a next step, I would further iterate on the hi-fis to establish a more consistent UI. I'd also conduct usability testing to identify areas of improvement within the website!
