Session from ASUG / SAPPHIRE NOW 2015 delivered by Sebastian Steinhauer and Tobias Queck about how to create screens that follow the SAP Fiori UX design using SAP Screen Personas and how to integrate these screens into the Fiori launchpad.

1. Combining Fiori Launchpad
with SAP Screen Personas to Run Simple
Sebastian Steinhauer & Tobias Queck, SAP
SESSION CODE: UX250

2.  How to determine whether to use a Fiori app or a
Screen Personas flavor
 How to integrate SAP Screen Personas flavors
into the Fiori Launchpad
 Design considerations for SAP Screen Personas
flavors to optimize experience in the Fiori
Launchpad
Learning points

3. What is Fiori UX?
SAPFiori
Concept
SAP Screen Personas
Design
Interaction Patterns
Information
Architecture
Visual Design
Role-based SimpleResponsive Coherent Delightful
PrinciplesParadigm Shift
Technology User Interface
Business Logic
…

4. Products
with SAP Fiori UX Out of the Box
 Today
500+ SAP Fiori HTML5 apps
 Future
All SAP products (cloud, on-premise)
Tools
for customers to implement new UX
 SAP Screen Personas
Modernize SAP GUI,
apply Fiori or customer-branded
design
 SAP Web IDE
Build and extend Fiori apps
 Fiori Launchpad, Fiori Client, SAP
Portal
Consume Fiori apps
SAP UX Overview
SAP Fiori = The new user experience for SAP software
UX Design Services to help you implement SAP Fiori & SAP Screen Personas

5. Demo:
Use SAP Screen Personas to build Fiori UX
This Fiori
screen was
built using
SAP Screen
Personas

6. We make it easy for you
http://www.slideshare.net/peterspielvogel/sap-screen-
personas-style-guide-for-fiori-2015-feb06

7. SAP Screen Personas architecture

8. Demo:
SAP Screen Personas in Fiori Launchpad
• Browser
• NWBC
• SAP Portal
• SAP GUI
• Fiori Launchpad

9. When to use which solution
Fiori app
available
now?
Modify
existing
Fiori?
Mobile
UX
required
?
Yes Yes
No No
SAP Fiori
SAP UI5 custom
development
Based
on SAP
GUI?
No
Yes
SAP Screen
Personas
No
Yes
Start:
Design Thinking

10.  Create one Launchpad tile per activity not
per transaction
 Combine transactions in your activity using
scripting
 Create one global Personas theme
matching your Fiori styling
 Keep it simple
Integration tips – best practices

11. Where to learn more
Product Page www.sapscreenpersonas.com
Getting Started
resource page
scn.sap.com/docs/DOC‐54574
Run Simple with
SAP Screen
Personas
scn.sap.com/community/gui/blog/2014/09/30/
run‐simple‐with‐sap‐screen‐personas
SAP UX on
SAP.com
www.sap.com/solution/ux‐user‐
experience/software/overview.html

12. SAP Screen Personas @ SAPPHIRE NOWTuesday
11:00 ‐ 11:20 AM
Demo
Theater 1
Build Intuitive ERP Screens Quickly and Easily
12:30 ‐1:30 PM S210C Intel
1:45‐2:45 PM S210C Fiori Launchpad and SAP Screen Personas
Wednesday
10:30‐11:00 AM
S320
RT15
Influence SAP Screen Personas 4.0 Round Table
11:00 ‐ 11:20 AM S210C Norfolk Southern
4:15 ‐ 5:15 PM S210C
What's New and Exciting in SAP Screen Personas
3.0
5:00 ‐ 5:20 PM
Demo
Theater 3
Build Intuitive ERP Screens Quickly and Easily
Thursday
8:00 ‐ 9:00 AM S210C Lockheed Martin
12:00 ‐ 1:00 PM S210C Making SAP’s User Experience Strategy Reality
2:00 ‐ 3:00 PM S330B Freescale

13. Stay informed
Follow the ASUGNews team:
Tom Wailgum: @twailgum
Chris Kanaracus: @chriskanaracus
Craig Powers: @Powers_ASUG
SAP Imagineering: @SAPImagineering

14. Thank you for participating
Please provide feedback on this session by completing
a short survey via the event mobile application.
SESSION CODE: UX250
For ongoing education on this area of focus,
visit www.ASUG.com
Sebastian Steinhauer
SAP Screen Personas
Product Owner
Tobias Queck
SAP Screen Personas
Lead Architect