Overview

Solution

Problem

Wireframes

Iterations

Reflections

Go to top

Client

Mobile app

Healthcare

UX Research

An app for Opioid users to navigate a complex support system

With a doctor, we designed a solution Weave to help opioid drug users navigate the complex harm reduction services in a simpler, more intuitive way.

My Role

1. End to end design process 2. Led the branding, including slogan, storytelling, and animations 3. Synthesized research findings

Timeline

6 weeks (Spring 2024)

team

1 Clinician 3 Designers

Tools

Figma AfterEffects Qualitative Research

Client

Mobile app

Healthcare

UX Research

An app for Opioid users to navigate a complex support system

With a doctor, we designed a solution Weave to help opioid drug users navigate the complex harm reduction services in a simpler, more intuitive way.

My Role

1. End to end design process 2. Led the branding, including slogan, storytelling, and animations 3. Synthesized research findings

Timeline

6 weeks (Spring 2024)

team

1 Clinician 3 Designers

Tools

Figma AfterEffects Qualitative Research

Overview
Background

220 people in the U.S. died each day from an opioid overdose in 2021. Pittsburgh was not an exception.

Client Mission

1

Create an app to help opioid users locate and navigate support system

Iteration Process

We went through several design iterations based on client reviews and user tests, ensuring the feasibility and validity of our design.

Week 1

Client

Review

Initial wireframe

Week 3-4

User Tests

& Interviews

Usability testing

Week 5

In-class

feedback

Feedback on

user test results

Week 6

Final

Presentation

Final delivery to

client & stakeholders

solution

We Weave, We Live!

Weave is a mobile app that connects people who need harm reduction services (HRS) with local centers, empowered with transparent, easy access, and judgement-free information.

Link to Figma

01/ Main Features
FEATURE 1-search

Find what you need in just a few clicks

On Weave, users can easily navigate a complex system with intuitive category and location-based search.

FEATURE 2-detailed information

Bite-sized, easy-to-digest information

Based on our research with opioid addiction survivors, Weave provides visualized information that reduces cognitive load and supports easier decision-making.

FEATURE 3-anonymous review

Real voices, powered by Weave community

Privacy matters to opioid users. Weave provides a safe space for them to share their unique experiences and contribute to the community.

FEATURE 4-LIVE CHAT

Be seen, be heard, get real support

Opioid users often find it difficult to make decisions on their own. Weave helps them connect with those who can provide local, case-specific help.

02/ Problem Space
Context setting

Disclaimer: This project is about drug use

Given its sensitive nature, extensive preliminary research was essential before we began. Below are the key concepts we clarified before starting the main task.

Opioids

are a class of drugs that include heroin and fentanyl. Although useful to treat pain, they cause dependency.

Harm Reduction

service(HRS) aims at reducing the negative impacts of drug use and keeping people alive.

Peer Navigators

are people with lived experience. They work at HRS guiding people who use drugs to find the help they need.

Our targets

are drug users, their family and friends, peer navigators, and communities seeking more accessible information.

Opioids

are a class of drugs that include heroin and fentanyl. Although useful to treat pain, they cause dependency.

Harm Reduction

service(HRS) aims at reducing the negative impacts of drug use and keeping people alive.

Peer Navigators

are people with lived experience. They work at HRS guiding people who use drugs to find the help they need.

Our targets

are drug users, their family and friends, peer navigators, and communities seeking more accessible information.

painpoints investigation

What's not working with the current system?

Faced with the difficulty of directly meeting people with drug use, we gained key insights from secondary research and affinity diagramming.

Lack of real time organized Data

There was no single platform with necessary information, forcing users to browse multiple websites to find locations or check availability.

Fear of Stigma

Users hesitated to get help due to the fear of being stigmatized or penalized. This fear of judgment acted as a significant barrier to seeking help.

Need for holistic support

Users needed something more than just HRS. They needed other support as food, employment and housing.

Problem Statement
How might we
better connect people who use drugs with local harm reduction service(HRS) centers

How might we
better connect people who use drugs with local harm reduction service(HRS)

Problem Statement

1

By providing reliable information

2

By supporting their agency

3

By protecting their privacy

with the end goal of improving
their quality of life as a whole?

with the end goal of improving
their quality of life as a whole?

03/ Wireframes & Feedback
Initial brainstorming

What are necessary features?

We brainstormed ideas to define main features and the structure of our final product.

competitive analysis & UX Inspiration

Analyzing benchmark points from existing apps

There wasn't a direct competitor in the market. However, our client specifically wanted us to benchmark Yelp focusing on review and navigation.

Wireframes

Lo-fi Wireframes

We proposed our lo-fi wirerframes to our client. Here are the original slides we shared with our client, Dr. Joudrey. Colors were included to help undestanding.

