openSAP

SAP Fiori Overview: Design, Develop and Deploy

00:00:03 Hello, and welcome to week two of our openSAP course. My name is Sarah Foley.
00:00:10 In week one, we gave an introduction of the course and introduced the topic of design.
00:00:14 Today, we will go into more depth on what design is and it's value to successful organizations.

00:00:24 Design, design thinking, human-centered design, and user experience design are about
creating holistic
00:00:30 and carefully curated experiences that come from understanding
00:00:34 the needs of the users, their goals, and addressing their current pain points.
00:00:41 It is a set of processes that facilitate conversion and diversion thinking and the aid of crafting
novel solutions.
00:00:49 Because of this focus on the user, the product or service that is created
00:00:54 has a higher chance of meeting their expectations, therefore increasing adoption.
00:01:02 In design-lead teams, design increases time to market, product market fit, user satisfaction,
00:01:09 revenue, and total returns to shareholders, as shown in the Forrester Total Economic Impact
study,
00:01:15 commissioned by IBM in 2018. This study showed that by implementing design thinking
00:01:21 and product teams, these product teams doubled execution speed, project defects were cut in
half,
00:01:27 and portfolio profitability increased by $18.1 million, leading to an ROI of 301%.
00:01:34 Other studies have shown similar metrics, for instance, McKinsey's report on the business
value of design,
00:01:39 published in 2018. This report demonstrated that design-led organizations,
00:01:45 such as Apple, Coca-Cola, and others, increase their revenues and market share at twice the
rate
00:01:51 of their industry counterparts. So now, we'll look at some real-world examples
00:02:00 of the business case for good design. From Apple and OXO.
00:02:07 So, when Apple discontinued their ear bud Jack in 2016, iPhone users needed to either
convert their headphones
00:02:14 with the use of an adapter or purchase wireless options. At that time, Bluetooth headphones
00:02:19 were not a seamless experience, nor were they user-friendly.
00:02:24 Apple was able to fill this gap with AirPods. AirPods are not the best sounding headphones,
00:02:30 but they solved all the major pain points users were having, such as pairing, case size,
00:02:36 day-to-day operation, and ecosystem coupling. So by understanding your user
00:02:42 and solving for their pain points, Apple was able to make some technological trade-offs,
00:02:47 lowering sound quality for increased ease of use. Users cared more about them being user-
friendly
00:02:55 than they did about the sound. AirPods were able to capture 60%
00:02:59 of the wireless earbud market. AirPods as a business alone would rank 384
00:03:04 in the Fortune 500 list, grossing $6 billion in revenue in 2019.
00:03:09 AirPods show how solving customer pain points translates to product viability and big profits.
00:03:16 Now, let's look at OXO's measuring cup product. For those unfamiliar with the brand,
00:03:20 OXO's mission is to make every day easier through designing inclusive tools.
00:03:25 The company started after the founder's wife complained about how tools in the kitchen were
hard to hold
00:03:29 and use due to her arthritis. So in an effort to alleviate his wife's pain,
00:03:35 he started OXO to create tools that she could use with ease. This was then known as the
Good Grips line.
00:03:43 So with an intention of expanding this line, designers interviewed users around measuring
cups.
00:03:49 So not only did they talk to them about measuring cups to understand their preferences,
00:03:53 but they observed how they were using them while cooking. One thing that they noticed were
00:03:57 that users were constantly bending down to see how much of an ingredient was in the
measuring cup.
00:04:04 It was reported that these users bend down to as much as four to five times
00:04:09 to get an accurate measurement. So when probed about their preferences,
00:04:12 this was not seen as an issue, only a typical part of the measuring process,
00:04:18 so the designers then took this insight and turned it into an award-winning product.
00:04:22 So design was integral to learning about the context of the product,
00:04:26 then looking for non-obvious insights that they were then able to turn into opportunities
00:04:31 for product innovation. Now, we're looking at an example that failed
00:04:36 from a design and business value perspective. Juicero was a $400 Wi-Fi connected juicer.
00:04:44 The idea was simple, quick and easy, cold pressed juice without a lot of cleanup.
00:04:49 The juice would be a subscription service, came in bags of chopped ingredients.
00:04:54 You would take this bag, place it in the machine, and the machine would squeeze the bag,
00:04:58 successfully juicing the contents It seemed like a great idea to investors
00:05:04 and was able to capture 118.5 million total in funding. The implementation of this, however,
00:05:12 it was an expensive machine that squeezed bags of fruit, which were just as easily squeezed
by hand.
00:05:19 Juicero is a beautiful solution to a non-existent problem, and folded within 18 months.
00:05:26 So, had Juicero deployed design methodology throughout the process of defining
00:05:30 and developing their products and services, they probably would have developed something
else
00:05:35 that solved the needs of their target users, and probably would still be around.
00:05:41 Design is about understanding and developing products that fit in the user's day-to-day life.
00:05:47 There's less about making things look pretty. Beautifying Juicero machines did not help save
Juicero.
00:05:56 Poor user experience leads to decreased adoption. The product fails in the marketplace
00:06:01 because users will not adopt it due to low desirability or poor usability.
00:06:06 Wasted development. Technical debt can accrue from by developing features
00:06:11 that are not wanted or used by the end users. There can be high support costs.
00:06:16 Excessive customer service calls or consultations are needed to help the customer install and
use the product.
00:06:24 Customer escalations. When a product truly does not meet the customer needs,
00:06:29 unplanned and highly expensive rework can result. So, let's take some time to define some
common terms
00:06:39 that often get mistaken for the same thing. Design.
00:06:44 Design is a process or methodology like design thinking that we use to help us achieve a
desired user experience
00:06:52 as a way to achieve a goal or solve a problem while creating a product or service.

2
00:06:59 User experience. As the name implies,
00:07:02 it is everything the user feels and experiences as they interact with the product or service
00:07:08 User interface. It's the interactive part of a digital product
00:07:13 through which the user operates or interacts with that product.
00:07:17 It can include voice, interface, buttons, sensors, or any other input mechanisms.
00:07:25 Usability. Usability is how easily the user navigates
00:07:28 through the user interface. To better understand these terms,
00:07:33 let's look at them in the context of designing an elevator system.
00:07:37 The UX is the logic of how elevators behave. So, understanding the user patterns
00:07:43 is key to ensuring a good user experience. You'd want to look at how and when people move
in and out
00:07:49 of the building so that the elevator is positioned on key floors at key times.
00:07:54 For example, people leave their apartments in the morning, meaning the elevator should
automatically move
00:08:00 from the ground floor to the middle of the apartment block so that they are quicker to pick
people up.
00:08:07 Likewise, when people come back home, elevators should move down to the ground floor
00:08:13 after they drop people off at their floors. The UI is the operational buttons inside
00:08:20 and outside of the elevator. Good UX doesn't just apply to interfaces or software,
00:08:27 it can apply to anything. It's just the adjustment of patterns and logic
00:08:32 that fits the user's needs, resulting in happier users.
00:08:38 Enterprise UX is the design of software that helps people do their jobs
00:08:43 in the most efficient and effective way possible. Enterprise UX is different than consumer UX
00:08:50 in that consumer applications usually have use cases that are fairly straightforward,
00:08:54 serving a single purpose. Enterprise software scope is much more vast,
00:08:59 involving complex business processes, spanning many functions across multiple frameworks
00:09:04 and legacy systems. For example, consider designing for the experience of buying
00:09:10 or, in enterprise terms, procurement. As a consumer,
00:09:15 your daily shopping experience is pretty straightforward. It's rare that you'll buy more than 100
items in a day.
00:09:22 And if you do need to ask for permission for your shopping, it's most likely from your partner or
family.
00:09:29 However, in the world of supply chain, a procurement specialist is responsible for hundreds,
00:09:34 if not thousands of different items day-to-day. And the procurement process can involve
00:09:41 back and forth communications with different vendors, and approvals from multiple
departments,
00:09:47 and potentially millions of transactions. From this example, you can start to understand
00:09:53 how complex it can be to design for enterprise software. Some other key differences are the
high stakes involved.
00:10:00 Because enterprise software enables people to do their jobs, there are higher stakes when it
fails.
00:10:07 Most companies have SLAs or service-level agreements in place to protect their businesses
00:10:13 in case there're software performance issues. These contracts can include security and
business results,
00:10:20 wishing to be strictly adhered to. Another issue is that enterprise software
00:10:26 is usually purchased for the user, not by the user. It's purchased by committees.
00:10:31 Users don't usually get a say in what product they use. So there's usually a disconnect to get
to the end users.

