top of page
Asset 2.png
accessSOS pages-3_edited.png

accessSOS | UX/UI DESIGNER

Designing a flow for deaf and hard of hearing users who may otherwise experience difficulty communicating an emergency to first responders using their voice.

Role

UX/UI Designer

Timeline

Aug-Dec, 2023 (4 month contract)

Skills

User research, app prototyping, WCAG

accessSOS gif.gif

Context

Brief

accesSOS is a tech nonprofit that provides a life-saving solution by enabling direct access to emergency help for the deaf community.

The icon-based app allows users to describe their emergency and sends these details in comprehensive text form directly to responders. As the organization expands, they want to reduce the amount of time it takes users to complete a flow while simultaneously providing responders with complete and accurate details

As a researcher and designer, I created and led user interviews as well as participated in the prototyping and designing of icons that were added to the interface.

Problem Scope

Calling 911 is the go-to for most people during an emergency, but for many Americans, verbally communicating to an operator is not an option.

01

Group 40089.png

In life-threatening and time-sensitive situations, it is important for users to be able to complete the accessSOS flow as quickly as possible.

02

Group 40093 (1).png

Meet our Users

image 121_edited.png

Deaf and Hard of Hearing

Non-English Speakers

Victims of Domestic Violence

It was important to consider the experience of users who are deaf/hard of hearing, non-English speaking, and domestic violence survivors in our testing and prototyping to consider how they would interact with the app and where its painpoints are.

How Might We Statement

HMW: design a customized reporting system that allows users to accurately report emergencies as quickly as possible?

User Research

Guiding Questions

Why are users taking so long to describe their emergency in the current flow?

01

Which icons in the current flow provide an unclear description of their emergency scenario?

02

Our Method

We decided to explore these questions primarily through user interviews, receiving data from 45 users across 5 different studies. Each participant was provided a scenario and asked to imagine themselves experiencing the emergency as they went through the flow. 

Key Insights

01

Users struggled searching for icons, taking up time when reporting their scenario. This was especially true for scenarios that required two types of emergency respondents (e.g. fire and medical help).

“There’s all of those icons? If you have to swipe or scroll a lot, then there’s too many”

02

Users found that the current icon library for the fire category was not sufficient for describing their scenarios.

 "I can’t detail how urgent the emergency is and how bad its gotten”

03

Users thought that the overal flow was too long with too many steps to report an emergency.

"If there’s a way to condense the information a little bit, it’d be better"

04

Some of the icons were unclear in their design and the message they were trying to convey.

"I'm not sure what's happening in these two icons (suspicious activity and stalking)"

Prototyping

Organizing Emergencies by Urgency

Screenshot 2024-09-17 at 1.41.29 PM.png
Screenshot 2024-09-17 at 1.52_edited.jpg

Mid-Fidelity Renders

Prototype 1:
Dropdown Menu

In this render, users could easily find icons by looking into relevant categories and searching for specific icons.

We considered this solution because dropdown menus are a familiar layout and reducing icons on initial screen can help users scan the page quickly.

Screen Recording 2023-12-03 at 12.56.18 AM.png

Prototype 2:
Expansion

Here, users were given the option to expand icons to provide more details about their emergency. 

The benefit of this prototype is that users can report their emergency more accurately with additional details. However, additional interactions may be overseen and hinder search experience

Screen Recording 2023-12-03 at 12.56.18 AM (1).png
Expansion_edited.png

Prototype 3:
To Scroll or to Swipe?

In our first prototype, we divided and color-coded icons by emergency type but kept the vertical scrolling interface (pictured right).

We also considered adding a toggle bar to better organize icons and change the interface to horizontal swiping (pictured left). We also placed the icons into subcategories based on similarity, thus making them easier to find. 

Based on our research, we determined that users prefer the scrolling method (left) which is the version we opted for in our final solution.

Sections or Tabs (1)_edited.png

SECTIONS

TABS

Prototype 4:
Refreshing the Fire Page

Here we consolidated the fire emergency page and added a size of fire category. This improvement keeps the flow short while maintaining flexibility for users to report a wider range of scenarios and provide responders with relevant information about the urgency of the situation. 

Pictured here is a side-by-side comparison of the original flow (left) next to our optimized prototype that was used in the final product (right).

Fire before and after (2).png

Final Product

Introducing a more streamlined
emergency reporting solution.

accessSOS pages_edited_edited.png

CATEGORIZATION

Find the right icons, easily.

Icons are grouped and labeled by category to make searching for icons more optimal while completing the flow under pressure.  
Scroll.gif
intro.gif

OPTIMIZATION

Receive emergency help quickly.

The introductory questions of the flow have been reduced from a 5-step process to a 2-step process, providing only necessary information for respondents. 

ICON REFRESH

Report emergencies with confidence.

Newly designed icons to minimize time spent scrolling and interpreting.

In the end, we reduced the icon library from 36 to 30 icons to include only necessary information. Here is a highlight reel of our designs.
Frame 33085.png
review and submit.gif

REVIEW AND SUBMIT

Help is on the way!

Revamped review and submit pages to include only the most important information to responders.

Musings & Reflections

IMG_7742_edited_edited.png
My team presenting our research findings & designs to accessSOS' CEO!

Feedback from peers, design pros, 
and staff drove everything📈

Although we met frequently with our advisor and other professionals to receive feedback on our progress, our friends, family, and peers also turned out to be excellent sources of inspiration. Overall, it is important to include multiple voices and expertise in the design process!

Consider the user's emotional journey❤️‍🩹

It was important to acknowledge that we could not draw from our own biases because of the significant differences in our lived experiences compared to that of our user group. This project required us to take on a human-centered perspective and ensure that our users' needs were considered for each step/interaction.
image 123.png
Our first team meeting! We've come so far since then!
Overall, I had a lot of fun on this project and I learned so much about Figma, UX Research, and accessible design. I'm looking forward to seeing our designs implemented into the app's iOS users in Berkeley, California in the near future.

Huge thank you to my mentor Diya and advisor Ashley for all of the insight and support along the way! 💛
bottom of page