Case study: Designing “Uber for ambulance”
By: Isaac Somto
Tags: UI Design, Uber, Healthtech, Emergency, Case Study

Product Overview

Aider is an app that allows people to take charge of emergency situations and save lives by allowing them to order an ambulance, offer directions to hospitals nearby, talk to doctors and more. You will find out more; why and how aider does this as you stay with me.

The app is a personal project of mine. I carried out the user experience research myself and worked on the app’s user interface based on decisions gotten from the research phase. It wasn’t easy designing an app that targets a huge number of audience but with a series of trials and moving of pixels on Figma and adobe illustrator backed by good user experience research, I achieved it.

The challenge with regards to emergency situations

In 2017, just before I left high school, we had an inter-house sport where a mate suffered an head injury. He kicked the bucket because there was no ambulance to rush him to a good hospital. Some years ago in Nigeria’s capital city, Abuja, 3 three young teens set out to write exams and they suffered an accident. There were a good number of samaritans around but no good vehicles to transport them to a nearby hospital, they all lost their lives.

A BBC investigation reveals that seriously ill patients wait more than an hour for an ambulance. Aider is a solution to situations like these and more. The human brain wants to make decisions and take actions during emergencies, Aider works on this to save lives. But how?

Aider allows users to see hospitals nearby (and shows hospitals with available ambulances)

Aider allows users to order ambulances to their current location

Aider allows users to send a SOS message (containing the user’s current location) to loved ones.

Aider teaches users first aid tips. Users receive a random first aid tip as a notification (user sets time for this).

With aider users can buy first aid kits and medical items from the app store.

Aider allows users to speak to a medical professional during emergency situations.

With the solutions the app was offering, the audience of the app is definitely a wide one. From a barely tech-literate hawking on the street of Lagos to a very tech-literate Gen Z in college. This made the task a bit difficult but I will walk you through the process of how I designed an app that saves lives.

Understanding emergency situations and response

Before jumping into Figma, I started the project with a research phase. Having experienced emergency situations myself, I knew what I wish I could do during those situations but my experience wasn’t enough. I needed to be sure that there was a problem that aider was going to solve because this will enable me to know features to be thrown in the bin and features to bring onboard.

I started with a lot of desktop research before moving to in-person interviews. I interviewed just thirteen(13) people for the research but the insights I got was very great because I made sure to carry out a diverse interview process. The in-person interview process saw me interviewing three marketers in a Nigerian rural market in Abuja, five high school students(who wanted to jump on the project on hearing the brief, lol) and five working class millennials. I took a pen and a book, sketching features and asking them their opinion about the feature idea and look.

After in-person’s interviews, I looked at other emergency apps out there. I also took a look at the research backing them and compared it with my own research. I will be adding some screenshots from the app and explaining the reason behind the user interface layout.

Interesting findings

During the in-person research phase, I found out that if there should be an app for just emergency use only, it won’t be in a lot of people’s smartphones. This made me go back to the drawing board to also include a web app and an app for smartwatches that people can visit during these emergency situations.

The web app and smartwatch version will have limited features. The web app will have the app’s main feature (order ambulance and know hospitals around), a section for people to learn first aid tips and a first aid kit store. The smartwatch will only have the sos message feature and app’s main feature. The smartwatch sos feature will only work when connected to a phone.

This finding shaped the design of the onboarding screen too, looking at the screens below, you will find the “skip” option which allows users skip the onboarding screens and its info, but I want users to know at least a bit of what they can do with the app so on the login/signup screen, I included some info and even though users choose to skip the onboarding, they will still read this info.

Key decisions made backed by research phase

Homepage layout

It is no doubt that almost everyone within the app’s audience target has held and used a tv remote. At first I designed something looking very much like a remote but it didn’t work as I intended, this took me back to the drawing board and I came up with something similar that works. The wide emergency red button, the first aid kits guides button and the send sos message button design was inspired by the design of remotes. I took the prototype to some of the people involved in the research phase (homepage was without the talk to doctor and store features) and they knew exactly how to use it without me saying anything. One of the barely tech-literate marketers actually did say that the “click button below during emergencies.” info above the red button helped. This feedback also shaped more design decisions.

Menus, icons and interactions

Backed by the first feedback, I used icons that can be easily recognized and also attached words to most of the icons so the users knows the function of what they are clicking. I added some info within the app so as to make it very easy to use for everyone within the app’s target audience to use. You can find one of such info on the map screen.

I made the buttons big to ensure that they are finger-friendly and to reduce the chances of users mistyping or misclicking.

I also didn’t make use of hamburger menus because some group of people in the target audience won’t know how to use it and it is hard to reach compared to the bottom menu used. Bottom menus also helps a new app retain users because it shows the features of the app immediately.

In the app, I made the users in control of everything and even when the app makes a decision for them, the app still gives them control. A case scenario, when a user wants to book an ambulance, the app automatically orders the closest to the user’s location but the user can cancel this and select another ambulance dispatch for reasons best known to them.

Visual elements

As a brand identity designer, I also handled the design of the app’s logo and worked on coming up with colors for the app. I used red as one of the brand’s primary colors because of its use in the medical and emergency field and also because of the fact that red provokes the strongest emotions of any color. I also added orange as a primary color too since yellow is energetic and is often used to draw attention.

Project learnings and takeaways

One important thing I learnt is that when designing for a wide target audience, you don’t sacrifice features because of one target audience over another, you instead find a balance. The aider app is easily understood by all of its target audience and still looks good.

Secondly, the importance of research can not be overemphasized. The app’s initial idea was just to be an app that people can use to order ambulances during emergency situations, but the research phase revealed that most people won’t keep the app if it did just that so more features were introduced.

I look forward to the implementation and testing of the app’s design. It is a project I am passionate about and seeing it come to life will be beautiful to watch, I will also want to validate my research with a very large audience during the testing.

Here’s a presentation of the app on Behance.

Below is a video showing the app’s prototype: