Joe s Deliver Center Contribution to the opensap Fiori UX Design & Build Challenge Dr. Michael Umlauff,

Transcription

1 Joe s Deliver Center Contribution to the opensap Fiori UX Design & Build Challenge Dr. Michael Umlauff, The Story Telling a story as a starting point for a SAP Fiori Development. MY STORY OF JOE S DELIVERY CENTER: In our sales company, our delivery team has the task to deliver the ordered commodities from the warehouse to customers. Our company runs a truck fleet driven by truck drivers delivering the ordered goods all over the country. Our EWM (Enterprise Warehouse Management) module in ERP system is able to bundle and schedule the transports. However, the dispatchers organizing the transports and instructing the drivers are no sophisticated EWM users. They do not like the overloaded SAPGUI transactions. They are not sitting on a desk, but walking around in the warehouse and the delivery center, so they have tablets. The dispatchers just need a fancy app on their tablet providing all information on customers, delivery items and urgency for the pending transports. For each customer there is a rating. This information is important for the dispatchers when deciding on the priority of delivery. Joe, my persona, is one of the dispatchers. This persona description, the prototyping and the app development on HANA Cloud platform are dedicated to him. Description of Joe s Persona, created from the template Documentation of a persona as a starting point for a SAP Fiori Development. The following diagram describes Joe s job, his characteristics, the stakeholder, goals and pain points.

2 Joe better organize our transports from warehouse Business economist Dispatcher Organize transports to customers Decide the priority of transports Instructs truck drivers Get rid of that sucking GUI application. Have all needed information on my tablet when I am out in the warehouse instructing the truckers. Real time information on pending transport Insufficient insights into priority of transports. Lack of information on pending transports. Fussy, overloaded GUI application Truck drivers Warehouse staff COO User Experience Journey

3 Mock up The mock up pages where built with the SAP Fiori UX Prototyping Kit (Powerpoint)

4 App Prototype: WebIDE Development This section describes how I created a SAP Fiori App in WebIDE that I previously designed with the Prototyping Kit. The app is intended for a delivery center manager working in a warehouse, coordinating the outgoing transports to customer by trucks. I chose the Master Detail Pattern. The Master view contains the Transport List. In the detail view there are three tabs: Transport Details Customer data Item List The bottom line contains two button for setting the transport to Assigned or Cancelled. MASTER VIEW AND TRANSPORT TAB The Master view contains: Transport number Cargo value Currency Number of items Due date. The detail view contains the transport data and three tabs: Transport (sap-icon: transport) Customer (sap-icon: customer) Items list (sap-icon: task)

5 CUSTOMER TAB The customer tab contains the: Name Contact Person Address, as a concatenation of street, zip code and city Customer Rating

6 ITEMS TAB The items tab contains the items list as a table with the columns Description Quantity Price Total BOTTOM LINE The bottom line contains two additional buttons showing a popup each when pressed.

7 SOME IMPLEMENTATION DETAILS Mock data I created an EDMX file for mocking up the data service. The mock data are contained in some.json-files. UI5 project I used the webide template wizard for the master/detail pattern to create the project, and added my additional tabs, fields, table etc. in the view and controller code. Due Date Formatter For the Due in field in master view I created a formatter: Formatter.js jquery.sap.declare("joesdeliverycenter.view.formatter"); var DueInFormatter = { DueIn : function (nduein) { if (nduein === 0 ) { return "Due today"; } else if (nduein === 1) { return "Due tomorrow"; } else if (nduein >= 14){ return "Due in 2 weeks"; } else if (nduein >= 7){ return "Due in 1 week"; } else { var sreturn = "Due in " + nduein + " days"; return sreturn; } } };