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

Transcription

1 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 1 of 9

2 2.) Persona Sam helping people in first line, with my whole work I can do! 30 years old, married, no child. In job fist 3 years he works as mechanics, after that he completed an apprenticeship as a firefighter. fireman & first machinist - 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! 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. - 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 Page 2 of 9

3 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? 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 Daily pump check? How long since the last main pump checkup? I can only get this Info in chief s office and his IT Must ask chief, to get the information s. Hm, alert for Truck 42 & Chief: Open an elevator, this will take serval time Okay, I ve got the device list. Okay, checkup time for pump 2 expires Alert! Fire at Frank s bakery Need a date on central garage for full pump check, must go to chief again Chief s meeting at fire station 3, chief isn t available again Fine, appointment with central garage should go Wednesday or Friday! Wednesday? Let s have a loot to Roster at the black board Friday I ll work, let s make the appointment Fine, appointment for pump check Friday 9am, it works Couldn t inform them me earlier Actions What actions and activities does the Persona take while going thru the journey to achieve their goal? Look at my locker Go to vehicle hall Check Fire Truck 23 Doing daily pump check Go to chief s office Check equipment data in Chiefs IT Wait Check Device List Interrupt working Firefighting Going to chief s office. Wait Ask for appointment Check Roster Make an appointment Update my appointments Touch points My Locker Fire chiefs office Fire chief Fire chiefs office What touch points does the Persona have? (Tools, channels, devices, conversations, and so on.) Leutnant of Fire Truck 44 Fire Truck 44 Fire chief s IT- System Device List My Leutnant Fire Truck 44 Fire chief Fire chief s IT- System Technical Staff at central garage Roster Confirmati on Pain Points Important moments Page 3 of 9

4 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: Roster and overview of my appointment s Today: Page 4 of 9

5 Equipmentlist of current vehicle: Today s staff on current vehicle: Page 5 of 9

6 Mobile view: 6.) Study You can find the study at this link: Page 6 of 9

7 7.) SAP WebIDE App Navigation According to the description of Mockup the User has the opportunity to switch between the Masterand 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 7 of 9

8 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 8 of 9

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). Page 9 of 9