3
00:10:38 There's product flexibility. Products need to be robust, yet flexible,
00:10:41 as software needs to be customized to each customer's processes and needs.
00:10:46 There are global considerations. Enterprise UX must design for many different types of users
00:10:53 from different industries, cultures, languages, and abilities.
00:10:57 And then there are product standards. Relevant to the higher stakes involved,
00:11:01 there are much more rigid product standards to be considered.
00:11:04 And so, to design for enterprise software, there are many more restrictions.
00:11:10 Among all kinds of products standards, accessibility and consistency are the two
00:11:15 most common standards for design. These standards are not optional but mandatory.
00:11:19 To do business in the public sector, for example, the software must absolutely follow
00:11:24 all these product standards. So in summary, enterprise UX must ensure integration
00:11:30 across multiple platforms, frameworks, and other software, which can be very challenging for
implementation or changes
00:11:38 in the design or design system. At this point, you may be wondering how can I improve the UX

00:11:44 of the product I'm working on? And what are the benefits of adopting a design system?
00:11:50 Design systems deliver more value in less time. They provide assets and guidelines
00:11:56 for product teams to use across different products. Imagine if there was no design system in
place.
00:12:02 Probably, teams would have to go through the repetitive process
00:12:04 of creating similar assets from scratch. By utilizing a design system,
00:12:10 you are leveraging work already created. Design systems also ensure
00:12:16 that the product standards are met, as they are built around this.
00:12:21 For theory, we have put in countless hours into accessibility testing
00:12:26 and efforts around consistency and globalization. Design systems also ensure a better
collaboration
00:12:34 and knowledge sharing. One design system improves the communication
00:12:38 and collaboration across different product teams. Everyone can stay on the same page,
00:12:44 and they can share knowledge quickly. Another benefit is that new team members
00:12:49 have a much easier time onboarding. There's a common bias that design systems limit
creativity,
00:12:57 but, in reality, it frees up the time wasted on repetitive work so that product teams
00:13:02 can focus on identifying the right problems to solve, coming up with more creative solutions
00:13:08 and impactful solutions. So, today we talked about the value of design,
00:13:16 defined some design terms, and examined the benefits of using a design system.
00:13:22 Next time, we'll dive into SAP design system Fiori 3. Thank you.

4
Week 2 Unit 2

00:00:05 Hello, and welcome to week two, unit two, Exploring the SAP Fiori Design System,
00:00:10 of our openSAP course, SAP Fiori Overview: Design, Develop, and Deploy.
00:00:15 My name is Rainer Filsinger. Last unit, we talked about why good design matters.
00:00:24 In this unit, we will explore the SAP Fiori design system with a focus on the guidelines.
00:00:33 Let's start with the three major components of experiencing software.
00:00:37 Functions, usability, and joy of use. We need to look at all three components together,
00:00:43 and not separately. If the software works well, but is visually not appealing,
00:00:48 nobody will enjoy using it. On the other hand, if a software looks great,
00:00:53 but is inefficient to use, end users will not really want to work with it.
00:00:59 User experience design tries to reach a well-balanced product.
00:01:03 It focuses on questions like, how will it make people feel?
00:01:07 In addition to, how will it look? And, how will it work?
00:01:14 When people think about software, they primarily have functions and features in mind.
00:01:19 And this is not wrong, since functionality is one major component of user experience.
00:01:27 Functions are measurable. We can describe features and compare functions.
00:01:32 Therefore, statements such as, product A is better in aspect X, are possible.
00:01:43 You might be surprised to hear that usability is also a measurable aspect of software.
00:01:48 It can be separated into three components. Effectiveness, how well does the software support
00:01:54 the tasks a user wants to do? Efficiency, how quickly can a user complete his tasks?
00:02:01 And satisfaction, what is the subjective perception of a user when he uses the software?
00:02:08 By measuring the task completion rate and accuracy, the time and number of clicks to
completion,
00:02:15 and the subjective impression, for instance by means of a questionnaire,
00:02:19 you will get quantitative findings on the usability of your software.
00:02:29 Joy of use is the third component of user experience. It considers visual aspects like,
00:02:35 attractive graphic design and aesthetics. Moreover, it is important that the software runs
smoothly
00:02:42 and evokes positive emotions in the user. Let's have a look at these two screens,
00:02:49 representing two generations of business software. The SAP Graphical User Interface on the
left,
00:02:55 and SAP Fiori 3 on the right. In the concept of the SAP Fiori design system,
00:03:02 joy of use played a major role. It lets the user feel encouraged
00:03:07 to continue using the software. As we already saw in week one,
00:03:16 a design system helps when designing hundreds of applications.
00:03:20 Especially in the corporate environment, you typically have a lot of applications
00:03:25 for complex business scenarios produced by several UX designers for multiple platforms.
00:03:32 So, in this enterprise environment, you want to make sure that all the applications look alike
00:03:39 and can be operated the same way so not every employee has to learn every application.
00:03:45 To ensure this, we use a design system that consists of values, principles, and practices.
00:03:54 The design system is then broken down into several design languages
00:03:59 that feature several platforms like Web, native, or conversational.
00:04:07 SAP Fiori for Web, for instance, is the design language for browser-based applications,
00:04:12 independent of device or screen size. SAP Fiori 3 is SAP's new target design system,
00:04:24 which evolves the SAP Fiori design for all SAP products to fully support the intelligent suite,

5
00:04:30 running on any device. Rather than holding back some of the innovations
00:04:35 and delivering everything later in one big bang, SAP has chosen to deliver
00:04:41 the SAP Fiori 3 innovations in a stepwise approach. Let's have a look at the three focus areas
of SAP Fiori 3.
00:04:55 In its latest and third evolution, the design team has been focusing on consistency,
00:05:01 intelligence, and integration to ensure that SAP Fiori can be used
00:05:06 to integrate all products into one Intelligent Enterprise. UX consistency makes the user feel at
home.
00:05:18 Basically, it's all about recognition. We will be using the same colors, typography, iconography,

00:05:26 and terminology across all products. UI elements like buttons or form fields look the same
00:05:33 and are positioned consistently. These measures will ensure a similar look
00:05:38 and feel across all products and applications. Here, you can see
00:05:46 the most common floorplans used in SAP Fiori. Floorplans are like preconfigured screen
distributions.
00:05:55 They are used over and over, so users are getting used to them
00:05:59 and recognize them immediately. Additionally, those floorplans are available
00:06:05 as SAP Fiori elements, a template-based development shortcut,
00:06:10 which speeds up your development time. You will hear more about SAP Fiori elements in
00:06:15 the development section of this class. SAP Fiori 3 also makes a huge step forward
00:06:26 in integrating machine intelligence into a business environment.
00:06:31 For instance, with the concept of business situations, the system can now detect critical
business contexts
00:06:38 independent of predefined processes and workflows, and provides the user with solutions
00:06:44 and recommended actions to solve them. It is not sufficient to have a consistent user
experience.
00:06:55 SAP Fiori 3 reaches out for the next level, real integration.
00:07:02 All applications can be accessed from a single entry point, and there are umbrella features,
like a central search
00:07:10 and a central inbox for workflow tasks and notifications. The central entry point can be
extended
00:07:21 by LoB-specific spaces. If necessary,
00:07:27 such spaces can comprise integrated multi-level navigations. The SAP Fiori 3 design
guidelines
00:07:39 reflect all these main principles we have just learned about,
00:07:44 and guide you to create great apps by yourself. You can access the guidelines at
00:07:50 experience.sap.com/fiori-design. You see the four design languages
00:08:01 for SAP Fiori design system, SAP Fiori for Android and iOS,
00:08:06 SAP Fiori, which are the browser-based guidelines, and Conversational UX.
00:08:12 Let us choose SAP Fiori, and let me give you a brief overview of a least some contents.
00:08:22 For newbies, Explore SAP Fiori is very helpful. It gives you a perfect overview of the layouts,
floorplans,
00:08:35 frameworks, and the mass of UI elements. All items are linked to
00:08:39 the corresponding pages with each and every detail. Let me now pick some pieces from the
Foundation section.
00:08:55 Multi-Device Support explains the underlying concept of adaptive and responsive design,
00:09:01 and in Content Density you will find details of the cozy and compact modes, and when to use
them.

6
00:09:22 If you are interested in the standard color composition, and how to apply your specific
customer brand,
00:09:28 Theming is the right place to go. Designing Intelligent Systems is self-explanatory, I guess.
00:09:49 It covers design concepts of artificial intelligence and machine learning in SAP business
software,
00:09:55 covering Matching, Ranking, Recommendations, and Situation Handling.
00:10:05 The section General Concepts holds a mass of interaction ideas,
00:10:09 like, for instance, Action Placement, Draft and Message Handling,
00:10:13 and how to manage objects in the case of create, edit, or delete.
00:10:24 Last but not least, I would like to draw your attention to the Services and Resources section.
00:10:32 Here, you can download the stencils for Axure and Sketch, which get periodically updated.
00:10:38 You can also download the icon font and the font which were especially developed for
00:10:44 the SAP Fiori design system. In this unit, we have talked about
00:11:04 the SAP Fiori design system, with a focus on the guidelines. In the next unit, we will cover
00:11:09 the building blocks of SAP Fiori and its major concepts. Thank you.

