Quick Start Guide to Designing SAP Fiori UX Apps

You don’t need to be a Fiori expert to start designing your own Fiori UX Apps. Working with Fiori stencils and icons created for use in Axure RP, you can quickly start building by dragging and dropping screens, icons and functional elements onto the canvas in Axure RP.

To get started, download the Fiori libraries, and load them into Axure RP. If you don’t have Axure RP, you can still download a free-trial copy for 30 days for this exercise.

Now let’s dive in. For this exercise, we’ll design a simple travel expense approval app.

Know your test data. Before you start designing, have a basic idea of the data you will need for your app. For our expense app, this could be the expense type, the amount of the expense, the receipt (as an attachment), date and purpose. Advanced tip: If the stencils you use are built as Axure RP repeater widgets, you can even upload test data from an Excel spreadsheet if you like to make the exercise more realistic.

Create role specific prototypes. Managers approving the expense, for example, will see a different screen than the employee submitting the expense. SAP recommends that Fiori designers focus on one user, one task, and three screens, also known as the 1-1-3 principle. Figure out exactly what the user needs to do to complete the task and how they will interact with your product. In this case, the user is the manager and the task is to approve the expense.

Gather ideas. If you’re looking for inspiration, start by exploring the design elements here. You can also poke around the SAP Fiori Apps Reference Library. The library contains information about dozens of out-of-the-box SAP Fiori Apps. Here’s one for My Travel Expense.

Fire up Axure RP and load the Fiori libraries you’ve downloaded. You’ll notice that the stencils come in three sizes. Choose any one.

Large (L) – for desktop screens

Medium (M) – for tablets with touch-friendly controls

Small (S) – for phones with touch controls

Learn more about these sizes here.

Create a Master Detail App. Selecting a stencil from the SAP stencil library on the left and dragging it out to the design area. One of the most commonly used stencils for this type of application is SplitScreen_Object.

Customize the fields to match your test data set. This is where you get to have fun playing with the interface and configuring your perfect app. For example, using the SplitScreen_Object stencil, you can rename the “Products” column on left to “Expense” and the right column as “Expense Detail.” Continue to refine the screen until it matches your data set. Violà! You’ve designed your first Fiori UX App.

Once you’ve designed your master detail app for one screen size and form factor, it’s easy to adapt those designs for other devices by using the same stencils in the other two sizes.

The advantage of using the Fiori stencils and icons in Axure RP is that they automatically comply with the SAP Fiori Guidelines, saving you the time of having to go through the 27-page checklist when you go through the SAP Fiori App certification phase. (You’ll still need to be careful when styling and customizing the stencils, however, to stay within the guidelines.) As a postscript, keep an eye out for SAP’s forthcoming update of Fiori, which SAP Partners say will feature additional stencils such as cards and overview pages.

Need more information? We’ve compiled a list of additional resources.

• SAP’s Introduction to Fiori
• A library of pre-built SAP Fiori Apps
• Video walk-through of the SAP library
• Axure Core Tutorial
• More ways to use Axure in designing Fiori UX Apps

We’d like to thank Sana Salam, Chief Executive of Sodales Solutions Inc. for helping us create this guide.