Project Overview

This is an heuristic evaluation of an app that’s been developed to assist bystanders after an explosion, terror attack or other emergency. The app is an initiative of a Queen Elizabeth Hospital Birmingham Charity called CitizenAid, which is a group made up of civilian and military clinicians who want to improve public resilience. You can read more about the group and learn more for yourself at The organisation's motto is 'Be prepared, not scared'. 

UX Methodology

This is an exercise in extreme UX, looking at an example of users trying to navigate their way around a small screen when they're  under pressure. 

Methods: Heuristic Analysis, User Flows, User Stories, Job Story, Feature Prioritisation, Navigation Scheme, Semantic Differential, Sketches, Wireframes

Heuristic Analysis

It's difficult to test an app likes this with users in a simulation emergency. However a heuristic analysis is a good start for corrective measures that will likely help users. 

I went through each screen of the app through the various possible user flows. The example below shows guidance for a user to report an incident of a knife attacker, my notes in green.

Job Story

I worked through the jobs-to-be-done process and questions for the primary user goal. I found that the simplicity of a job story helped to set the tone of the UI and reconfigure the navigation:

When there's been an explosion, I want to know what to do so I can help people and minimise the damage to casualties and to myself. 


I organised the navigation into three main functions - Threat, Treat, and ACT Control (Assess, Communicate, Triage). This enables the user to go through the main user flows from every screen, rather than panicking and potentially fumbling their way around in a scary scenario. I also added clear left or right arrows and incorporated the Suspected Bomb and Exploded Bomb into the same screen. 

Home Screen

I redesigned the home screen to enable the user to navigate to Treat, Threat or ACT Control straight away. The 'Run, Hide, Tell' message is stated clearly, and the Treat and Tell (Communicate) have been turned into buttons with clearer 3D affordances.


The icons for the three main functions have text underneath but need to be large and rather self-explanatory, so panicked users don't feel like they're wasting time or become frustrated. The ACT acronym is broken into words throughout the app and explained in the informative section, to encourage user familiarity with the order of actions encouraged. The Threat icon is to be similar to the well-known symbol for danger of the crossbones. A skull would be too much in this instance. 

The Treat icon represents a first aid symbol that I came up with. It incorporates both a Red Cross and Red Crescent symbol to be inclusive, the heart being a symbol of love and life. The navigation footer is shown below.  


I sketched low-fidelity screens in pen and paper based on the new navigation scheme, iterating to black and white wireframes in Sketch. 


The white space defines the hierarchy of information that the user needs, with clear affordances in the arrows and sticky header and footer bars. The information hierarchy of first aid treatment, threats, and the Control - Act, Communicate and Triage will be clearer.  

User Flows

The screens below show the new way to navigate through the app when there's been an explosion and the user has come across someone who isn't breathing.