7
Week 2 Unit 3

00:00:05 Hello, and welcome to week two, unit three, Designing with SAP Fiori, of our openSAP course,

00:00:12 SAP Fiori Overview: Design, Develop, and Deploy. My name is Rainer Filsinger.
00:00:19 In the last unit, we explored the SAP Fiori design system with a special focus on guidelines.
00:00:25 In this unit, we will talk about designing with SAP Fiori. Let's have a look at the building blocks
of SAP Fiori.
00:00:36 They can be grouped hierarchically. UI elements represent the basic components,
00:00:41 like buttons, select boxes, or lists. If some of these UI elements come together
00:00:50 in a standardized way, we see patterns, like a filter bar, a table toolbar, or a process flow.
00:00:58 A collection of UI elements and patterns build a floorplan. Such a floorplan defines not only the
structure
00:01:05 of the controls used but also how to handle different use cases.
00:01:13 The layout of a page defines how one or multiple floorplans are displayed on the screen.
00:01:22 Last but not least, we should not disguise other building blocks that represent SAP Fiori, for
instance gestures, colors,
00:01:30 typography, and its underlying concepts. Let's start with UI elements,
00:01:39 which represent the basic components. Here are some examples.
00:01:44 Labels, links, buttons, and typical form elements like input fields or range sliders.
00:01:52 Tables and lists. Data visualization, like micro charts, Gantt charts or maps.
00:02:03 And dialogs, quick views, or popovers. Such UI elements can be combined into patterns.
00:02:14 Here are three typical examples. The responsive table consists of diverse UI elements,
00:02:20 like texts, links, check boxes, buttons, and icons. And its table toolbar actually represents
another pattern.
00:02:32 The filter bar comprises links, tables, input fields, selects, and a button.
00:02:40 And the upload collection comes with a headline, some text, an icon, and a drop area.
00:02:50 The next level of building blocks are floorplans. The most common floorplans are the overview
page,
00:02:58 the list report, the object page, and the analytical list page.
00:03:07 These floorplans are also available in SAP Fiori elements. You will learn more about SAP Fiori
elements
00:03:13 in week three of this course. A little less common are floorplans like the wizard
00:03:22 and the initial page. As of today, they are not available in SAP Fiori elements.
00:03:36 SAP Fiori consists of two basic layouts. The dynamic page supports various floorplans and
use cases.
00:03:43 The design of the dynamic page header helps users to focus on the actual page content, but
still ensures
00:03:50 that important header information and actions are readily available.
00:03:57 The flexible column layout displays multiple floorplans on one single page at a time.
00:04:03 This allows faster and more fluid navigation between multiple floorplans
00:04:07 than the usual page-by-page navigation. The flexible column layout allows up to three
columns.
00:04:14 Users can expand the column they want to focus on and view the right-hand column in full
screen mode.
00:04:25 In addition to the common layouts we just looked at, we have some more layouts for special
cases.
00:04:31 The semantic page is recommended for freestyle applications as a basic layout.

8
00:04:39 The comparison pattern allows users to select items from a list and display them side by side.
00:04:44 This makes it easier to compare the characteristics of multiple items.
00:04:54 The multi-instance layout allows the user to display and edit multiple objects within one page.
00:05:00 Each selected object can appear on a separate tab. As a result, a user can work on several
objects
00:05:07 simultaneously and switch between them easily. Letterboxing restricts the user interface to a
certain width
00:05:15 in order to preserve the original aspect ratio. This way, the interface does not become distorted

00:05:22 or stretched when adapting to larger screen sizes. After having examined the building blocks,
00:05:34 let's look at the major concepts of SAP Fiori. A draft is an interim version of a business entity
00:05:41 that has not yet explicitly saved as an active version. Drafts are saved automatically in the
background
00:05:48 whenever users add or change information while in edit state.
00:05:54 In SAP Fiori, drafts are used to keep unsaved changes if an editing activity is interrupted,
00:06:01 allowing users to resume editing later, or to prevent data loss if an app terminates
unexpectedly.
00:06:09 Drafts are also used as a locking mechanism to prevent multiple users
00:06:13 from editing the same object concurrently and to make sure or to make users aware when
there are unsaved changes
00:06:21 by another user. While a user is modifying a business entity,
00:06:29 a saving indicator shows when a draft is saved implicitly. The implicit save does not make the
Save button redundant.
00:06:38 Clicking or tapping the Save button is still necessary in order to incorporate the changes
00:06:42 into an active business document. In SAP Fiori, we basically differentiate
00:06:52 between two editing processes, the local and the global flow.
00:06:59 Use the local flow with reference items if your object has subpages and your system setup
requires every subpage
00:07:07 to be saved separately, for example, if you have a sales order
00:07:12 and multiple contacts. To leave a subpage in edit mode,
00:07:16 the user has to save the changes or discard them. To keep unsaved changes,
00:07:21 you need to implement draft handling, as we have just talked about.
00:07:28 Use the global flow with subitems if you want to let a user navigate freely between the main
page
00:07:33 and multiple subpages in one editing session. A good example is a sales order as a main
object
00:07:41 with sales order items as closely related subpages. The entire object remains in the draft state

00:07:48 until the user actively saves it on the main page. If the user clicks Apply for a subitem,
00:07:55 the app navigates back to the main page. Similar to the local flow,
00:07:59 if you want to keep unsaved changes, you need to implement draft handling.
00:08:08 Situation handling is a concept for bringing business issues to the attention of users.
00:08:14 Let's have a look at the following example. Emma broke her leg and submitted her sick leave
00:08:21 to the system. The system now traces impacts of her absence.
00:08:26 Since she won't be able to finish her work within her current project as an android developer,
00:08:33 the system notifies the project manager. He sees that there is a staffing issue
00:08:39 for that particular project. Due to Emma's unavailability, a major milestone is at risk.

9
00:08:45 The project manager now is able to click on Show Details to get to a situation page where he
can take
00:08:52 according measures and find a substitute before it is too late.
00:08:58 Situations are surfaced in various ways, from a simple interactive situation indicator
00:09:03 via message strips and popover, to a dedicated situation page.
00:09:10 SAP Fiori uses the technique of progressive disclosure. That means we try to disclose only as
much information
00:09:18 as the user in his current situation needs. We start with the core fact and provide more details

00:09:25 level by level, as required by the user. Sometimes, you need to display messages such as
errors,
00:09:35 warnings, success messages, confirmations, and information. You can choose from various
controls
00:09:43 to display different types of messages. All errors must be easily visible
00:09:48 and clearly identifiable on the UI. Always help the user to recognize, diagnose
00:09:54 and resolve the issue. Use plain language and no codes,
00:09:59 indicate the precise problem, and suggest a constructive solution.
00:10:05 Interrupt the user as little as possible and only in unavoidable cases.
00:10:14 Notifications are the best way to make users aware of a situation that requires timely action or
attention.
00:10:21 This could be a situation that has just arisen or a task triggered by the workflow.
00:10:29 Users access notifications by clicking or tapping the bell icon in the shell bar
00:10:35 at the top right of the screen. In the notifications popover, the user can read,
00:10:43 take action, and navigate to the source of a specific notification.
00:10:48 For a better overview, the user can order notifications in various ways like by date, by time, or
by priority.
00:11:00 Okay, today we talked about the building blocks for SAP Fiori and its major concepts.
00:11:07 In the next unit, we will cover design-led development, personas, user stories, and task types.
00:11:14 Thank you very much.

10
Week 2 Unit 4

