City Maas — Ux Case Study

Elena Lo Piccolo
5 min readNov 16, 2018

People with disabilities face constant struggles on a daily basis. This can often lead to them feeling frustrated and isolated. This is especially true when it comes to travel and getting around from place to place.

Accessibility and inclusion are often not sufficient for a persons’ unique needs and they can frequently find themselves stranded.

Together with the UI team we proposed to create an application that puts the unique needs of all persons first and considers individual requirements. In this way people will feel empowered to do the things that they couldn’t do before.

What is the primary purpose of our application?


For City Maas App we had to focus on people with visual and motor impairment, keeping that in mind, our first step in this project was to identify our core users and understand their specific needs and requirements.

Contextual Inquiry

During the research phase I’ve travelled from Bond Street to London Bridge with Rob, a wheelchair user with motor impairment, to better understand users needs whilst moving around the City.

One of our journey included travelling by taxi: surprisingly we had to let pass three of them before finally boarding one, because no one wanted to pull out the ramp.

“The journey by taxi was the least efficient to my needs. It was too expensive, too cramped and too difficult to get in and out of.

User Personas

User Personas — John, wheelchair user


Storyboard — John starts his travel with City Maas

As a wheelchair user John would like to travel from home to visit attraction site in London. Travelling around the city is overwhelming and factors like traffic and works on the go cause him to plan is journey in advance.

He found support in City Maas, working with AI it provides optimal options that incorporates all modes of transportation and allow him to book and pay for the various different form of transportation such as trains, tubs, taxis or buses within one app and on demand.

Storyboard — John arrives at destination

John would like to have real time information on the availability of wheelchair accessible spaces, facilities rating and call for assistance at his fingertips.

City Maas app provides all the necessary information that is relevant to his needs based on his profile and provides functionalities enable him to just go from A to B without having to go to another app or another point of contact.

UI sketches and wireframes

UI sketches

The app will be supported by a friendly interface managed by the AI: it will provide constant support to the user needs, like saving preferred routes and giving live updates in case of changes during the travel.

We decided to give main power to the AI: it will adapt automatically based on user needs, without taking away user freedom.

What changed from the beginning?

Wireframes evolution — microphone evolution

During the preliminary stages of the design phase we thought to give the user simple prompts inside the app to make it accessible for everyone.

That’s why we integrated a microphone on the landing page in the paper sketches. After reviewing it and with additional research we realised this was too unrealistic.

First of all it didn’t take in consideration people with other needs (like cognitive or motor impairment that didn’t need it).

Secondly, it needed more development in case of people with visual impairment.

Voice Control options

So we moved on realising wireframes with switch to activate it depending on the needs. Still this wasn’t a good solution because it was easy for people with visual issues missing this out.

That’s why we decided to give a complete section of the to the voice control allowing the user to choose during the log in process if having it or not.

An element that didn’t changed and that we considered vital is the emergency button at the very top. This will give the user the possibility to call predefined numbers (from the settings) in any moment during the travel giving to the them vital support when needed.

You can find the wireframe’s prototype that I’ve realised for the Visual interface on this link:

New brand and UI elements

Reading and navigation can be confusing at the best of times so the UI team chose to make the style of the elements focused around being informative and as clear as possible.

This would allow people of all visual and cognitive capabilities the opportunity to navigate their way through potentially complex situations and scenarios. Things like highlighting the most important aspects of a particular instruction with larger text would guide you to the most essential information.

The UI final art direction empowers and enables users to travel without hindrance and assists them in navigating their travel routes.

‘Informative but not confusing. Confident but not brash. Helpful but not condescending.’

Invision Prototype

Next steps

  • Additional testing with users are needed before the final launch of the App;
  • Payment options will change based on further collaboration;
  • Further studies need to be conducted for disable people with other conditions that don’t apply visual and motor impairment.
Elena Lo Piccolo