Tobias
UX Designer

Empowering disabled people with Route:able

Image alt tag

About the project

Route:able is UX/UI concept for navigation and routing for disabilities and it was born in Hackathon for sustainable mobility end of 2020 by the Verkehrsministerium of Baden Württemberg. They won the hackathon and received 25.000 € funding on improving and releasing the app.

My Roles

In this project, we take responsibility for the whole task as UX and UI Designers. Starting with the full Design Thinking process over Project Management till User Interface Design and decision. My Role is more focused in a later stage on the Mobile UX and UI part.

Deliverables

  • UX Research

  • Prototyping & Wireframing

  • User Testing

  • Visual Design

Tools

  • Figma

  • Photoshop

  • Illustrator

  • Miro

  • Maze

THE PROCESS

Build. Measure. Learn. 

I used Lean UX principles in the development of "Homie" to focus on users and their needs at each phase of the design process:

  • Formulate and validate the hypothesis.

  • Conduct early user testing with rough sketches to unveil unexpected pain points. 

  • Define MVP. 

  • Focus on research results to create features that users really need.

  • Externalize the work using sticky notes, printouts or sketches

RESEARCH &
PROBLEM DEFINATION
61
User surveys
17
Survey Questions
7
Interviews

Surveys

Before we can define your MVP we have to get a connection to the community, to understand the user needs and pains. we conducted a user survey and interviews.

From a Rating of 1 (frustration) to 5 (happy) the overall satisfaction average of moving outside experience are 2,6 shows that people are feeling not confident about reaching their goal. These people feel often ignored by society and want to have the opportunity to be an active part of a community

In our research, we found out that these people love to communicate in Facebook and WhatsApp groups. So one of the main features that landed very early on our MVP list was a Feedback and Recommendation System where the user can share obstacles, Points of interest, or create route recommendations. This was one of the most dominant needs in our research to quote one user.

There are also some UI insights

The favorite accessibility feature is Zoom (20%) Display & Text Size (40%), Voice Assistant like Siri or Google Voice, and Voice Control (25%)

Empathy Mapping

Empathy Mapping

Problem Statement

Permanent Wheelchair users need a way to plan their routes with less effort because it allows them to gain more autonomy and confidence. We believe make mobility information accessible and structured for people with disabilities will achieve more freedom and confidence.

We will know we are right when the Satisfaction average of moving outside experience increases by 20%.

Persona

The insights we gained from surveys and interviews leading up to the persona. The main goal is to display those patterns and pain points, which allowed me to further empathize with users.

User Flows

I've created a user flow diagram to map every step of the user interaction required to achieve the main goal of this app: "As a user, I want to reach my goal safely, confidently, and not frustrated.”

Empowering disable people with Route:able
Empowering disable people with Route:able
DESIGN EXPLORATION

Ideating Solutions

From the beginning, I had the idea to create a UI that’s not only for disabilities. I was aiming for a wide range of people e.g. the older generation, people with wheelchairs, or mothers and fathers with strollers. All these people have something together. They get blocked by Obstacles or need better visibility UI.

They are not able to see very well or the smartphone is too far away, some people are not able to press easily a button on the smartphone. Other users need the Voice Control with a button Layout you can control in a grid. The contrast was one big point on the agenda.

The main goal of your travel should be to take care of your environment. Not watching on the display and high contrast and big fonts help to get attention and recognize interactions fast.

Low- and Mid-fidelity Wireframes and the first Prototype

After the first user testings, I was able to go more in the direction of a Mid Fidelity Prototype and also add new outcomes to the MVP. 
I started to refine the input from the user and add the Parking and POI feature. On the feedback of the user, I don’t change a lot in the first UI concept and waiting for some more input from the Mid-Fi.

Empowering disable people with Route:able
Mid-Fidelity Prototype & Wireframes

Mid-Fidelity Prototype & Wireframes

Changes & Learnings

Due to user feedback, we had some minor changes on the mobile part and also some awesome feedback.

  • Stick with the High Contrast
    People love the High Contrast and easily readable fonts.

  • The button overlays work well with Voice Control
    After some tests with Voice Control, the user was able to navigate and use the prototype much better for example Google Maps.

  • “You are stuck?” Call to action
    This was one feature that was not successful in the user tests. The main idea of changing the Interaction from navigation to a big CTA after an amount of time was too confusing for the user. So I killed this feature for the MVP but keep it in mind for an optional later.

  • Better visibility for the Navigation
    For a better visibility, I did some color corrections for the map and the navigation items like the arrow and line.

  • New POI Menu
    Adding a Point of Interest or Obstacle was not easy to understand and also uncomfortable for voice control. So I decided to change the architecture and placement of the buttons.

VISUAL DESIGN
Empowering disable people with Route:able

Designed for Simplification

After a few more iterations, I designed the final screens with Figma. I conducted A/B testings during the process to define the design pattern, elements, and colors.

WRAPPING UP

Next Steps

  • Staring to build the account & community section.

  • Adjust User Experience by more testing

  • Polish UI and A/B testing with disabled users to identify desirable features.

  • Consistency in the UI Toolbox e.g. Icons

  • Starting to implement other obstacles

  • Design System for a overall consistency

What I learned

  • With this really specific User-base, you need good UX research and how important is to emphasize with a group if you have no connection to it or their needs.

  • Starting from scratch can be an enlightening experience, but nonetheless, it requires time and a clear vision of what can be done in a certain time.

  • The learning curve for this project was massive, but it was worth it. I learned so much about usability and accessibility that I can say it was a big benefit for future projects. And the biggest key learning for me personally was creating a user experience in a navigation environment where I can transfer a good skillset in the user experience for Cars, Navigation, or any kind of concept that is using a Map.