00:00:03 Hello, and welcome to week two unit four of our openSAP course,
00:00:08 SAP Fiori Overview: Design, Develop, and Deploy. You already know me from the first week.
00:00:15 I'm Tillman Swinke, and I will be guiding you through the hands-on section of the design part
00:00:19 of our training. Now, you looked at a lot of components and tools
00:00:24 of Fiori for the last sections. Let's see how we apply them in a meaningful way.
00:00:31 This week, we will be talking about what can help us to design for a specific application
00:00:36 for a specific use case. Therefore, in this unit, we will be looking at
00:00:41 the design-led development process, why we need a persona, what user stories are for,
00:00:48 and at some best practices when it comes to use cases in the form of task types.
00:00:56 First of all, designing meaningful enterprise software is nothing you just want to jump at without
a plan.
00:01:03 We will be using the design-led development process. It is derived from the design thinking
process,
00:01:09 specifically for the creation of software. The DLD process consists of three different phases:
00:01:16 discover, design, and develop. These three phases are divided into a problem space
00:01:24 and a solution space. That means during the discover phase,
00:01:28 we do not think about a solution, we only try to understand the problem.
00:01:32 And that probably takes up more of your time than you might think.
00:01:37 It is important to review all aspects, if they are assumptions or in fact knowledge.
00:01:45 In this week, we will concentrate on the discovery and the design phases.
00:01:50 You will hear more about development and deploy later in this course.
00:01:57 One of the most important things you should realize within UX design is you're not designing
for yourself.
00:02:04 So if you like it, well, it doesn't really matter, since you're not the one who it is designed for.
00:02:11 If something is right, using the right term or just words, you will never know.
00:02:17 Users of your software might have a different gender, they live in a different culture,
00:02:25 they might have to work around disabilities, work in domains you have little to no knowledge
about,
00:02:32 they have goals you don't know, or they just work in a completely different environment.
00:02:38 To make sure you get a good understanding of the user situation,
00:02:41 be sure to include end users in the process. The persons that in the end will use your
application,
00:02:48 not their supervisors or managers, only they know in detail how the process works.
00:02:55 I can't stress enough how important that detail is to create a good design.
00:03:02 End users might work in a shop flow environment. It can be very loud, which renders audible
notifications
00:03:08 and speech input completely useless. They might be wearing gloves,
00:03:13 which makes touch-enabled devices completely useless. They might work in a mainly mobile
setup,
00:03:21 like sales representatives, that demands the use of laptops with restricted screen space, or
even a mobile phone.
00:03:30 Light colors also might not work very well, since the surrounding lighting can be very bright
outside.
00:03:38 Or they might work in a very highly specialized setup with multiple screens.
00:03:44 So they have enough screen space, but they might not see all the small icons.

11
00:03:51 To make sure we grasp all of this information, we create a persona.
00:03:55 A virtual, hypothetical user template that represents the end user.
00:04:00 Different sections cover different aspects of the persona. Competencies covers how the user
interacts with the app
00:04:08 and other users. Does he work on a global scale,
00:04:11 like a container shipping planner? Or is he a local manager?
00:04:15 Does he work heavily with a system, like a system administrator?
00:04:19 Or just casually, like a logistics expert that is packing containers.
00:04:24 Job responsibilities cover what is expected from the persona in his job role.
00:04:29 Main goals describe, well, the main goals, and how he achieves them.
00:04:35 The needs describe what he needs to actually fulfill his goals, like specific data, tools and
information.
00:04:43 The pain points are the things that are either annoying, painstaking, or just things that aren't
working
00:04:49 as they should. This one is the one that has the most potential
00:04:54 for improvements. But there are also more general aspects
00:04:59 like a picture and some personal information that helps to sympathize with the virtual user.
00:05:05 Sometimes one persona isn't enough and you have to create multiple personas
00:05:09 to represent different target groups. For instance, in a school scenario,
00:05:14 there would be at least one persona for teachers and one for students.
00:05:22 Now that we defined our persona, we need to make sure that everybody working on the
project
00:05:27 has the same deep understanding of the details, because we seldomly create business
software alone.
00:05:34 In interdisciplinary groups, there are end users, developers, architects, designers, and so on.

00:05:41 So it might surprise you how different, at this point, the understanding of different involved
users are.
00:05:48 To change it, we need to visualize what the user is going through for his use case.
00:05:55 An image is worth 1000 words. So show rather than describe.
00:06:04 Most designers draw a little comic-like storyboards. But not everybody is an experienced
illustrator.
00:06:10 And we want everybody to join in. So you can just make use of pre-drawn images
00:06:16 that can be adapted or combined. Here, we will use the scenes package,
00:06:22 which is available for free for downloading from our colleagues from the SAP App house.
00:06:27 But no matter what you use, the important point is to visualize what's happening.
00:06:33 Let's look at a small example from real life. So, this is Tom.
00:06:40 He's a developer, 42 years old, and he's a really friendly guy.
00:06:47 In his daily standup meeting on Tuesday, his colleague Susan says she needs help
00:06:51 with some of her tasks. Tom offers his help,
00:06:57 since he finished his last project early. He assigns the task of Susan to himself on the backlog

00:07:06 and get started. He sees that the task is pretty complex
00:07:12 and offers Susan to do that in pair programming since she's new on the team and she might
like that.
00:07:20 So she accepts his offer. They do the programming together,
00:07:28 and she learns a new elegant way of doing that. So, Susan thanks Tom and the daily stand up
meeting on Friday

12
00:07:37 and says that she has learned learned a lot from him. So, the end.
00:07:44 It looks really simple, but it transports a lot of information,
00:07:48 like the desktop setup that Tom is using. It wasn't mentioned, but you could still see it.
00:07:55 Our experience shows that a visual aid is absolutely crucial to get everybody on the same
page.
00:08:04 So, now we know who the user is, we know his main tasks, how complicated these tasks are,
and how often they occur.
00:08:12 But how to get started? How to choose from all the existing layouts and floorplans.
00:08:18 Experienced UX designers can grasp the information architecture pretty fast and probably start
with a good set.
00:08:27 But if you've never done this before, this is rather complicated.
00:08:31 To give you a head start, we came up with five standard test types
00:08:36 that occur frequently, and some hints of how to deal with this. So, this is a good starting point
00:08:43 if you have little to no experience. But keep in mind, it's only a starting point.
00:08:52 So, those are the five test types we're going to look at. A routine task, a reactive task, a
monitoring task,
00:09:00 an analytical task, and an expert task. But let's look a little closer.
00:09:06 The first one is the routine task. This is the task that happens all the time.
00:09:11 And there's a stable running business process in place to support it.
00:09:16 This type of task is a reoccurring task by its nature. Normally, it requires quite limited set of
information
00:09:23 as context to make a decision. So, let's look at an example.
00:09:31 Imagine you're a contract manager. One of your tasks is to review expiring contracts
00:09:36 and decide on extensions for them. So, on an overview page,
00:09:40 you might want to have fast access to all expiring contracts that are up for extension.
00:09:47 Click on the stack card here. And you get an overlay with all the contracts
00:09:53 that are up for extensions, each with a context you need to decide on.
00:09:58 So in many cases, you should be able to click either Extend or Discontinue and you're done.
00:10:05 If you need more context, you click on the contract and get taken
00:10:11 to the respective object page that gives you more details on the contract.
00:10:18 A second example, and I guess this will occur more often, is you need to make a change on an
already existing object.
00:10:26 For this, I would start on a work list, if you have very limited objects, around 40,
00:10:32 or a list report, if you expect more items than that. Once you have found the right object, you
would like to click on it
00:10:41 and get taken to the right object page. So, if you come across something like a routine task,
00:10:51 here are some hints of what to do. If you expect fewer than 40 items,
00:10:56 use a work list with quick actions. If you expected more items,
00:11:01 use a list report with filters. Bring actions to the overview page with stacked cards.
00:11:07 And if the context for making a decision is sufficient, implement Fiori notifications to inform
00:11:12 and remind the user of their tasks. You can also bring actions to the search results
00:11:18 of enterprise search for your objects, if the context for making decisions is sufficient.
00:11:24 In all cases, you should have an object page as a representation of the object
00:11:29 that you're working with. The second task type is the reactive task.
00:11:36 And this is usually externally triggered. The trigger can be a system action,
00:11:42 an e-mail, or a colleague talking to you. So if you're a manager and are in charge of confirming

