Yesterday I submitted my SAP Fiori UX Design and Build Challenge as part of the open sap course: Build Your Own SAP Fiori App in the Cloud. I joined the course to learn more about Fiori. In this blog I write about the experience I had and the assignment I submitted.
There are three parts to this assignment. The first is going through the Design Thinking principles. The second is a mock-up of the app to be build, and finally the (start of) a Fiori App in the cloud.
1 Design Thinking
The story
To start with the design thinking process, the story behind the app needs to be written. It should include specifics about segmentation, targeting, and positioning.
This app is about feedback tutors receive from students. Tutors give courses. Students give feedback on these courses, either digital or on paper. The feedback is scanned and stored in a dedicated system. This system generates extensive pdf reports for specific tutors.
Tutors must have easy access to the feedback concerning them, this app helps them to see the most relevant information, and have access to the generated reports
Storyline: tutors logon to a website. They get an overview of the courses they have given, with some relevant information. They can select a course and download a pdf document with all the details.
To summarize:
- For tutors at a University
- Easy access to pdf reports
- Most relevant information is shown in the app the help the navigation
A persona
The second step is about creating a persona. Personas are fictional characters based on real data to represent user types. They are extremely useful when considering goals, desires, and limitations of your app’s users and can help guide design decisions. Personas put a personal human face on otherwise abstract data you have about your users.
For the development of a persona, a template is present. This is the persona I used:
An user experience journey
Finally, an User Experience Journey needs to be described where you try to visualize the journey your persona travels in using the app. The red and blue dots represent unpleasant and pleasant occurrences.
Here is journey I constructed:
2 The prototype
With all this thinking done, it is time to start working on a prototype. For this a template powerpoint is available, that can be used to make a mock-up of the application. You can choose the lay-out (Master-detail in my case, I started with a smart table), icons, information, and so on.
Below is the mock-up I made.
3 The real app
Finally with all the thinking done, it is time to start using the SAP Web IDE. In this cloud environment you build the app. In my case, I started with a template Master-detail. Then I added some mock-up data, based on real examples. Then I tried to change the app to as designed in the mock-up. Unfortunately, I am not a skilled javascript developer, thus I didn’t get too far. But please find below some screenshots of the app, or have a look at this video: http://youtu.be/zRD5KDIMOQE. With little effort a lot already was achieved.
To conclude: I had a great learning experience in this SAP Fiori course. I like the way the Web IDE works and I the guidance that is given with all the available templates and information. The result looks great, I think a lot of SAP GUI users will be pleased with the new look&feel.
