Track24: a UX Case Study

Hélène O'Brien
Jan 5, 2018 · 9 min read

SearchLight, an app that helps organisations to locate and assist individuals involved in crisis situations.

Reading time: 9 minutes

Methods: user interviews, contextual enquiry, affinity mapping, design studio, user flow, experience mapping, paper prototyping, wire frames, usability testing, digital prototyping.

Tools: Sketch, Omnigraffle, InVision, pen and paper.

INTRODUCTION

Hello and thank you for reading my post on Medium! I’m glad to introduce a client project that I have been working on for Track24.

Track24 have been experts in global tracking services since 2004, providing real-time location data and alerts to governments, NGOs, multinational companies and the media.

My client’s product SearchLight helps organisations to locate and assist individuals involved in crisis situations as they go about their work - while respecting their location privacy.

For this three week project, I had the pleasure of working with two other colleagues.

We were tasked with reviewing and revamping the SearchLight app in order for the product to be rolled out on a larger scale, driving wider adoption by employees at major corporations.

As part of this, we received a full brief including problem to solve, must-have features and key deliverables.

THE PROCESS

1. Discover

Current App Testing

In the discovery phase, the first thing we needed to do was to test the current existing app to understand what works and what does not. In doing so, we identified the three main issues above.

User Interviews

Through our screening survey we recruited over a dozen users from coordinator and user groups in order to understand their thought process.

We also selected interviewees who had been involved in crisis situations to collect the most relevant insights possible.

Users’ Quotes

Knowing what to do calms me down, not knowing what to do makes me panic”

“I would not have an issue sharing my location with my employer if it’s for my own benefit

“To keep informed, I try to get as much info as possible via live feeds, i.e. Twitter, BBC News. I trust these platforms and they are quick

Key Findings:

Overall, users want to…

  • understand how the app will benefit them
  • know what they need to do
  • get clear, reliable and trustworthy information at all times

They are also frustrated…

  • by a lack of understanding and control of a situation
  • and don’t want to be alarmed by the app

In the event of an incident, users want to know…

  • Why they are being notified
  • What is the incident about, including severity, scale and nature
  • Where is the incident taking place
  • When did the incident start? Is it ongoing?

Benefits

The new app will…

  • give users a strong understanding of the situation and how it affects them
  • make users feel more prepared and supported in the event of an incident
  • give users relevant and actionable advice, keeping them clearly informed at all times

Key User Groups

From the brief and our conversations with the client, we identified three user groups:

  • The company’s appointed coordinator
  • The safe-by-default employee, unlikely to be involved in crisis situations
  • The in-danger-by-default employee - Anna, who is very likely to be caught in crisis situations

Persona

As our client’s primary goal was to roll out the product on a wider scale, we decided to focus on James as he represents the majority of big corporations’ employees and embodies our users’ pain points, needs and goals.

2. Define

The Problem

When an incident occurs, people are often:

Slow to find out, find it hard to understand the situation and are confused about what to do next when receiving information from multiple disparate sources.

The Solution

A single point of contact where users can be alerted to ongoing incidents as they happen, providing relevant, contextual information and advice based on their proximity to the incident.

The Outcome

As a result, users can be made to feel more prepared and informed in the event of an incident, helping to ensure their safety and reducing potential disruption to them.

3. Develop

Affinity Map

After completing the interviews, we used the affinity map technique to group and label user thoughts including pain points, frustrations, goals and needs.

This allowed us to have a clear picture of our users’ thought process and to begin working towards a solution.

Design Studio

For the design studio exercise, we met with the client and his team (including developer, product manager, UX designer, sales and marketing managers) in order to sketch out very initial designs and agree on what would work and what would not.

Over this session, we focussed on designing one or two screens that would help users understand the situation and its impact on them.

Ideation

On that basis, and as a team of three, we continued ideating and sketching our initial design to address our second challenge: how to provide users with actionable advice and guided directions.

User Journey and Experience Map

User Flows

As we further developed our screens, we incorporated user flows with each square representing a screen.

We opted for two user flows, one representing the screens that users would see if they were close to an incident and one for users who would actually be right in the incident.

This allowed us to check and review that our initial designs made sense and that no screens were missing for our first round of testing.

App Map

We then developed a map for our app, which would illustrate our desire to make a simple, clear and intuitive product particularly given users behaviours would be affected in the event of an incident.

