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 Grange Hill 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.