Page 1 of 9

Build Your Own SAP Fiori App in the Cloud – Fiori UX Development challenge

Fireman’s Fleet App

1.) The Story

This is fireman Sam, he works in one of a serval fire stations in a bigger city. He loves to

help people and his childhood dream was to become firefighter. But before his

apprenticeship as a firefighter, he did an apprenticeship as a mechanic. That’s why, Sam

was well-suited to get an additional role as “First Machinist” at the fire station. In this

role he is responsible for all technical and legally required checks and maintenance of

vehicles and devices at the fire station and to ensure the preparedness to the next use.

As first machinist, Sam has a lot of appointments and further tasks in addition to his roster. At this time Sam

has many different ways to get the information’s and orders about his tasks as machinist. The orders comes

mostly by his chief or lieutenant. He may also be informed by postings at the “Black-Board” and sometimes

by postings at his locker. For his role as machinist, Sam has a lot of resubmissions because the vehicles and

devices at the fire department have many different check and maintenance Periods.

All the Information’s about the Resubmissions and check-up periods are to find at the fire chief’s office, who

also have access to a good and well known IT-System from the city where all these information’s is stored

too. But now here is the problem: The fire chief has an access to the City-IT-System and a PC-workstation,

but not Sam. So it’s very complicated for Sam and also his chief to exchange all the needed information’s. It

can also be imagined, that at a fire station the focus to the work minutely can change. By exchanging

information’s by Paper or postings in case of an emergency, there wasn’t the first post-it that was lost by

this way, which can lead to the trouble that Sam’s important appointments could to get lost and dates could

to be missed.

That’s why I would like to enable Sam as first machinist at his fire station to having a mobile and simple way

to collect his needed information’s and to get an overview on his Schedule, his Roster and additional tasks

and appointments in context of his role at the fire station. He should be supported by managing his fire

truck fleet by using a new tailored and simple and delightful Fiori app, which Sam can use with a mobile

device what is available to him, like a mobile phone or a tablet.

Summary:

- App-Segmentation:

� Fire departments in public or private sector.

- App-Targeting:

� Fireman who are responsible for maintenance and preparedness of the used vehicles and

devices at own the fire station.

- Positioning

� The app will help the fireman who are machinists at a fire station to optimize, collect and

centralize their needed information’s, tasks and appointments at one simply reachable

place to make their work easier, especially if no own fix PC-workplace exists.

Page 2 of 9

2.) Persona

- Do my job as a firefighter - Plan and execute my daily tasks in conform to my roster. - Plan and execute my given tasks from my fire-chief and

lieutenant - Plan and execution my appointments, to check and maintain

vehicles and devices.

- Helping people! - Ensuring that all devices and vehicles work fine in case of

fire or accident! - Ensuring the preparedness of our vehicles, devices and

tools to the next use. - Ensuring that the fire protection will work!

- Very complicated information exchange between me and my chief - Many work interruptions in additional tasks - Many appointments in addition to the normal roster - poor overview of the current tasks and appointments, …let’s have a

look to post-it’s on my locker or the Black-Board

- No own Workplace with PC and City’s IT-Software

Fire-chief, other firefighters, technical

staff, administration staff

…helping people in first line, with my whole work I can do!

fireman & first machinist

Sam

I need a simple and quick overview to my daily tasks, roster, and updates to the check-state of my vehicles d devices for which I am responsible.

30 years old, married, no child. In job fist 3 years he works as mechanics, after that he completed an apprenticeship as a firefighter.

Page 3 of 9

3.) Sam’s User Experience Journey

Duration of journey: 5 hours

Mindset

What is on the Persona’s mind

while taking the actions of their

journey? How do they feel each

step of the journey?

Touch points

What touch points does the

Persona have?

(Tools, channels, devices,

conversations, and so on.)

Actions

What actions and activities

does the Persona take while

going thru the journey to

achieve their goal?

Oops, as post-it

from Lieutenant,

check device status

of Fire Truck 23

Have to take a look

to devices on the

Truck to get an overview…

Look at my locker

Go to vehicle hall

Daily pump check?

How long since the last

main pump checkup?