13
00:11:51 or rejecting leave requests, you only need to react, in fact, if there's a request coming in.
00:11:57 So first, you need to find out and you do not want to be checking all the time
00:12:02 if something came in. So, once there is a system internal request,
00:12:07 a notification will show up. And in the best case scenario, you would decide right away
00:12:12 and click Approve or Reject right in the notification. If you need more details,
00:12:18 you just click on the notification itself, and it will take you right to the detailed object page
00:12:23 of that request. In case the trigger was an email or chat with a colleague
00:12:32 at the water cooler, you might need to quickly find a certain item
00:12:36 in a vast amount of data. In this scenario, it helps to have a variable
00:12:41 and potent filter tools to filter down to a smaller set of items that you can handle easily.
00:12:50 It is also an advantage to use a flexible column layout to quickly navigate between different
items
00:12:56 in case you're not 100% sure which item it is. And here are some hints of what to do if you
come across
00:13:05 a reactive task. Use Fiori notifications to notify the user about triggers
00:13:11 as an alternative form of navigation. Bring actions to the search results
00:13:16 if the context for making a decision is sufficient. Use the flexible column layout and object
pages
00:13:23 as a main navigation. Use quick actions on list reports
00:13:28 and object page floorplans as well as block edit on object page for quick adjustments.
00:13:35 Use list report floorplans enabled with local search, sorting, and filters to organize objects in
lists.
00:13:43 And enable the situations framework for object pages to notify the user about
00:13:48 exceptional business constellations, prioritize information, and propose relevant actions for
resolutions.
00:13:59 That brings us to the third task type, the monitoring task. The monitoring task is a task where
the user needs
00:14:06 an overview about a specific topic. That often is represented by a key performance indicator,
00:14:12 also known as KPI, or simply a list. Let's look at an example.
00:14:22 As a portfolio project manager, I need to keep track of the time and the cost consumed
00:14:27 by my projects. So I want to be able to see, on a very high level already,
00:14:32 how my projects are doing. Some tiles for the applications can contain KPIs or graphs
00:14:39 right here on the home screen. So even here, you would have a first look and see
00:14:46 that Project Fireworks is in a red state. If the state is not part of the launchpad,
00:14:54 here on an overview page, I can also see that Project Fireworks
00:14:59 is beyond 100 percent of the time. That might require an action on my side.
00:15:05 From here I can dive directly to the project and see what's going on.
00:15:13 Here are some hints for the monitoring task. Very important.
00:15:17 Define meaningful KPIs and measurements for your role. You can use them across Fiori
floorplans,
00:15:24 like home, overview pages, and lists reports. Use list report floorplans with variants and filters
00:15:31 to create specific monitoring lists. Later, these lists can serve as a basis
00:15:36 for your overview page content, like lists and stack cards. If you need monitoring across
domains, use home.
00:15:45 If the monitoring is domain specific, like projects, make use of the overview page.
00:15:55 The next task type we are looking at is the analytical task type.
00:16:01 Where you might know what happened, but you need to figure out why.

14
00:16:08 As a sales manager, I need to find out what revenues on product A dropped massively during
February
00:16:17 The analytical list page offers visual filters that support an exploration of data.
00:16:23 Based on my hypothesis, I select 2019 and the product A on the visual filters on top
00:16:30 to get a breakdown of the different revenue streams, and can find out which department
00:16:35 didn't perform as expected. I can also switch between different data representations
00:16:41 and graphs to find the root cause of this problem. Here are some hints for the analytical task
type.
00:16:51 Define characteristics and key filters for your role. You can use them for construction of
analytical reports
00:16:58 and KPIs. Use an analytical list page with variants and visual filters
00:17:04 for less complex analytics. If the analysis gets too complex,
00:17:09 select an appropriate analytical tool, like the SAP Analytics Cloud, Smart Business,
00:17:16 or the Analytical Path Framework. The last task type is the expert task type.
00:17:27 In this category, we find everything that has massively complex character,
00:17:32 and mostly need specialized UI elements. If you need special expert components, like a T-
account,
00:17:41 a process view, or a 3D view, chances are you need to design an expert task.
00:17:48 Those tasks are highly specialized and most applications that cater to expert tasks
00:17:54 need to be designed as your own project. This is also the reason why there are no general
hints here
00:18:00 and recommendations for this task type. Try to use standard controls and layouts as far as
possible.
00:18:10 Of course, those five task types are not the end of it. There can be all kinds of variations and
combinations.
00:18:17 These five task types should give you just a jumpstart to find an appropriate starting point.
00:18:25 Okay, this week we talked about the persona and that we never design for ourselves.
00:18:31 The user story and how to make all included parties to get to the same understanding.
00:18:37 And we got to know some exemplary task types that can occur. In the next unit, we will cover
some tools
00:18:47 for designing and prototyping. We will design an example together
00:18:51 and we will explore some common design challenges when it comes to Fiori.
00:18:56 Until then, thank you very much, and goodbye.

15
Week 2 Unit 5

00:00:03 Hello, and welcome back to week two, unit five of our openSAP course, SAP Fiori Overview:
Design, Develop, and Deploy.
00:00:14 Today, we will talk about some tools and practices for how to design, and then we will actually
roll up our sleeves
00:00:21 and do some hands-on designing. While doing that, we will also cover some common pitfalls
00:00:26 that UX designers often come across to prepare you for those.
00:00:34 Okay, the first tool we will be using is pretty high tech, the common whiteboard.
00:00:38 You might think, hey this guy should know about the mock-up tool by now, so why is he
starting on a whiteboard?
00:00:44 Well, because everybody should be able to contribute. Keep in mind, the designer might be
able to sketch
00:00:53 the solution fast, but the designer is not the only contributor.
00:00:57 Everybody in the team should be able to contribute to the ideas visually, it does not matter who

00:01:03 it is, end user, process owner, architect, team assistant, it doesn't matter, everybody should
join in.
00:01:12 Always start on the whiteboard, because it's not only easy to do for everybody, but it's also
easy
00:01:18 to change physically and mentally. So if somebody drew a line,
00:01:23 I'm not destroying anything by changing the line. Be agile and let everybody change anything.

00:01:30 Once you have a first draft, you can go ahead and use a mock-up software.
00:01:37 Wireframes, or low-fidelity mock ups, already show correct proportions and dimensions,
00:01:42 and mostly feature mock up content. They can be very easily created, and they're used to
discuss
00:01:49 the basic ideas, since no images and colors are distracting. One big disadvantage is that often
users cannot imagine what
00:01:57 the real screen would look like, and can be disappointed by the result.
00:02:02 The upside is that the barrier to critique a design, or suggest a change is very low.
00:02:11 High-fidelity mock ups, on the other hand, show concrete controls and exact proportions
00:02:16 and often contain real or refined data. They often come in full visual design with all details
00:02:22 and all colors. The upside of high-end mock ups is that everybody can see
00:02:27 what the final application would look like, and that also leads sometimes to the disadvantage,
00:02:33 since users see the final product already, they assume it is already done, so it will only take
like a couple
00:02:40 of moments to finalize. So there might be a higher resistance also
00:02:45 to changing aspects, since it looks like it took a lot of time to come up with.
00:02:51 In a few cases, people tend to start discussing colors and shapes rather than
00:02:56 the user experience and the process behind it. So, low fidelity and high fidelity can both
00:03:01 be used with interactive elements to facilitate an easier way of validation.
00:03:10 So to design, we first need an end user, meet Lisa. Lisa is a customer service agent at Polaris
Fabrics Ltd.
00:03:19 So, let's talk a little more closely about Lisa's persona here. Lisa's persona could look
something like this,
00:03:28 she is a 35-year-old single with eight years of experience that likes photography and modern
art.

16
00:03:34 She works mostly with global buyers on the customer service line
00:03:38 and is rather experienced in all systems. Her main goal is to provide
00:03:42 the best customer service for Polaris Fabrics. To help customers effectively, she needs fast
access
00:03:49 to all customer shipment and order-related data. Her biggest pain points are the unavailability
or delay of data
00:03:59 and that she has to start systems often depending on the task. So, Lisa is going to her desk in
the morning at 8am,
00:04:09 she works at the headquarter office of Polaris with a regular desk setup.
00:04:16 At 10:30 Dennis, who is a truck driver for Speed Trans, a shipping partner of Polaris, is having

00:04:23 an engine problem with his truck. The truck broke down on what seemed
00:04:27 to be a shortcut, so now he's stuck in the middle of nowhere and needs technical support.
00:04:33 But first he has to call his scheduler. Glen, the scheduler at Speed Trans, just got the call
00:04:41 from Dennis and has to shift the delivery date, since Dennis won't make it the next two days.
00:04:50 And this is John, the buyer at the customer Mountain, and if he doesn't get fabric by tomorrow,

00:04:56 the production line will be affected. So, Lisa needs to get the information
00:05:03 that the truck broke down, and needs to make different arrangements
00:05:07 so Mountain can keep on producing. And this is exactly where our app is supposed to come in

00:05:14 and save the day with all this magic. So in the end, Lisa should be able to call John proactively

00:05:25 and tell him that he will get enough products to cover the delivery delay.
00:05:32 For instance, she could send over an intern in a truck for special delivery.
00:05:39 That would cover John, and he could still run his production line so far.
00:05:47 And since John's happy, Lisa's happy. So now at this point, we usually ask the end user a lot
00:05:56 of questions to clarify the circumstances and understand it better, like if they have a buffer
planned
00:06:02 in for those kinds of incidents. What are the service layer agreements
00:06:06 in place with customers? Or what data does Lisa need
00:06:10 to find out what products are affected? So summing up, first, Lisa needs to know
00:06:19 if all shipments are on track. If something happens, she needs to know
00:06:24 and find out what exactly is affected by that incident. Once she's learned that, she needs
00:06:30 to see if there is a chance that the customer still can get his product in time and, at best,
00:06:36 how to execute this the fastest way. So, coming back to our task types from last unit,
00:06:46 what do you think is represented here? Of course, it could be a routine task,
00:06:52 I hope not, but I rather see a mixture of reactive tasks and monitoring tasks, let's check out the
hints
00:07:00 for those two tasks. So, using Fiori notifications, we'll notify Lisa
00:07:08 if there is an incident. The flexible column layout and object pages could help her
00:07:14 to sort out what products have been affected. The list report floorplan enables her to search
00:07:20 for deliveries in case she's being notified by phone. Seems to be a match, let's look at the
monitoring task.
00:07:31 A meaningful KPI on home and overview pages means Lisa can see, for instance,
00:07:35 how many incidents happened and how many products are affected right away.
00:07:40 An overview page makes a lot of sense, since Lisa needs to monitor the domain of deliveries.
00:07:49 Okay, enough theory, let's get our hands dirty and tackle the problem in depth.

