ALL PROJECTS
UI/UX DESIGN
MOTION DESIGN
INSTALLATION
ABOUT

Flight Safety Redesign
UX / UI Design

flight safety_baner.png

Project by Apps with love AG

Designer Tin Nguyen

Designer Stefan Spieler

Project Manager Martin Moser

App Store

Flight Safety App

Client

Swiss Air Force

My Role

Research / Redesign Proposal / Wireframes / Prototyping / Micro Animation / UI Design

Tools

Sketch / Flinto / InDesign / Illustrator

Timeline

3 months (in progress)

Overview

Swiss Air Force

The Swiss Air Force understands flight safety as a continuous process with which the risk of injury or property damage is reduced to an accepted level and can be maintained there. The Aviation Safety Organisational Unit supports those responsible in their decision-making. 

App description

With the Flight Safety App of the Swiss Air Force, you have the opportunity to easily and compactly retrieve official information, video contributions and images from the field of flight safety via your smartphone. With the integrated news function, the workforce can be served with unclassified but flight safety-relevant information without delay.

Discover

In order to understand the client's vision, tasks and goals, our interdisciplinary team gathered together to discuss and meet our client in a first workshop. We researched in advance and clarified the client's pain points with the existing app and set a requirement for this project. 

awl.jpg

Goal & Challenge

The user base for this project consists of people in the army, specifically the swiss air force. The main requirements were a redesign, an easy to follow and intuitive user flow for a confirmation, authentication, presetting and a incident report as a form on the mobile version - which only exists on the desktop version.

Flight Safety App needed to be easily understadable by people within the air force without any specific knowledge regarding the desktop version. Since I worked at Apps with live to the end of the year - the project might still be in process.

Define

1. User do not have an option on the mobile version to confirm and check their credentials after registration.

2. As part of the Onboarding - user should be able to presett their functions and preferences.

3. An new incident report form should be designed for the app - only desktop version avaiable

4. Update UI Design

flightsafety old authentication 1.png
flightsafety old authentication 2.png
flightsafety old authentication 3.png
flightsafety_form old.png

Ideate & Prototype

After defining the pain points and setting the goal - a moodboard, sketches, wireframes, user flows and a prototype were finalized. For presentation purposes, only a part is shown.

User Flow - Confirmation and Presetting

- Splash Screen for transitions

- Confirm authentication and check credentials after registration

- Set up a new password

- Presetting: function and air force

- Welcome Screen

confirmation 2.png

User Flow - Form (Incident Report)

- the report incident form can be found on the menu setting

- Report incident form include three options:

ASR / MSR / RISK

- the form is optimized for the mobile version - for usage in every situation

Air Safety Report (ASR):

It serves to record all special incidents and security gaps in flight operations. It applies to all aircrews, UAS crews of the LW and the parachute reconnaissance aircraft of the KSK as well as to the managers of the flight operations.

Maintenance Safety Report:

It serves to record all special incidents and security gaps in flight operations. It applies to all LW employees who are commissioned with the provision and operation, repair, maintenance and engineering of aircraft.

RISK:

The RISK Report is used to detect safety deficiencies that occur during flight operations (in flight or on the ground).

flightsafety_form.png

Prototype & Test

I created a runthrough version of the application in Flinto to showcase the client each screen.

I also animated micro interactions on how each function or transition might work for the client.

Runthrough

Redesign

Color

Based on their CI/CD - we used blue as the primary colour instead of red and set an overall minimalistic and clean interface look.

 

Font

SF Pro Family

Icons

new icons according to new functions and overall look

Components

uniform and updated components 

01 Safety Publications Overview.png
02 Safety Publication Detail.png
04 Emergency.png
03 Create ASR Form.png