City Aide — A UX/UI Case Study

A navigation app that considers accessibility for all users.

The Brief:

Intro:

Technology has evolved to a point where people have access to endless and unlimited opportunities. Unfortunately it doesn’t always include access for everyone, such as the visually impaired or the hard of hearing. Accessibility in technology needs to consider all needs of all people.

We propose to create an application that puts the unique needs of all persons first and considers everyones 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?

‘TO ALLOW PEOPLE OF ALL CONDITIONS THE FREEDOM OF CARE FREE TRAVEL’

The Team:

UI: Jimmy Hay, Kate Tsurik

Tools Used:

UX

Contextual Enquiry

Survey Affinity Diagram

User Persona

Storyboard

  • Using an app like CityMaas would allow him to plan his whole journey from A-B with detailed information specific to his requirements.
  • Allow him to book and pay for his entire journey before he sets off all from 1 application.
  • He would like to have real-time updated information sent to the app on the availability of wheelchair access throughout his entire journey.
  • He would like to be able to call for assistance at any time directly from the app.

User Flow

Low-fi Prototypes

Mid-fi Prototypes

UI

Moods

Style Tile

Typography

Colours

Layout

A tricky part of the design was finding out the most concise way to accommodate the live update prompts and step by step instructions all on the same page. Because it was such a large amount of information required I had to place these items into sliding trays that would be accessible when the user required them. I feel like there might have been a more elegant solution to discover had I had a bit more time to explore other options.

The client had requested that there must always be an S.O.S button present that is visible on all screens throughout the app. This was so that the user would be able to access assistance at a moments notice should they find themselves in any difficulty. From a UI perspective, this proved slightly tricky to accommodate into the layout because it needed to be clearly visible, but not obscure the main content in view. I tried a few different options for placement of the button and different colour options. We ended up choosing the top right corner and went with the light blue colour. This meant that it was always visible and stood out, but didn’t get in the way of any of the main content.

The sizes of the buttons and interactive elements was something that we had to consider. Apple’s Human Interface Guidelines recommends that all touch targets are at least 44pt x 44pt. Because our users could have visual or motor impairments, we decided to make our buttons much larger so that they were easier to read, easier to use and there was less chance of pressing buttons by mistake. The iconography that we used was bold, clear and easy to understand. Any icons that we used were always combined with a text description to avoid any confusion that a user might have with the meaning behind an icon.

Branding

Style Guide

Final Thoughts

  • We had some issues earlier on in the project when we were trying to decide on the user journey and what path would be best. We came up with some interesting ideas but I think some of these ultimately ended up complicating the project more so than it needed to be, especially since we only had to deliver an MVP. In the future I think I would push to ensure that we concentrate on the main, essential features of what is important to the end user and save the extra ideas for later development.
  • Overall, I am happy with the final outcome of the project and I feel I learnt so much by working on a real client brief. It would be really great to have more time to work on this and perhaps run a few more iterations of the design process so that we could test some of our assumptions and get some feedback from real users.

Functional Prototype

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store