17
00:07:57 Okay, then let's try to help Lisa. Okay, first thing, we're starting on a whiteboard here
00:08:03 and we're trying to sketch just the rough information architecture that we're going
00:08:07 to build up in a mock-up tool in the next step. Okay, first, I think we should start on a
launchpad,
00:08:16 that's usually the one where we start, so let's just sketch a very rough Launchpad here.
00:08:24 We have some kind of the shell up here and we have usually a lot of tiles up here that start
00:08:37 the different applications. So, for the first path, just assume
00:08:43 that there is a notification of some sort that a system of the shipment partner sent off.
00:08:52 So we could have some kind of notification up here that is, in this case, there would be some
kind of an arrow,
00:09:00 so we have this white line here and we are saying that this is a delivery notification.
00:09:13 Okay, this would be the first thing, so we get a notification, so the first thing is that we want
00:09:19 to use this notification just to jump over to exactly the point where we can take action.
00:09:25 So this time, we have a problem with a delivery, so we need to take care of these deliveries,
see what kind
00:09:32 of items were on that delivery on that delivery truck. So we can jump directly
00:09:38 to this specific delivery, since we know which one it was. So, here we need another screen,
let's see right here
00:09:52 and zoom this up, so we can have a little more detail. Also, here we have the same shell as
the other screen
00:10:01 and since we were looking at one object, which is a delivery in that case, we could just have
00:10:09 an object page for that reason. So, first we could have an image, which is helpful
00:10:15 for a lot of things so it wouldn't necessarily here, but let's assume we have
00:10:21 a picture of the truck that is delivering all that, we have another an identifier that is delivery
00:10:31 and we have some of the identifying information up here. So, I know this is the delivery that I'm
looking at,
00:10:43 which is kind of important, and I might have some different aspects,
00:10:50 so I want to know what's on this delivery but I also have, maybe you need to know some
specifics about the truck maybe.
00:10:58 So we have different tabs down here and the one thing that we're interested in right now is
basically just
00:11:06 the list of items in that delivery. So, we could have a table here with a table header
00:11:14 and in that table, we have different items here that have some specifics and we could just see
okay,
00:11:24 for which customer is it, where does it go, when is it picked up, and these kinds of things.
00:11:29 So, in order to take action now, Lisa needs to find out which of those things are important
00:11:36 and which I need to take care of in a special delivery. So, they might not all be very important,

00:11:45 so we just need to pick out some and to pick out some of those we could have something like
a checkbox here
00:11:55 and just say maybe we have a status somewhere, saying this here is important, and this is
important,
00:12:02 and the rest is maybe not that important. So I just need to know which one of those
00:12:08 are very urgently needed so I can just pick those out. So I would just have to check this one
and this one,
00:12:15 and now I need to take action so I need some kind of a button or an action here, and we can
have this up here
00:12:24 and this button would read Create Special Delivery, maybe.

18
00:12:32 So, by clicking on that, I would need to come to a new screen. Just take this and, of course,
from here to that.
00:12:47 And on that new screen, I could create a special delivery, also
00:12:53 that one special delivery could be an object. So again, I have some kind of a picture here
00:13:00 that could read Special Delivery XYZ, and also we have the header up here.
00:13:15 So, and now I don't need the read only option, but I need an edit option, so I need to enter
some things.
00:13:23 So, I know which kind of customer is concerned, since this is picked up from the last one.
00:13:29 I also have a table back here, which lists now only those items that I picked,
00:13:38 and I think it was two. Yeah, it was only two, so I just delete those,
00:13:47 and, of course, I can add some. Maybe the customer called me and said, yeah,
00:13:53 we need this very urgently, so I had some kind of tool bar up here which features a plus or
Create,
00:14:04 which I can click and then select something to add to this list.
00:14:10 And I might want to have something like an option, how I want to deliver it to that.
00:14:18 So, I could have a drop down here that would say, okay, I can do that by truck or maybe if you
live
00:14:26 in a big city, you can have a bike messenger, which is faster then, or maybe by train since it's
very heavy.
00:14:37 And down here, we have a footer toolbar, which gives us the option to have a featured button
00:14:54 because that is the most common option that we choose here, which is Save and Cancel.
00:15:01 Once that is saved, I created my special delivery and I'm basically done here.
00:15:08 So, this would be like the golden path where everything fits right in here.
00:15:12 But there might be different paths, so it might not really be an option to have
00:15:17 a notification since the truck driver just called me, so this is where I need to take a different
path here.
00:15:25 And we would have, for instance, one of these applications on my launchpad, which would
say, maybe, Manage Deliveries.
00:15:38 And now I don't know which delivery it is right away, so I need to pick that out.
00:15:44 So, we would have next screen and now I need to pick out one specific item out of a list of a lot

00:15:54 of items, and that always speaks to me to get a list report where, Manage Deliveries,
00:16:04 we also have our shell and now I can filter down or search for specific delivery if I happen
00:16:12 to know the number, I can just put it in and look for it, otherwise, this is something where I
need to filter down,
00:16:21 is it a specific truck driver? Is it a specific weight that I'm transporting?
00:16:27 So, this is where I have my filters and I can just pick those things, that brings everything down

00:16:38 to a specific item count that I can manage. And right here we would have a lot of delivery items
with
00:16:48 a specific number, and among that would be my the one that I'm actually looking for.
00:17:04 Okay, clicking on this, and now this speaks for another option that we have.
00:17:09 This is 100% list report, so it goes from all the way left to all the way, right but if I'm not entirely
sure,
00:17:15 and I have to go back and forth a lot, so that speaks for a flexible column layout, where I have
a new screen.
00:17:22 So, as soon as I click on one of these items, the list would not disappear completely,
00:17:29 but just go back down to like 33% of the screen, so that's still the same.

19
00:17:36 I have my filter options just in a very small scale. And since now I've clicked on one of those,
and let's pick
00:17:47 the right one, and let's say we click on this one, so I still have this in here, 1234,
00:17:55 and this one would then be highlighted, and of course, the others would be still there, and now
I can see
00:18:04 the specifics of that on the right-hand side, which would be, again, our object page
00:18:12 that we had, Delivery 1234. And that's basically the same thing
00:18:23 that we have up here in the right corner. Here, it's in a flexible column layout
00:18:28 so we have two different layouts at once and you have a lot more options because now you
have
00:18:33 to switch back and forth to make sure that you find the right one.
00:18:37 And you have the same table in here. Again, with the checkmarks, so you can take immediate
actions,
00:18:45 and this one right here, and as soon as you click that special delivery, once you check those,

00:18:51 you will get back basically to the same screen here. You can choose if you want to have
several in one with
00:18:58 a flexible column layout or not. A different option is, like the segue here,
00:19:05 a different option is to have, again, another one here with also this one up here, this could be
00:19:16 an alternative pathway to this one so this could also lead to an overview page, which gives you
some more specifics
00:19:24 on all your deliveries. So if you have to manage a lot of your deliveries,
00:19:29 you could have an overview page that features, for instance, a large map, and on this map,
00:19:36 you would see maybe some streets going up and down and you can see all your trucks going
on
00:19:44 and this one maybe would be red, this one would be green, which is okay, and this one just got
to its destination.
00:19:53 And once you click on that, on the red one, you could get something like a pop up and this pop
up,
00:20:02 take this out here, this pop up can give you more information
00:20:06 on the one that you're looking at, Delivery 1234 it is again, and this has a status Broke Down.
00:20:19 So now he can take immediate action and from here since you identified exactly which one
you want to take,
00:20:27 you can go back to the screen or to the one in full screen options.
00:20:34 Okay, that looks like a pretty good overview of our information architecture,
00:20:40 let's see what that looks like in a better version in our mock up, and let's see how we can get
this interactive.
00:20:48 So, I have opened up my Axure RP 9 here already and I have also loaded up my stencils,
00:20:54 the Fiori 3 stencils, version 174 in here and I also included the fonts that come with the
package,
00:21:03 so that icon font and the font 72. So, I already created all the pages we're going to need,
00:21:09 I did that just clicking Add Page, and for the first page, we want to create the home screen.
00:21:16 So, what I'm going to do is use the search fields here to search for home, and I'm going to use
the variant 1 here,
00:21:24 just drag this in, and the stencil pretty much creates basically everything we need.
00:21:31 Just for time reasons, I pre-created some of the things that we're going to need, and going to
paste them
00:21:38 in here real quick, so we're going to change this title to delivery incidents here and there's one
incident here.

