Making Sexual Assault
Prevention resources
Accessible

UX Design Case Study
Lead Interaction Designer

 

Purpose

A survey conducted by Stanford in 2019 showed that nearly 24% of undergraduate women have experienced sexual assault. The findings of the report inspired me and my teammates to focus on the issue in an app redesign project. We came across the mobile app, Circle of 6, which was released in 2014 and lauded for its innovative approach to sexual assault prevention.

 
 

Problem

Circle of 6 gives its user the ability to quickly contact a “Circle of 6” close friends to alert them when they are in a dangerous situation. However, my teammates and I found that the app was difficult to use and UI and UX design was outdated. Given the high pressure situations the app would be used in, it is all the more necessary that the features are intuitive and easy to access.

 
 
 
Co6-Screens-1024x921.png
 

We identified three major tasks central to the app’s function and chose to redesign them:

  1. Adding and Removing Contacts

  2. Alerting Circle of Danger

  3. Accessing Resources

 

User Research

Identify User Pain Points 

Method: Hierarchical Task Analysis + User Observation

To understand the pain points of the current user experience, we conducted several user tests where we asked users to complete the three tasks above and observed how they navigated the app. With our observations from the user tests, we filled in a hierarchical task analysis.

 
Letter - 1.png
 

 PrototypinG

Redesign and Prototype Tasks

Method: Task Flows + Rapid Prototyping + Wireframing

Tools Used: Paper Prototypes, Figma

 
IMG_6157.jpeg

Paper Prototypes

The first iteration of interactive prototypes based on preliminary sketches and group ideation. Design changes include:

  1. Tutorial to introduce functions and circle

  2. Home screen with prominent alert functions

  3. Taskbar to access circle, settings, and resources

  4. Dedicated page for resources, clearly labeled

 
Frame 1 (3).png

Wireframe

Our first digital prototype was a black and white wireframe to use for user testing. New design additions:

  1. Interactive Chat Tutorial

  2. Find Your Friends Map

 
 

 Test & Refine

Respond to Interactive User Feedback & Refine

Method: Wireframe + User Testing Interviews

Tools Used: User Interviews, Figma, Illustrator

 
Circle of 6 Tutorial Mock.png
Circle of 6 Location Mock.png
Circle of 6 Homescreen Mock.png
Circle of 6 Map Mock.png
Circle Screen Mock.png
Circle of 6 Resources Mock.png
Next

UX Design: Seattle Design Festival - Urban Harmony