Introduction


Design Process


Challenges


User Analysis


Persona


Ideation


Design Goals


Low-fi Sketches


Hi-fi Mockup


Future Iteration


Lessons Learned






Full Prototype

Lessons Learned

This is my first experience participating in a complete UX project. Throughout the design process, I have enhanced my design thinking skills, acquired the ability to communicate effectively with teams, and actively listened to others' ideas. Some key insights are:

  • Think Twice: The potential for malicious use when sharing location with other female users during onboarding process.

  • Time Matters: Certain features, such as safety ratings for different communities in Toronto, couldn't be included in the wireframe.

  • Empathize with Users: The project also involved explaining aspects of females' commuting experiences, like holding keys while walking or texting family in Uber, to male group members. It highlights the importance of empathizing with our users.

  • Women Power: The lack of effective safety apps for women shows the underrepresentation of female designers.

Lessons Learned

Future iteration

Iterate

Implement participant feedback from evaluation testing into prototypes


Re-test

Perform another round of usability testing to validate changes made have positive impact


Accessibility

Conduct tests for accessibility and compliance with accessibility standards of the app, and iterate if required


Documentation

Document the changes made and the rationale behind those changes

3

typical users

2

methods

  • Observation of Usability Test

  • Interview

3

tasks

  • Navigate a trip

  • Update the route upon receiving the alert

  • Find the nearest open facility

  • Icons

The icons clearly need to be improved in order to carry better their meaning.

  • Features


  • Positioning

The positioning of some buttons or features are disliked by users.

Important features are still missing, such as pinch-to-zoom, walking with companions and updates function on public transport trips. One user is expecting to see 'walking companions' function.
  • Icons

The icons clearly need to be improved in order to carry better their meaning.

  • Features


  • Positioning
Important features are still missing, such as pinch-to-zoom, walking with companions and updates function on public transport trips. One user is expecting to see 'walking companions' function.

The positioning of some buttons or features are disliked by users.

Usability Testing

Low-fi Sketches

Onboarding & Selecting Safety Criteria

Travelling Safely

Receiving alerts

Rerouting

We decided to design a map-based mobile app 'WanderSafe' which can help women feel safe while commuting in Toronto.


By using WanderSafe, can:


  • promptly find a travel route based on her safety criteria to lift the burden of selecting a route on her own

  • get to the nearest open facility without spending time searching through a map

  • learn of route conditions in real-time without constantly worrying about unpredictable situations

We decided to design a map-based mobile app 'WanderSafe' which can help women feel safe while commuting in Toronto.


By using WanderSafe,






can:

  • promptly find a travel route based on her safety criteria to lift the burden of selecting a route on her own

  • get to the nearest open facility without spending time searching through a map

  • learn of route conditions in real-time without constantly worrying about unpredictable situations

Design Goals

Ideation

  1. Brainstorming

We generated different ideas to meet Annabella's needs

  1. Voting

  1. Top Three Ideas

Our final top three ideas are:

  • Safe Route Finder: Generate safe routes based on daily route conditions and preference.

  • Annabella Alert : Real-time alerts from TTC and police as reports come in.

  • Fake Call: Receive a "fake call" to deter people.

  1. Final Decision

After reconsidering the top three voted ideas,

we have narrowed our ideas to 3 solutions

1. Travel route based on her criteria

2. Nearest open facility

3. Real-time route conditions

We voted our favourite ideas based on what would make the

biggest difference in Annabella’s travels (3 blue dots/member)

and Which ideas were the fastest to implement

(3 purple dots/member)

'The Anxious Fella'

Annabella

22 years old

Marketing Coordinator in Toronto

Comes from a small town



Needs & Goals

She wants to discover more of Toronto

She wants to get some rest during her long trip

She wants to feel safe and comfortable while traveling


She needs a way to relax while commuting so that she can have a restful trip

She needs a way to see real-time route conditions so that she can travel with confidence

She needs a way to access trip alternatives immediately so that she can act in emergencies


Persona

'The Anxious Fella'

49

Valid responses from online survey

12

Toronto female

residents from interview


  • Women feel unsafe and scary after 6:00pm

  • Women feel particularly concerned when taking the subway to get around

  • Women adopt a variety of methods to increase their perceived safety while traveling, like looking around and decrease the music volume

  • Women are skeptical about TTC safety services


User Analysis

User Analysis

Challenges

How can we enhance the commuting experience for females in Toronto, ensuring their sense of safety and well-being?


WanderSafe is a map-based mobile app designed to enhance the walking commuting experience for women in Toronto. It addresses challenges faced by women, such as difficulty in identifying the safest routes on maps, swiftly locating safety houses in times of danger, and receiving real-time alerts. The design inspiration came from our female members' negative commuting experience in Toronto.

My Role

Research Studio Leader

Low-fi /Mid-fi Wireframes

Hi-fi Mockup

Usability Testing

Team

Alexis Michaud, Ashfaaq II Mohammed, Beibei Hu, Fan Fei, Jeanelle Suarez, Xinlu Chen

Tool

Figma, Miro

Skills Developed

UX Research, Wireframing, Prototyping, Usability Testing


A virtual companion to help women in Toronto feel SAFE

Design Process

Analysis & Research

Analysis & Research

Ideation

Ideation

Iteration

Iteration

Wireframing

& Testing

Wireframing

& Testing

Wandersafe


2023, UX design Academic Project


Thanks for Scrolling!

Visual Design

Hi-fi Mockups

Onboarding

#F5F5F5

#EEE4CB

#FFC65

#C15938

#252525

Aa

Inter

Enter address in “Enter your destination” field

Select Current Location in “Enter your starting point” field

Swipe up on bottom pane to view which conditions are met, and see full list of options

Tap on “Start” button and filter icon in top-right to deselect police stations from displaying on map

Key Screen

Select Safety Criteria

“ Red, orange and yellow are all warm colours and are generally thought to evoke feelings of happiness, optimism, energy and passion...Warm colours also rev you up! They can signal danger or make you take action.”

-Colors and emotions: how colors make you feel

Navigate a Trip: Promptly find a route based on her safety criteria

to lift the burden of selecting a route on her own

Receive Alert: learn of route conditions in real-time

without constantly worrying about unpredictable situations

Receive an alert and updates the route

Tap on “Start” button and start the new generated route

Safety House: get to the nearest open facility

without spending time searching through a map

Tap the FAB to begin navigation to a “safe house” i.e. the nearest open facility

Tap “SHARE” ,

location shares to emergency contact

Exit messages and arrive at the safehouse

Main Screen Layout

Safe House FAB

Lead users to the nearest open public facilities

Safety conditions filter

Users can re-choose safety conditions

Save Routes

Users can save their favourite routes

Directory

Users can save their emergency contacts



Users can drag safety criteria to determine the sequence of importance for each criterion

Visual Design

Hi-fi Mockups

#F5F5F5

#EEE4CB

#FFC65

#C15938

#252525

Aa

Inter

“ Red, orange and yellow are all warm colours and are generally thought to evoke feelings of happiness, optimism, energy and passion...Warm colours also rev you up! They can signal danger or make you take action.”

-Colors and emotions: how colors make you feel

Full Prototype

3

typical users

3

tasks

  • Navigate a trip

  • Update the route upon receiving the alert

  • Find the nearest open facility

2

methods

  • Observation of Usability Test

  • Interview

English