20
00:21:47 So we need a notification, so I can just go down here and put in notification and I got listed all

00:21:54 the different notifications. Again, I pre-created this here, I paste this in here
00:21:59 and I just position it right here where the notification would be positioned
00:22:07 and just for good measure, I added the badge, here, that we want to have in the notification
area up here
00:22:17 in the shell, so just give me the indication, there's one new notification.
00:22:23 So in the end, I want to click on here and get to the next screen, and the next screen is going
to be
00:22:28 the Delivery 1234 that I'm actually going to want to have a look at, so I have a new screen here
already.
00:22:37 And for this one, it's a specific screen where we already have all the details of that specific
delivery
00:22:43 that we're going to use, so in that case, I need an object page. I type in here object page, and
there's
00:22:54 an edit and a display version. Right here we're going to use
00:22:57 the display version, since I'm just looking at data right now, I'm not editing it yet.
00:23:03 So already here, this is created as a dynamic panel so you just have to double click it to get
00:23:11 the entire information, since there's basically a mask around it, so you can just see
00:23:18 the part that's actually important to you right now. And, okay, so if you want to change things,
00:23:27 you just double click it and you have access to the text inside, and this one
00:23:33 we're going to call Manage Delivery. I'm going to push this icon out a little
00:23:42 and give this a little more space. Okay, and this works with all the text fields
00:23:48 that we're going to go through. Since it takes a pretty long time
00:23:52 to do that now on the video, I'm just deleting those things and we'll just copy them in from a
different sheet
00:24:00 that I already did it in. But it's basically just double clicking,
00:24:05 and then changing the text. This is what I did here already,
00:24:10 this is just detailed information that we have about the delivery that we're going to manage
00:24:16 and just to display that a little better, I'm going to add a picture that you might
00:24:23 have for a product or whatever. So, the next section is the general information section
00:24:30 and then we have included items down here, so we're going to rename this
00:24:40 and I leave contact information for now. So again, the section is basically just double click
00:24:47 and change the text that you want to display here, I'm going to pull in a new one,
00:24:53 this I already created just for being faster and I'm deleting the old one.
00:24:59 Now, so you can just measure the distance too, since there was a third one here, that was
longer and now we have
00:25:09 to pull this up a little to get the right distance for it, there was one thing missing here,
00:25:19 needs delete it. To measure the distance here, you can just see
00:25:24 for all in the beginning there are different distance thingies, you can just put them
00:25:32 on here and then push this up, which we don't have to, since I already created this.
00:25:41 And I'm going to use this one here. And I'm going to delete the old table here.
00:26:08 Okay, so we have the general information here, this we can delete again, and the included
items
00:26:17 and there might be something below that but we don't need that right now, we just close this
dynamic panel
00:26:24 and basically have exactly the page we need. So we could choose here the products that are
very important

21
00:26:32 that need a special delivery and now you need an extra button here just to create this from the
selection,
00:26:40 and you can just type in button here and select the right one and rename this to maybe
something like this
00:27:08 and that's basically what we want to have. So now, just to make it more interactive, then we go
back
00:27:15 to the home section, and if I want to click on this here, on this notification, I'm going to be taken
right
00:27:21 into the right delivery here, and for this we're going to choose the default section of the stencils

00:27:29 that comes with Axure RP 9 here, and there's something called hotspot.
00:27:34 This is basically just a transparent area that you just pull over here and this I'm going to
change
00:27:42 to interaction, create a new interaction, click or tap, then we're going to open the links since all

00:27:49 of these are done as HTML pages, and then we just choose the one we want to navigate to
and that's basically it.
00:28:00 So, now that we have selected, or the user will select the ones that is needed as a special
delivery
00:28:07 and click this here, and then we need another page called New Special Delivery.
00:28:14 This also is an object page but... Change back to the right stencil version and here we're going
to choose
00:28:29 the edit version, since now we're going to edit information. And also here, I'm going to change
the page title
00:29:16 and basically replace all the information with the information that we need for our special
object from the stencil.
00:29:47 So, this time I took out the image, since it's a new special delivery there doesn't need to be a
picture
00:29:56 and we're going to take this one out, rename this to general information, and this to included
items.
00:30:37 Also here, I pre-created this to just save some time, but all these elements you can find in the
stencils like
00:30:47 an input field or select fields in different states, so whatever you need it is in here, you just
drag it in
00:30:55 and it's right there and you just need to change the labels and the entered information.
00:31:08 This we can delete, since it was the second and if it was the first time it would
00:31:14 be already scrolled under here, so we can get rid of this, don't need that here.
00:31:23 Something to just measure the distance and can delete this here.
00:31:55 There's something missing, Included Items is missing. And now something else, since we
entered all the things
00:32:19 that we wanted to, we also need this right here, which is a footer toolbar,
00:32:26 so whenever you have something that is completely done and you want to create it,
00:32:30 just click on here, on Save. And now how to get here.
00:32:36 So, if we go back to our special delivery here,
00:32:41 this is the button we're going to click. So again, you're going to jump into the default section,
00:32:47 get our hotspot, put it over here, and create an interaction for it, Open Link, and choose the
special delivery, and done.
00:33:05 You can also of course... so go back, choose different routes,
00:33:13 to just have certain ways. Okay, that's the easy way

22
00:33:20 and the second path I'm just going to put on as an additional video.
00:33:25 Great, today we talked about tools and designing for prototyping, we designed an application
00:33:30 that will help Lisa and we covered some common pitfalls within UX design.
00:33:35 In the next unit, we will cover end-user validation, how to come up quickly with themes with a
UI theme designer,
00:33:42 and where to pick up the right icon. Until then, thank you and goodbye.

23
Week 2 Unit 6

00:00:03 Hello and welcome to week two, unit six of our openSAP course,
00:00:08 SAP Fiori Overview: Design, Develop, and Deploy. Today we will focus on the DLD process
for success.
00:00:18 Checklists for floorplans. Validate your designs with end users.
00:00:23 The Theme Designer, the Icon Explorer. A designer's work is never done.
00:00:32 The design-led development process is just not a fancy graph. It is more of a condensed best
practice
00:00:39 from lots of professionals. It makes sure that you don't forget a step
00:00:44 or diverge in a completely wrong direction early without checking the course often.
00:00:53 If you use it, it makes sure that you do upfront user research with end users.
00:00:59 You fully understand the problem, not the users' proposed solution.
00:01:04 You always stay open for feedback. You fail during the design, not the development.
00:01:10 You constantly check with the users' goals. You don't talk about a solution but you show it.
00:01:17 You include end users from the beginning to the end, and eventually are successful.
00:01:28 Most floorplans like the list report come with some pitfalls depending on the situation.
00:01:34 If you need a search field on the floorplan, use the one in the filter bar.
00:01:39 Technically you could also add one to the table toolbar, but those two could cancel each other
out without knowing,
00:01:47 and that's why you shouldn't do that. The same with filters -
00:01:54 use the multiple filters in the filter bar and to avoid having additional
00:01:58 filters in the table, since they can cancel each other out. If your use case calls for quick action
for an item,
00:02:10 provide a button for each line. But if your use case requires to affect multiple
00:02:15 items at once, provide a checkbox per line so the user can work with more than one item at a
time.
00:02:26 If you use a grid table, a tree table, or an analytical table in your list report,
00:02:31 you need to provide an adaptive alternative for users of small devices like phones and tablets.
00:02:41 We are providing checklists for the most common floorplans, so if you're using one of those
floorplans,
00:02:47 quickly go through the relevant checklist just to make sure you didn't forget anything
00:02:52 and you sidestepped some of the commonly made mistakes. User validation is probably the
most important
00:03:02 part of guaranteeing your success when it comes to user acceptance and user experience.
00:03:08 We won't go through the entire process of user validation since openSAP already offers
00:03:13 very good classes on that topic. If you want to change how effective your users
00:03:18 are with your software, go check them out, but sometimes there might not be the time
00:03:23 or the budget for full-blown user validation, but that does not mean that you could
00:03:28 just cut that step out completely. Do some guerrilla validation.
00:03:36 This method is nowhere near as effective as the real user validation,
00:03:41 but it still helps to avoid some mistakes. For the guerrilla testing,
00:03:46 find a couple of colleagues maybe from a different department,
00:03:49 or ideally as close to the persona as possible, and ask them to fulfill specifically designed test
tasks.
00:03:57 The answers might not be as meaningful as from real end users,
00:04:02 but it prevents you, as a designer, from being gridlocked in your own mind.