Link to the slide deck

Client feedback

Identifying gaps to address

During our first check-in, we received valuable feedback that helped us refine our direction to align with client goals.

1

Love the map view, but streamline UX for accessibility

Our team was the only one to propose a map view, which our client appreciated. However, he raised a concern: 'Sometimes users may use this app under the influence or in emergencies. How can we make it easier to navigate?'

1

Streamline UX for accessibility

2

Re-evaluate the rating system

2

Re-evaluate the rating system

3

Is a chatbot feature the best option?

3

Is chatbot the best option?

User testing

Learning from lived experiences

With our updated wireframe, we conducted 2 UI evaluations and user interviews with Peer Navigators to assess the overall UX and gain further insights.

Link to Interview Protocol

04/ Design Iterations
challenge 1

Categorizing is crucial, but that's not what users need

Reduced the categorization to simplify the decision-making

Our team initially put a lot of effort in categorizing services and organizing them.

However, user research revealed that this didn't match users' actual decision-making process. Users relied on their own mental models and simpler everyday terms.

Why dropped

1

User confusion

We initially used eight categories, but through testing, we learned that the categories weren’t mutually exclusive and didn’t align with users' mental models.

2

Ineffective UI

Using 6 to 8 different colors for coding was visually overwhelming.

Why dropped

1

User confusion

We initially used eight categories, but through testing, we learned that the categories weren’t mutually exclusive and didn’t align with users' mental models.

2

Ineffective UI

Using 6 to 8 different colors for coding was visually overwhelming.

Why selected

Simpler categorization

1

Simpler and general 4 categories matched user's mental model and supported easy navigation.

Intuitive color-coding

2

Color-coded system to support more intuitive navigation.

Content Hierarchy

3

Filter chips were used to give users hints about what each category includes and were arranged in order of highest relevance.

Why selected

Simpler categorization

1

Simpler and general 4 categories matched user's mental model and supported easy navigation.

Intuitive color-coding

2

Color-coded system to support more intuitive navigation.

Content Hierarchy

3

Filter chips were used to give users hints about what each category includes and were arranged in order of highest relevance.

challenge 2

Promoting community and increasing reliability

Simplified system to nudge users to share their voices

Streamlined content based on the priority.

Pre-filled chips enable users to add their opinion anonymously, without the need to provide personal information.

Before

1

Lack of value

The star rating posed the risk of misuse and didn’t add value to the community.

2

Inefficiency

Visualized information took too much vertical space and created visual noise with other elements on the page.

3

Lack of reliability

Through user interviews, we also realized that this type of information is too personal and only valid in real-time.

After

Increasing credibility

1

Each user can increase the reliability of a single user's review by reacting to it.

Increasing credibility

1

Each user can increase the reliability of a single user's review by reacting to it.

Feasibility

2

Reduced unnecessary visual elements.

Feasibility

2

Reduced unnecessary visual elements.

challenge 3

Setting the right tone for a safer space

Combined UI and UX writing to enhance trustworthiness

Through user tests, we learned that the chat feature is more than just a messaging tool; it's where users assess the app's trustworthiness and where peer navigators build connections.

To foster the right tone, we iterated and refined the UX writing to create a safer space for both peer navigators and users seeking services.

1

Feasibility

Our original idea was to connect users with the center. However this idea was unrealistic and required additional staffing.

1

Feasibility

Our original idea was to connect users with the center. However this idea was unrealistic and required additional staffing.

2

Too robotic

While buttons made the process simple and easy, user tests showed that they lacked a human touch, making users more reluctant to share their personal information.

2

Too robotic

While buttons made the process simple and easy, user tests showed that they lacked a human touch, making users more reluctant to share their personal information.

Nudge

1

Added a tooltip that automatically appears when users are inactive on the home screen to inform them about the chat feature.

Nudge

1

Added a tooltip that automatically appears when users are inactive on the home screen to inform them about the chat feature.

Increasing Trust

2

Adjusted the UX writing to clearly identify the person users are speaking with, creating a more human touch and fostering trust.

Increasing Trust

2

Adjusted the UX writing to clearly identify the person users are speaking with, creating a more human touch and fostering trust.

05/ Branding
DESIgn Manifesto
DESIgn Manifesto

Different needs,

Diverse stories,

Let them discover

Different needs,

Diverse stories,

Let them discover

LOGO & Slogan
LOGO & Slogan

We Live, We Weave

LOGO ANIMATION

LOGO ANIMATION
06/ Takeaways

1

Real voices into useful features

This project was research-driven. By involving users with lived experiences, we were able to incorporate more realistic features that we wouldn’t have considered otherwise.

1

Real voices into useful features

2

UX as a holistic experience

2

UX as a holistic experience

3

Building something new using familiar patterns

3

Building something new using familiar patterns