Ux/UI Design

Paths

Helping people with disabilities with wayfinding

Problem

Wayfinding apps have revolutionized the way that we commute and travel, but they're optimized for people in cars. Additionally, many people with disabilities rely on pedestrian infrastructure such as curb cuts and crossing signals to safely travel. In addition, obstacles like streets without crossing signals, sidewalk cracks, or cars partially parked on sidewalks can be challenging for many people. An app that notifies people of such obstacles would increase independence for people with disabilities.

Solution

Paths is an inclusive wayfinding app that notifies users of potential obstacles in their pedestrian path. Because people with disabilities have a wide range of user needs, Paths has many different functions and settings. In my research process, I learned about the "curb cut effect," which explains how something designed to solve one group's problem can also solve another's.

Type

  • School Project

Space

  • Wayfinding

my role

  • UX/UI Design

Target Audience

  • People With Disabilities

Deliverables

App prototype

Tools

  • Adobe Illustrator
  • Figma
  • Protopie

timeframe

2021 | 8 weeks

Deliverables

  • App Prototype

Tools

  • Adobe Illustrator
  • Figma
  • Protopie

timeframe

2021 | 8 weeks

Process

How might we design an inclusive pedestrian wayfinding app for people with disabilities?
jump to prototype

Empathize

Research
Interviews

Define

Affinity Mapping

Test

Lessons Learned
Test

Ideate

User Spectrum
Prototype Testing

Prototype

Wireframes
Branding
Visual Design
Empathize

User Interviews & Competitor Research

I started this project by interviewing 4 people who had different disabilities and exploring existing wayfinding apps. Doing this taught me a lot about what it is like to travel with a disability.

Obstacles Exist

"Bad cracks in the sidewalk can make rolling my wheelchair harder. A car parked on a sidewalk can be another real obstacle for me."

"disabilities" is an umbrella term

"I have a number of challenges that are considered hidden, and they change depending on the day."

safe areas matter

"I will take a bus to areas with audible traffic signals and zebra crossings because it's much safer for me to cross the street with them."

inclusive design can be tricky

"I understand the importance of tactile paving for people with visual impairments, but going over them in my wheelchair can be painful"
Empathize

Competetive analysis

[coming soon]
Define

Affinity Mapping

After my research phase, I made sticky notes with key quotes and insights that I learned from my interviewees. I also made quick sketches of obstacles and helpful parts of the built environment and organized the stickies into groups.
Define

User Spectrum

As I learned more about inclusive design, I came across Kat Holmes' inclusive design toolkit from Microsoft. Using her guidance, I created a 'user spectrum' which aims to consider more people than a user persona.
permanent: Daily

adult using a wheelchair

"I need curb cuts, safe crosswalks, and level areas because it's dangerous for me to roll without them."
temporary: Weeks - years

Adult with short-term vision loss

"I need to find audible traffic signals and zebra crossings so I can safely cross the street."
situational: Minutes - days

non-disabled Adult walking home

"I need to find a way to my destination that has sidewalks because the city that I'm visiting sometimes doesn't have them."

Shared Motivation

Each group needs to get somewhere safely using a pedestrian mode of transit.
Ideate

Navigation Overview

Ideate & Test

Prototype Testing

For this project, I wanted to make a paper prototype to quickly gain insight. Due to the pandemic however, I made a rough prototype using Protopie and shared it via a zoom call. I tested my app with The Arc, a local disabilities services non-profit, who taught me about how I could make the app more inclusive.

Don't reinvent the wheel

My testers were already aware of wayfinding apps. Instead of trying to reinvent the wheel, I worked to improve on existing UX patterns.

Omit the bottom menu

My testers were concerned that the bottom menu was in the way of other important information for users. This also didn't match with existing UX patterns so I decided to take it out.

Make it malleable

I had created an extensive on-boarding process to include many different user types. My testers informed me that most people already have their unique accessibility settings set up on their phones.
Prototype

Iterations

Home

01-weather & pollution

I created a weather component that also has pollution information. I moved it to the left to be more accessible.

02-Menu

In the first prototype, I created a bottom navigation that was accessible, but took up too much room. I broke it up and incorporated it in other features.

03-Add obstacle

I changed the language from "contribute," to "report obstacle" to be more clear for users.

04-My settings

I created the "my settings" page to allow users to adjust the app to fit their needs.

05-recent

I added a "recent" section because it is a useful and familiar UX pattern.
Select Route

01-Destination hierarchy

I worked to improve the hierarchy of the destination information.

02-Select transportation Methods

I initially made it so users could only select one the transportation method. This didn't work, because a person might use multiple options, so I created a setting that allows users to save their pedestrian type.

03-Routes

I initially presented only the best route, but I changed it so a user can select the route that suites them.

04-Starting point

I made it more  clear and accessible for a user to select their starting point.

05-close or back

I used an "x" instead of a back arrow, this is similar to apple map's UX pattern. I did this so that it is more accessible and leaves space for the destination information without breaking the hierarchy.
Trip information

01-Obstacles

I made the obstacles more clear and consistent for users.

02-No weather

I took out the weather component for screens other than home, because it took up crucial map space that a user might need.

03-No bottom menu

I took out the bottom menu to ensure that there was enough space for the trip information.

04-Trip directions

I increased the hierarchy and added an icon to the obstacle information so make the trip directions more clear.

05-Trip Obstacles

I made a separate component for the obstacles so that people can reference them more easily.
Prototype

Branding

#333647
#146194
#0f5895
#1a4e7e
#cc5831
#f2602b
#704fb6
#644aa0
#fafafa
#d5b532
#f2cc2e
#e1142c
#be1b31
#333647
#198f67
#12a56f

Darkmode/Lightmode

Standard/larger text sizes

Default/Focused button

Define

Final Prototype

View full vimeo version
Test

Lessons Learned

Test thoroughly

Every time I tested my app or got feedback from people, I learned more about how I could improve it. This is especially true for designing a product for a wide range of individual needs.

Design with people, not for them

It is important to know who will be using your experiences and empathize with them.I worked to include people with disabilities in my design process.

I'm here to get it right, not to be right

One of my early challenges feeling like I was going to design something wrong. I leaned on my support system, and they reminded me that being vulnerable and empathizing with people would help me design better for them.

More Case Studies

Web design

Bread

A  website concept aimed to make it easier for young adults to understand money.
View Case Study
An arrow pointed to the right
Graphic Design, Motion Design
Web Design

Bread

An Afrofuturist magazine concept that explores science, culture, and philosophy.
View Case Study
An arrow pointed to the right
web design

Rhinocéros

This is placeholder text that will be filled in later.
View Case Study
An arrow pointed to the right
Graphic Design, Motion Design
Web Design

Rhinocéros

An Afrofuturist magazine concept that explores science, culture, and philosophy.
View Case Study
An arrow pointed to the right
Graphic Design

Sasa

An Afrofuturist magazine concept that explores science, culture, and philosophy.
View Case Study
An arrow pointed to the right
Graphic Design, Motion Design
Graphic Design

Sasa

An Afrofuturist magazine concept that explores science, culture, and philosophy.
View Case Study
An arrow pointed to the right
jaimealwright@gmail.com
Ⓒ 2022 Jaime Wright