Queensland Police

QPS

The Queensland Police Service (QPS) is the principal law enforcement agency responsible for policing the Australian state of Queensland. In 1990, the Queensland Police Force has officially renamed the Queensland Police Service and the old motto of “Firmness with Courtesy” was changed to “With Honour We Serve”.

🎨 I'm designing for 11k Police Officers in Queensland.

Brief

QPS has been trying to digitalise its workforce to streamline services and information. They use different systems to enable them to work together with various departments. Their iPad app enables them to carry out their duties while saving time.

The project aimed to redesign their app to make officers more efficient and collaborative. My part was to help create a design system that allowed their app to grow as more features were added and one that worked on multiple devices and screen sizes.

 

Outcome

Qde.

Here is how we did it 👇

Design

I was involved in the user research: collecting information from the Police Officers that were in the field and analysing how the current system worked, mapping out the different areas and identifying areas for improvement. I helped create the foundations of the design system and did many lo-fi and hi-fi concepts.

Research

We run some field research sessions with police officers to observe and understand the conditions of their work and the difficulties they face. Using our clipboards, we noted down their experiences in the field and when they got back to the police station.

We categorised their work into two different sections:

  1. In the field: our users are note-taking, trying down incidents that happen, and many other things. They were moving around or in a car with their devices and had higher stress levels.
  2. At the office: our users used this time to finish writing their reports and were mainly on the computer. Limited movement and had lower levels of stress.

We used these observations to combine them with the surveys we sent out to understand their current landscapes better. What were the pain points they went through as they were trying to do their jobs? How might we reduce those pain points with effective soutions through their technological touchpoints?

Branding workshop

I ran a brand and visual workshop to better understand what Officers thought of the QPS, what it meant to them and how they felt about it. We also ran through a visual DNA exercise to help us figure out where they thought the visual language of the new app should be. I split the workshop into five different exercises:

01. Principles – the what and why?
02. Brands that inspire you
03. What QPS mean to you?
04. Visual DNA
05. The Good, the Bad and the Ugly
06. Next Gen

Numbers

Using numbers as one of the fundamental building blocks for designing a system makes design decisions more straightforward and allows for consistency. I used a mixture of Apple’s font sizes from their Typography page on their HIG website. I tried to provide the design system with enough size variation to provide optimum contrast and hierarchy. The space scale provides designers with the necessary numbers for horizontal and vertical spacing. I used multiples of 6 as the number renders better on iOS devices.

qps-number-system

Colours

I wanted to use their primary colour with tints rather than secondary or ascent colours. I wanted to introduce functional colours to help our users differentiate between go, warning, and stop and enhances the experience for reactive purposes.

qps-colours

Accessibility

Analysing the effects of colours is a vital part of our design system. It ensures that users can read, understand and take the appropriate decisions. As part of this accessibility exercise, I looked at each set of primary and ascent colours that responded in light and dark modes.

qps-colours-accessibility

Typography

I focused on creating a nominal scale so that the relationship of size is focused on the heading tag (e.g. H1) but on hierarchy, visual language, contrast ratio, and other factors that tie into the copy/content.

I used the standard typeface on all modern iOS devices. This font has two variations for different purposes. San Francisco or SF is a font created by Apple to help increase legibility between devices. SF Pro Display is a dynamic font. It will switch between Pro Display and Display Text fonts based on the size.

qps-typography-scale

UX floors

I paid special attention to the information hierarchy in this project.  It is essential to define where information is accessed and why elements are on a given floor – this helps build hierarchy and orientation, allowing the user to feel more comfortable with how the system works.

ww-ground-floor-diagram

Ground Floor

This floor is where most of the information and interactions occur. This floor can use the full screen of the device.

  • Primary tasks
  • Multiple tasks
  • Navigation
  • Back and forth
  • Up a floor (open)
ww-first-floor-diagram

First Floor

This floor handles the micro-interactions and information offloading so that there isn’t too much information and noise on the ground floor. This floor can use the entire screen of the device.

  • Secondary tasks
  • Singular tasks
  • Navigation
  • Back and forth
  • Down a floor (close only)
ww-second-floor-diagram

Second Floor

This floor handles high-level information such as notifications. This floor can use only 1/5 of the screen real estate of the device.

  • Information/data only
  • No navigation
  • No back and forth
  • Down a floor (close only)

UX Stress

A lens camera is a great way to think about and plan for dealing with stress. The intention is to align a visual noise (the number of elements/interactions on screen at a given time) axis to the stress axis (the level of stress they're undergoing). This approach helps us build experiences that reduce cognitive friction during critical moments of our user's job.

In this example, we define these levels of depth through the number of choices and visual elements on the screen at any given time. As the user is under more stress, we reduce the number of choices they have to make. But each project might have different elements used to determine this visual noise axis and have other requirements for what the stress axis needs to be.

qps-stress-levels

Ongoing

This project is still ongoing and I cannot release any information regarding this.

About

Team size

3 Designers
2 Engineer Leads
1 Engineering team

Role

Design Lead
Design Systems Lead
Researcher

Software

Sketch
Google Apps