Build Your Own SAP Fiori App in the Cloud

SAP Fiori UX Design and Build Challenge

By Damian Tomlinson

Story Samuel ‘Zammo’ McGuire is a pupil at High School in North London.

Before going to school Zammo needs to pack his bad with any textbooks and homework that he needs for that day. He also needs to remember his PE kit on Wednesdays. Once at school Zammo needs to know which lesson is next and which classroom to go to. At home again at the end of the day Zammo needs to check which homework is due in the following days so he can complete it on time.

In common with most teenagers Zammo has a smartphone and so it is proposed to create an app to show Zammo his timetable along with what he needs to bring and where he needs to go. Persona

Samuel McGuire

Know about my day

Attends a large high school Student

Be at the right place… Attend six lessons per day. At the right time… Hand-in completed homework on time. With the right equipment. Remember PE kit (indoors/outdoors). Bringing correct textbooks.

Remembering homework, textbooks and PE kit. Knowing which room a lesson is in.

I need a timetable to tell me where to go and what to bring.

Teachers, School Principal

User Experience Journey

Mock Up The proposal is to create a simple and delightful Fiori Master Detail app to present the school timetable. This app is to be primarily used on a smartphone.

The Master Screen will list the days.

Master'screen' Timetable

Search 

Monday dd mmm yyyy Shows list of days

Tuesday dd mmm yyyy

Wednesday dd mmm yyyy

Thursday dd mmm yyyy

Friday dd mmm yyyy

On selecting a particular day the Details Screen will show the lessons for that day.

Detail'screen'  Lessons

Date dd mmm yyyy

Shows list of lessons for a day

Time: hh:mm Subject: Nnnnnnnnnnn Locarion: Room aaa Notes: Homework due in

Time: hh:mm Subject:

On selecting a lesson the corresponding Notes Screen will be shown.

Notes&screen&  Item Detail

Notes

Homework on the subject xxxx Shows the notes for a lesson yyyy zzzz

App Prototype Screenshots from the Web IDE.

Master Screen Detail Screen

Notes Screen

To show the app is responsive here is the tablet view

YouTube link https://youtu.be/59WGNdSSg4A

Thanks to the writer Phil Redmond who created the character and school used in this scenario.