Leutnant of

Fire Truck 44

Doing daily pump

check…

Go to chief’s office

Hm, alert for Truck 42

& Chief: Open an

elevator, this will

take serval time �

Must ask chief, to get

the information’s….

Alert! Fire at Frank’s

bakery…

Check equipment data

in Chiefs IT

Wait

My Locker

Fire Truck 44

I can only get this Info

in chief’s office and

his IT…

Fire chiefs office

Fire chief’s IT-

System

Fire chief

Okay, I’ve got the

device list…. ☺

Check Device List

Device List

Firefighting

Fire Truck 44

Okay, checkup time

for pump 2 expires…

Interrupt working

Need a date on

central garage for full

pump check, must go

to chief again…

Going to chief’s

office.

Fire chiefs office

Chief’s meeting at fire

station 3, chief isn’t

available again… �

Wait

Fine, appointment

with central garage

should go Wednesday

or Friday☺!

Fire chief My Leutnant

Ask for appointment

Wednesday? Let’s

have a loot to Roster

at the black board…

Check Roster

Fire chief’s IT-

System

Technical Staff at

central garage

Roster Confirmati

on E-Mail

Make an

appointment

Friday I’ll work, let’s

make the

appointment…

Couldn’t inform them

me earlier �

Fine, appointment for

pump check Friday

9am, it works…

Update my

appointments

Pain Points Important moments

Check Fire Truck

23

Page 4 of 9

4.) Point of View

Sam, the Fireman need as first mechanist a way to get a simple and quick overview to his daily task, roster

and update to checkup-state of his vehicles and devices to his responsible car fleet, so he get his work done

without and PC-workplace and unnecessary detours and waiting times to ask his fire chief to collect his

needed information’s and resubmissions.

5.) Mockup – Fireman’s fleet App

You can find the Mockup here:

https://standard.experiencesplash.com/api/projects/a3f509ed2b97c2d60b9db2d6/prototype/snapshot/latest/index.html#/1457250896901_S0/1457250896902_S1

Roster and overview of my

appointment’s Today:

Page 5 of 9

Equipmentlist of current vehicle:

Today’s staff on current vehicle:

Page 6 of 9

Mobile view:

6.) Study

You can find the study at this link:

https://standard.experiencesplash.com/home/projects/a3f509ed2b97c2d60b9db2d6/research/participant/226deb61722f206c0ba35d26

Page 7 of 9

7.) SAP WebIDE App Navigation

According to the description of Mockup the User has the opportunity to switch between the Master- and Detail-Page. Therefor the user has to click on a vehicle at the vehicle-list in the Master-Page, after that on the Detail-Page the selected vehicle will be loaded with the specific detail data:

On The Detail-Page the User can get more Detail-Information about the Equipment to Check-Up,

the complete Equipment List and the Today’s staff. For this the user can click on the buttons at the

Detail-Page, to get the needed information’s:

The User can also accept or reject his input to save the checkup-appointments scheduled to

himself or the garage.

Page 8 of 9

To take a view on his Roster the user can click on the button “MyRoster”. After that a Dialog with

the roster will come up:

8.) SAP WebIDE Implementation

a) Image on the Detail-Page:

On the Detail-Page an Image was added to show a

picture of the current vehicle witch is selected. The

Image-Source will be loaded from a URL saved in the

data source (src={VehicleImage}). To fit the view of the

picture on a mobile phone, the width and height

property are set to 320x140px.

Page 9 of 9

b) Added and customized buttons on the Detail-Page

To switch between the tables “Equipment’s to

check up”, “Equipment List” and “Today’s Staff”,

an additional button for the Staff was added to

the template, also the icons are changed.

c) Additional Field “Location” / colorized & formatted ObjectStatus-Fields / Icon on Master-Page

Beside the icon, an additional Object-Attribute was added was

add to the List-Item at the Master-Page. The Date-Output-Format

of DD.MM.YYYY is implemented by a function dateFormatter() in

formatter.js. In formatter.js there are also two other functions to

control the colorized output of the “Next general maintenance”-

Date and the Vehicle-Status (eg. red text <> at Fire-Station).