User Testing and Iterations

The first iteration was about the ‘my situation page’:

  • As you can see on the low-fi screen we first tested, there were several different, fonts, font sizes and styles which appeared to be confusing to users. ‘It looks busy and crowded
  • Therefore on our second and third iteration we kept on streamlining our design to help users understand the situation more quickly and efficiently
  • Via user testing we also found out that users wanted to be kept informed from the first screen they saw; we therefore added the latest incident update available so users could have the most recent snapshot of the incident

The second iteration was about giving targeted and relevant advice:

  • On our first design, we had a get help button which was linked to a form (with three questions) designed to help us define the best action to take. We originally had a two-choice button and we quickly realised that users did not want to make a decision and were relying on the app to give them the best option
  • Therefore we introduced the ‘Get away’ button with just two options. Unfortunately, this was still confusing as users did not understand why they had to make a decision
  • With this in mind, we developed the third screen giving just one clear, relevant advice to follow

The third iteration is about the call-to-action, referring to the advice given to users, but also the flexibility for the coordinator to give relevant advice.

  • We therefore introduced two very clear pieces of advice, one for each situation
  • The two buttons highlighted above both link to two different sets of actions: one links to the map and one links to the drop-down menu

This function can be tailored by the coordination team, offering Track24 clients a templated approach that can be amended to match their own risk and safety protocol.

The fourth iteration is about the map:

  • As you can see on the low-fi screen we first tested, we had information and advice on the map screen. However users saw this as unnecessary as they had viewed it on the previous screen. It felt confusing and cluttered to them
  • Hence we decided to remove this from the map to facilitate readability and focus on the action to take

The fifth iteration is again about the map:

  • We first tested with the screens on the left hand side and further to user testing, we found out that users wanted to know more about the route - Is it by foot? How long? From and where to?
  • Therefore we developed a new screen as you see in the middle above

The sixth iteration is about the dialogue and continuity of advice:

  • So from user testing we found out that the dialogue box was not helpful and even disruptive as it was taking users away from the map
  • Also there was no clear next step. “What do I do now?” We therefore added updated advice directly on the map as well as clear dialogue information advising users when they left the danger area

This iteration is about the instant messaging screen, from user testing we found out:

  • First, it wasn’t clear who was talking so we introduced a coordinator’s profile image
  • Navigation was not clear enough, so we incorporated colours that facilitated readability to help users understand conversations more quickly (there wasn’t enough contrast between the text and the background colour)
  • We introduced ‘delivered tick’ icons and also more information on the top of the screen ‘typing’ to clearly show that this is an ‘instant messaging’ function. The tick icon is also a standard in instant messaging apps (very well understood by users)

The last iteration is all about keeping users informed at all times:

As you can see above, we originally had a news feed that would give users the most recent updates on the incident. From user testing, we found out that users also wanted to know about the activity based on their own situation and the correlation with the ongoing incident. We therefore decided to introduce a new feature: my feed.

4. Deliver

Scenarios

Prototype

Please click on the following link to launch the prototype: https://invis.io/TQEOKVFKE

User Feedback

This app is very relevant, it would have been great to have this in light of what happened in Oxford Circus last Friday (24 November 2017)

It’s very clear and obvious what’s happening and that it is important to me

Design Specification

Finally we produced a design specification for our client. The document included:

  • Annotated wireframes
  • Personas
  • User flows
  • UI elements
  • Style guide
Design specification

RECAP

NEXT STEPS

CLIENT’S FEEDBACK

Congratulations to you for your fine and considered work! I look forward to the next steps.Going into this sprint, I felt that because I know something of GA and what it’s about, I had pretty high expectations, but these have been very much exceeded and surpassed by your work. I feel very lucky we got selected to work with you. Mind blown! Will be in touch soon.

BEFORE YOU GO

👏 50 Clap if you enjoyed this article, this will tell me to write more of it!

🤔 Comment if you have something to say

🙂 Click follow Hélène O’Brien to get updates of my recent articles

CONTACT

Email
LinkedIn
Twitter

For more information, please visit: heleneobrien.com

Me in action. From left to right: ideating, interviewing, wireframing, affinity mapping, celebrating our team success, presenting to client.

Hélène O'Brien

Written by

UX Designer with a love of research, prototyping and testing. https://www.linkedin.com/in/heleneobrienux

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade