Southside Harm Reduction Services
UX Case Study:

The Story:

I took on the challenge of producing a full redesign of Southside Harm Reduction Service's website. Southside Harm Reduction Services is a local, volunteer-based organization that works to promote the human rights to health, safety, autonomy, and agency among people who use substances. They do this by providing the life-saving overdose medication naloxone, clean syringe delivery, street outreach, and skillshares to spread knowledge & resources throughout the community.


  • Improve all fundamental user flows by restructuring the website’s content

  • Make finding services and contributing to Southside Harm Reduction Service’s simple and intuitive.

  • Implement expected elements and achieve all necessary corrections, focusing on clarity, user support, and accessibility

The Process:

Deep Dive:
I started my design process with a deep information dive of secondary research to gain a more extensive understanding of the problem space and primary users' needs.

Competitive Audit:
To obtain comprehension on other relevant offerings in the area, I created an in-depth competitive audit.

Organization Questionnaire:
To increase additional insight straight from the source and make sure my redesign goals were well aligned with that of SHRS, I conceived a questionnaire for my contact within the organization.

Test Script:
After achieving a broader understanding of SHRS and their capabilities, a test script was carefully crafted in preperation for my in-person usability interviews. 

In-Person Usability Interviews:
Using the test script, I conducted two in-person usability interviews in order to best understand SHRS's current website, common pain points and opportunity areas.

Once the usability interviews were completed and all of my research was well documented, I synthesized my data to detect and group patterns and tie together themes and commonalities. 
The entire research phase of this project informed, validated, and supported my redesign decisions.

User Personas:
Using qualitative, quantitative, and demographic data I accumulated, I created two user personas to further guide my design decisions.

Brand Identity:
Before beginning to prototype SHRS's new website, I created a recognizable brand identity for SHRS.

Logo Update:


Style Guide:
I produced a style guide to showcase an overview of the recommended color scheme, typography, iconography, and interactive elements I would be using to encapsulate the design of their new website and other outreach materials.

After SHRS's new brand identity was in place, I planned the information architecture of SHRS's new website by creating a simplified screen flow that reduced the original website’s menu options from nineteen to nine, without compromising any of the content. Additionally, I cut the original website’s interactive forms in half because some proved to be repetitive. 

Sketched Wireframes:
Considering information hierarchy, key tasks, and expected elements, I began to sketch out some low fidelity wireframes.

Interactive Digital Prototype:
After creating wireframes, though I am a huge fan of Axure and Adobe XD, I prototyped SHRS's new website using wix for the sake of time and taking the possibility of implementation by SHRS into account. I did not use a template so it is entirely unique and I created some elements of it myself using HTML and CSS

Volunteer Feedback Survey:
In addition to the full website redesign recommendations and brand identity, I implemented a volunteer feedback survey to provide feedback to SHRS and potentially improve the volunteer experience.

Redesign Recommendation Presentation:
Lastly, I had the opportunity to present a walkthrough of this project to my community and colleagues. 


Full Website Redesign Interactive Prototype:
Echoed by four more usability interviews I conducted to further add refinements to my digital prototype, the Southside Harm Reduction Service’s website redesign proves to be far more intuitive. The website redesign is fully interactive and you can view it in it’s entirety here


Design Methods Used:

  • Secondary Research

  • Competitive Audit

  • Questionnaire

  • In-Person Usability Interviews

  • Synthesis

  • User Personas

  • Storyboards

  • Scenarios 

  • Brand Identity

  • Wireframing

  • Prototyping

  • Survey

Software Used:

  • Google Suite

  • Sketch

  • Adobe Illustrator

  • Adobe XD

  • Wix

  • HTML

  • CSS