Smart24 | A UX Design Case Study

Redesigning an app to help 'danger as default' travellers stay safe in the world's most hostile places

The my status screen of the redesigned Smart24 app

Project Overview

Summary

Track 24's Smart24 app helps corporate travellers stay safe in some of the world's most hostile places through location tracking and interaction with their security team. Track24 asked us to provide consultancy for them, focusing on incorporating a new feature within the app to help users feel safe, prepared and reassured.

My role

My role was to be the group facilitator for our four person team, guiding the group through the two week sprint, from the initial client meeting to the final presentation of the design, leading meetings and design workshops with the client. We followed the British Design Council's Double Diamond process with its four phases: Discover, Define, Develop, Deliver.

Key deliverables

A number of deliverables were required for the project, including:

Results

The new design of the app provides users with the ability to:

The Track24 logo.

Design Process

Competitive analysis

Upon starting the sprint and gaining an understanding of our client — Track 24 — and what their key aims and requirements were, we conducted a competitive analysis in order to understand the competition. Competitors included both similar security focused tracking apps, such as Everbridge, Anvil and Vismo, and consumer tracking and mapping apps, such as Life360 and Google Maps, and we found the varying methods of adding custom locations particularly interesting.

The logos of 8 different competitors
Our competitive analysis included both similar security focused tracking apps (top row) and consumer tracking and mapping apps (bottom row).

We also conducted a usability audit of the existing Smart24 app, which highlighted some areas for improvement.

User Research

Our user research was arguably the most important phase in the whole design sprint, as the subsequent design was based on this. We conducted interviews with twelve users; these were both users of the Smart24 app itself and users of the GRID — the web-based platform used by security teams who monitored the users of the app. The interviewed users were located around the world, varying from the UK and US, to Iraq, Ethiopia, Somalia, Kenya and Uganda.

Three photos of myself, Georgi and Lucie conducting interviews.
From left to right, myself, Georgi and Lucie conducting interviews — although some were in person, most were via video call or phone.

Identifying themes and pain points

Our qualitative research highlighted a significant amount of data, which we made sense of using a large affinity map. This not only enabled us to clearly see how the app was used and what the key user requirements were, but also allowed us to identify some pain points for users, which I will highlight below.

Two photos of our team working together on creating the affinity map of our research, covering an entire wall with post-it notes.
Our team working on the affinity map of our research.

User types & behaviours

From our interviews it became apparent that users of the app fit into two separate groups, each with a different set of associated behaviours and requirements.

  1. Transient users who tend to stay in high risk areas on a short term basis and who are more vigilant about security protocol, and therefore have high levels of interaction with the app.
  2. Permanent users who live and work in high risk areas for long periods of time, often becoming more complacent about security protocol. These users are more likely to forget to check-in with their security teams or turn on their tracking, with resistance sometimes being shown towards using a tracking app owing to concerns over privacy.

Key themes

Overall, we identified three key themes from our interviews.

Tracking — the primary use of the app was as a tracking device, with users feeling reassured by having the app. However, users often forgot to turn tracking on and off within the app and some raised concerns about privacy.

"I want to be able to set it and forget it"

"It's great that I always know my security team knows where I am"

Check-in — only a small minority of users used the in-app check-in feature, with the vast majority using WhatsApp instead, primarily owing to the pervasiveness of the app, the fact it is secure and can have everyone required in a group chat, including those without access to the GRID or Smart24.

"We use WhatsApp to check-in - everyone's in a group"

The emergency button — users found the current button too small and tricky to activate and were also concerned about setting off the emergency button accidentally with the 'shake to activate' feature.

"We ask users to turn the shake setting off - it's too easy to set off"

Staying focused on the user

A portrait photo of Roger, our persona.
Our persona — Roger, a photojournalist based in Kinshasa, DRC.

From our research, we created the persona of Roger and mapped his current experience, which highlighted a couple of pain points.

"It's very easy for me to forget my check-ins if I'm in a rush."

As you can see in the experience map below, these pain points were a result of Roger forgetting to check-in or forgetting to turn his tracking on.

Roger's experience map showing his emotions as he carries out different tasks during the day.
Roger's experience map, showing his pain points.

With the time available very limited, we also took the opportunity to conduct a feature prioritisation analysis at this point, to ensure our design was focused on the key user requirements. The top 3 features identified were as follows:

  1. Automated check-in and check-out based on user created geo-fences was something that would directly help a number of the user's current pain points.
  2. Improving the emergency button could be improved relatively swiftly and could be a 'quick win' for the user.
  3. Improving alerts and notifications both within the app and elsewhere within iOS would allow the user to know at all times what the app was doing, including automatically on their behalf, whilst also allowing them a place to refer to past notifications, helping to reassure users and make them feel more safe and secure.

