Safety app: Prototype & Test

This project summary was originally written as a PDF, for best possible reading experience, please refer to the PDF:

Download PDF


This project was done in december 2018 as part of a course in UX design at Linköping University. The task was to redesign the web page ”Crisis information” by the Swedish authority MSB as a mobile application. This was done through iterative sketching and by designing an interactive prototype which was then user tested. This report covers some of the main concepts that went into the design, the usability problems that came up with testing, and some sketches and thoughts on how these errors could be fixed.

Crisis information

The site ”crisis information” has since this project was done been overhauled. But the main idea with the site is to convey information to people on how to behave to prepare for- and handle various kinds of crises. At the time when this project was done, the sites information arhitecture was quite confusing, so the redesign for mobile also involved a complete revamp of the information architecture.

Design goals

The main idea behind the design was to make it easy and fast to find the information needed. Apart from being just a place where you find some information about a potential crisis, I wanted it to be an app for knowing what to do during a crisis as well. Say, that you have gotten into a car accident and don’t know what to do – refer to the app.


Design brief

Simple navigation

One of the main ideas that went into the design was simplicity in navigation. To make it simple to find relevant information on an appropriate abstraction level.

  1. Main menu, choose beween current emergency and prepare for emergency. Change language if you please.
  2. Crisis type menu. Choose the type of emergency you want to know more about.
  3. Preview information. The user can click above the preview to close it again. Or slide it up to move forward to the full information page.
  4. Full information page.

Calming visuals

An assumption were made, that users using the app may be high in arousal, and as such cognitively inhibited. Because of this I’ve strived for a clean design with minimal distractions and colors that are unlikely perceived as hectic.

Satisfactory interactions

Animations. Directness of interactions. Elements moving in the direction that the user expects (predictability). All of these aspects has been accounted for in the design to make the application satisfactory and modern in use. In the example flow on the right, the lock animates and closes as the user slide their finger to navigate from preview (3) to the full information page (4).


The test

The usability test was conducted on three participants, where the users were tasked with tasks of the kind ”It’s going to be a storm and you need to find out what you can do to prepare, use the application to find out what food might be good to have at home”. The participants were prompted to say out loud what they were thinking as they interacted with the prototype.

The results

The usability test highlighted two key problematic areas of the application.

  1. Lacking affordances for scrolling in the ”crisis type menu”, as well as lacking
    distinct affordances in closing down the ”preview information” state.
  2. Ambiguous terminology, primarily in the choice between ”read about how to act
    upon crises and accidents” and ”read about how to prevent an accident”. When the
    user task was to find out what to do during an accident, all users took the path of
    ”…prevent an accident” – which was the wrong path.


In retrospect

It’s been over a year since I did this project, and while I am overall happy with the design, there are a couple things I would have done differently today.

  1. The ambiguity in terminology is with my current knowledge expected. This is to
    me the most critical fault in the prototype, and I would have made a stronger
    linguistic differention between the main categories.
  2. I would also have made a bigger visual distinction, directing more attention to ”act
    upon a current crisis” by making it bigger and possibly more saturated (although this
    goes againt my ”calm design” ethos that I had in this project). The reason being that
    highly stressed users aren’t likely to take their time to read properly – and may go
    down the wrong path even when the linguistic distinction is good.
  3. WCAG contrasts – I would have altered the color scheme a bit, to better cater for
    users with various degrees of colorblindness.
  4. I would have added the Swedish emergency number in the onboarding, because
    in a real crisis that is really where you should turn first-hand. Not to an application.



Before I started this write-up I was eyeing towards doing a remake of the application with quite a different design language. But then I realised I had put more thought into this project than I assumed, and decided to stick with the original for the portfolio. Here on the right, however, is an early mockup from the ”new design” that I was sketching on. Here, some of the linguistic ambiguity has been solved, and ”acting during crisis” (in yellow) pops out a lot more visually than ”preventing accidents” (grey with yellow text). But gone are the non-intrusive color-scheme. Whether the non-intrusive color scheme actually adds something given the use case is hard to tell without testing.


And then I did two sketches with pencils and paper, highlighting how the problems in navigation could be handled, with the ”preview information” view on the left, and the scrollable ”crisis type menu” on the right, with proper affordances.

Comments (0)

Have no comment.

Leave your thought