24
00:04:11 If you asked either end users or colleagues, make sure that they feel comfortable
00:04:15 giving you feedback, after all, feedback is a gift.
00:04:19 So stay positive and friendly. The user is always right.
00:04:24 If he doesn't understand the UI or button on text, he doesn't understand it, so accept that.
00:04:32 It is a good rule to listen to about 80% and only talk about 20%,
00:04:38 you do not want to explain your UI. You want to find out if the user
00:04:42 understands it as it is. Ask only one question at a time
00:04:47 and ask this question openly. Remember, you do not want the user
00:04:52 to succeed at all costs. You want to find out if he does this on his own,
00:04:59 so don't ask leading questions or help them if it's not necessary.
00:05:04 Do not correct the user. And this one is the hardest - do not explain
00:05:09 your screen or defend it. It can be frustrating just to watch somebody fail,
00:05:14 but rather your tester fails than a real user later on. Now you have the chance to make
changes
00:05:21 and make your product better. In a lot of situations,
00:05:29 we need to grasp a lot of information in very little time. Icons help us to recognize categories or
products
00:05:36 way faster in a language-independent and often culture-independent way.
00:05:43 To support you in your design challenges, Fiori comes with an icon font to provide
00:05:48 you with lots of free enterprise and business-related icons.
00:05:55 You might ask yourself why icons are provided as a font and not as pictures,
00:06:00 since there seems to be no difference at first glance. Well, the first upside with icons as a font

00:06:09 is that they can easily be scaled without providing the icon in different sizes with a loss of
quality.
00:06:17 The second reason is that every font can quickly be colored, as a pixel-based image would
need
00:06:23 to come in different standard colors. So you might not be able to choose your color,
00:06:28 but how would I find the right icon for the design challenges I'm facing?
00:06:36 To help you with that, SAP created an Icon Explorer that lets you search
00:06:41 for keywords in different sets of icons. If you, for instance, search for "add", you'll find
00:06:49 several icons for either a general add, or specific add icons for photos,
00:06:54 products, documents, and so on. You will see typical use cases on
00:06:59 the context on the right side, and can directly copy the UI5 code, the icon itself,
00:07:05 or the Unicode for it. Until now, all the screens that
00:07:12 we designed look completely like SAP - the colors, backgrounds, and the logo
00:07:17 and the shell header. What about customers with their own branding?
00:07:24 What about a development partner or consultant that needs to make changes so it looks more
00:07:29 like the customer's corporate identity? Let's assume the customer has a style guide
00:07:36 and a Web site that looks like that. There are images, different colors,
00:07:40 and a different logo. How would somebody handle that?
00:07:46 So now we would need to go from something like this, to something like this - the background
image has changed,
00:07:56 the header logo has been replaced, and also the key colors and highlighted colors
00:08:00 have been adapted. This can easily be achieved with the Theme Designer.
00:08:08 Let me show you an example. Okay, I'm already logged in here in the UI Theme Designer,
00:08:14 and I'm going to create a new theme. So we have different themes to choose from.

25
00:08:22 There are also the legacy themes from even before that. We've got to choose one that is pretty
close
00:08:28 to whatever we want to create. I think the Quartz Light one is closest.
00:08:36 We've got to create this standard theme here, and I'm already on the launchpad.
00:08:44 So now we're going to change a lot of things. First of all, we're going to change the company
logo,
00:08:50 which is already in here, and I choose that and it's immediately updated up here.
00:08:57 Further on, I'm going to change a few colors. I'm going to change the brand color
00:09:06 we just featured in a few places. And as soon as I'm clicking out of here,
00:09:13 it's going to be changed in a few places, and I'm going to change the highlight color,
00:09:19 which is everything that is basically highlighted right now,
00:09:27 as this element is right here. And that's it for the first tab.
00:09:32 I'm going to change to the second tab, where more of the details we're going to change.
00:09:42 First off, we have to change the header, a quick glance, this is what we're going for.
00:09:47 So the header is completely white here, the tiles are white, and the icons have
00:09:52 this nice little brand color, as has the badge up here. So I'm going to go for the header color,
00:10:07 and change that to completely white, and it's changed right away.
00:10:20 And the next is the text and the shell interactive, the text and the interactive color.
00:10:31 Both have got to be the same color and it's updated right here, right away.
00:10:41 And shell interactive is basically everything that is interactive in the shell header right now.
00:10:50 Also updated. And then there's the badge background,
00:10:54 which is our key color, the bright yellow, going to put this into here,
00:11:02 and it's also updated right away. Next thing is the background,
00:11:08 I could change that to white, but since we already have a background image to choose,
00:11:13 I'm going to click here and select this one. And it's already looking pretty close
00:11:20 but we have a little bit of transparency here, so I'm going to change that to about 0.4,
00:11:30 and that's come on pretty close here. Last thing is the group header here that needs
00:11:39 a different color as well, so I'm going to change that.
00:11:46 And of course the tiles need some work. First of all, the title color needs some changing
00:11:57 so it gets to be a little more blue. The text color, which is the text just below.
00:12:13 And of course, right now we cannot see the icons right here because they are white on white.

00:12:19 So we have to change the icon color to the bright yellow and that's looking pretty much already
like
00:12:28 the one thing we were going for. Eventually, let me tell you
00:12:34 the designer's work is never done. Time changes, users change,
00:12:38 and requirements change. Since the beginning, we've come a long way from R/2,
00:12:44 R/2 was mainly functional on console. R/3 already provided a graphical user interface, GUI,
00:12:56 but it was still done with developments in most cases, and often confusing or overloaded with
functions
00:13:03 that came in over time. A pivotal point was SAP Fiori.
00:13:10 One of the reasons why we have SAP Fiori today is new requirements - companies wanted to
use
00:13:16 enterprise software on mobile devices, and with R/3, this simply wasn't working,
00:13:22 but this was not the end of it. For instance, the list report
00:13:26 that you see here did not stop there. It got more evolved - SAP added the collapsible
00:13:34 header to provide more space, and even more evolved when designers

26
00:13:41 added a floating toolbar, and also this is not the end. There will be new requirements,
00:13:50 new challenges that we designers have to face in the future. The list report has all products
00:13:57 that will constantly have to adapt and be redesigned if they want to stay on top of the game.
00:14:06 Let me give you some final hints. Try to use the design system as a standard.
00:14:12 I often heard that a design system limits designers, but I don't think that's true.
00:14:20 Start with a standard and then extend and rebuild as you need.
00:14:24 Some designers out there, they start every application from scratch
00:14:28 and end up missing a couple of pieces that the design system would already have covered.
00:14:34 Learn how to use the floorplans and layouts effectively. Most design challenges can be solved
with
00:14:42 standard floorplans and layouts. So knowing them well and knowing what they do
00:14:47 is key to a fast information architecture. Build a solid foundation before you go freestyle.
00:14:55 Use the SAP Fiori guidelines like a dictionary, not like a thriller.
00:15:00 The SAP Fiori guidelines have hundreds of pages. I would not expect anybody
00:15:05 to read through it cover to cover. But whenever you ask yourself
00:15:09 if a component can be used in a certain way, call up the relevant page
00:15:14 and see what the component can do in that way. After a while, you might know more than you
might realize.
00:15:22 The SAP Fiori guidelines are guidelines, not laws. Do not obey them because they are there,
00:15:29 obey them because they make sense. The user or the use case is king.
00:15:36 In the end, your use case is what counts. If the user knows what to do, can do it fast,
00:15:43 and he likes it, that's it. If you want to change something for yourself, then don't.
00:15:50 If you need to change something for the use case, then do.
00:15:55 SAP offers a lot of tools for you to design quickly and effortlessly, in most cases.
00:16:02 Try to use those tools as a standard and only find a way around if you need it.
00:16:10 And last but not least, never love your design. It is something that's supposed to work
00:16:16 for a user to make his job easier, and not to appeal to you. Always be open for feedback
00:16:23 and to change something for the sake of the user. That brings us to an end.
00:16:32 Today, we talked about why we follow the DLD process for success,
00:16:37 how to use checklists for floorplans, that we always validate your design with end users.
00:16:44 What the Theme Designer is, where you can find the Icon Explorer,
00:16:49 and that a designers' work is never done. Until the next unit, your development...
00:16:57 In the next unit, your development experts will tell you how to turn your design into code
00:17:02 and develop SAP Fiori applications. Thank you and goodbye.

27
www.sap.com/contactsap

© 2020 SAP SE or an SAP affiliate company. All rights reserved.

The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary softwar e components of other software vendors.
National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable
for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty statements
accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

In particular SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality
mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are
all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation
to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are
cautioned not to place undue reliance on these forward-looking statements, and they should not be relied upon in making purchasing decisions.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other
countries. All other product and service names mentioned are the trademarks of their respective companies. See www.sap.com/copyright for additional trademark information and notices.