Defining our principles

Before moving further, we defined our design principles that would underpin our future activity:

  1. Reduce the burden on the user with our users being 'danger by default', they are located in high risk environments where their primary focus is on doing their job, rather than ensuring their personal safety. If the app is able to reduce the burden on the user, it will allow them to stay safe whilst maintaining focus on their job.
  2. Privacy by design with the primary nature of the app being personnel tracking, privacy is hugely important in all aspects of the design.
  3. Rapid access to key functions of the app is crucial in keeping them safe whilst enabling them to effectively go about their core business.

Design studio

Following the feature prioritisation, we conducted a design studio workshop with our clients at their offices. For the workshop, we focused on a scenario relating to safe places.

Sam, Georgi and Adrian discussing ideas during the design studio.
Sam, Georgi and Adrian discussing initial ideas during the design studio.

This was a really valuable session as it allowed us to bring our clients' ideas directly into the design whilst simultaneously ensuring that our clients were onboard with the direction we were moving in. This gave them more ownership on the process and allowed any unforeseen issues to be resolved at this stage, saving money and time in the long-run.

Charlie and Sam from Track24 discussing ideas during the design studio.
Charlie and Sam from Track24 during the design studio.

The output from the design studio was that we were able to fully realise the notion of 'safe places' and how they would work. In particular, that they would be personalised geo-fenced areas created by the user, where crossing into or out of the area would trigger automated actions.

Not only would this resolve some of the previous fears regarding privacy issues, but it would also be more beneficial and reliable for the users on the ground and the monitoring teams. Ultimately the burden placed on the user would be significantly reduced.

A photo of some sketches on the whiteboard following the design studio.
Our whiteboard sketches about safe places.

Refining the information architecture

Identifying that we couldn't 'shoehorn' the 'safe places' feature into the existing app without it having a negative affect on the user, we chose to redesign the information architecture of the app. By refining and flattening it, we were able to reduce the burden on the user, making everything visible and easy to find. This was further enhanced through the addition of a tab bar replacing the hamburger menu and heavy use of the back button within the previous version of the app.

An image of the app map.
The refined information architecture of the app as displayed in the app map.

Improving rapidly

Once we had our basic site structure and had mapped this out — and the corresponding user and wire flows — we created a paper-prototype to rapidly test the viability of our initial designs through usability testing. We developed these into mid- and then high-fidelity designs on the basis of multiple rounds of user-feedback, refining and improving the design as we went. Track24's existing style guide was used as the basis of the final design in relation to typography and colour-scheme.

A screenshot of part of Track24's style guide showing the typography to be used.
A screenshot of part of Track24's style guide showing the typography to be used.

In the images below, you can see some of these iterations and how the design changed from the initial paper-prototypes to the final high-fidelity mockup.

The status page

On the status page — this is the primary screen that the user interacts with — the changes included:

Three pictures of the my status screen, showing the development and improvement of the app over time.
Iterations of 'my status' (paper-prototype on left with final mockup on right). Key changes are highlighted in the red boxes.

Safe places

On the newly added safe places page, changes included:

Three pictures of the safe places screen, showing the development and improvement of the app over time.
Iterations of 'safe places' (paper-prototype on left with final mockup on right). Key changes are highlighted in the red boxes.

Inbox

Within the new 'inbox' page, changes included:

Three pictures of the inbox screen, showing the development and improvement of the app over time.
Iterations of 'inbox' (paper-prototype on left with final mockup on right). Key changes are highlighted in the red boxes.

Solution

The design process described above resulted in a high-fidelity prototype of the app made using Sketch and animated in Flinto. Some of the key flows of the app are shown in the GIFs below.

An animation of the manual check-in flow.

This shows the manual check-in flow within the My Status screen.

An animation of the flow for activating an emergency.

This shows the flow for activating an emergency.

An animation of the flow for adding a safe place.

This shows the flow for adding a safe place.

An animation of the Inbox screen.

This shows the Inbox including the differences between the different types of messages.

An animation of the settings screen.

This final GIF shows the revamped settings page where the real challenge we had was reducing the copy to the minimum amount whilst users still understanding the functionality and impact of a particular setting.


Outcome

The re-designed Smart24 app was received very positively by the Track24 team.

"Thank you for the creative, original and implementable proposals you presented to us."

"In addition to conducting effective and original user research on a new concept called Safe Places, they also presented a critique of the information architecture of our mobile app Smart24, presenting some workable and idiomatic design improvements, and showing how the new feature could live along side and enhance the existing features.

Another highlight was the fact they explored, for the first time in our app, the use of animation to give better explanations and sense of continuity during user flows, using the tool Flinto, which was used to present the high-fidelity prototypes." Sam — Track24

Future recommendations

Moving forward, recommendations for the future of the Smart24 app include: