Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
annette_stotz
Explorer


In the previous blog Discover the Unknown of the design-led development series, you got to understand the problem that your user is facing. Now, it is time to start creating your SAP Fiori app. The design phase continues true to the motto “all good things come in threes” with three steps: The product vision is refined via ideation, prototyping, and customer validation.


Iterative cycles are the heart of design-led development. Iterations improve usability and ultimately, the user experience. I can’t stress this enough – early improvements can save a lot of time and resources and lead to faster product delivery.

Hacking IdeationFrom inspiration to ideas


The goal of the ideation phase is to generate as many ideas as possible to solve a problem without considering technical feasibility. Get creative with the collective wisdom of your whole team – the more interdisciplinary, the better!

We all know what it is like when looking for new ideas. Sometimes, as much we try, we can’t turn on our creative brain. Or, in a group, people might hold back their ideas until they first hear the far-out ideas others come up with.

Help is on its way. An ideation workshop will inspire your team to better come up with ideas. Choose a space that encourages creativity and interaction. An open atmosphere, elevated tables and chairs, plenty of sticky notes and whiteboards, as well as natural light can have significant impact on the outcome. Maybe you can even take your team to a co-innovation space, like an SAP Apphaus. Check out the tips and tricks in the graphic below and your flipcharts will quickly be covered with sticky notes.


Start with a summary about the users’ needs and goals based on the Discover phase. Then, framing a ‘How Might We’ (HMW) question could open up for first ideas. No worries, you don’t need to be a great writer. It simply needs to be vague enough to explore numerous answers while not being too broad, for example “HMW make our shopping experience faster and more appealing?”

Once done, give your team a bit of time to write down ideas. Finally, cluster the ideas to find themes, and prioritize them based on user needs. Be fine with moving other ideas to a parking lot. Finally, don’t forget to capture your results so that your team can look at the overall goal, the functionality or roles at any time.

Prototyping


The next step, prototype, visualizes your ideas in prototypes. The SAP Fiori Design Guidelines help to spark ideas to provide a role-based, adaptive, simple, coherent, and delightful user experience. The guidelines do not only reflect best practices and examples, but also give an overview of floorplans, patterns and controls.

First, illustrate in a storyboard why the user likes to use the app, how the user performs his task step by step, and who he interacts with. Sketches and words tell the story best. Don’t focus on details; simply communicate the big picture. Then, establish a screen flow. It gives an overview of all screens that belong to the application and show the user’s motivation. A map can visualize the path users would take through the screens to fulfill their task.

Wondering how to start designing your app? Begin with a rough sketch, either on paper or digitally. Focus on the main screen elements. A concise title informs at a glance about a screen’s purpose. Give prominence to the most important pieces of content, such as fields and buttons. Use different background shading or bigger fonts to catch the user’s attention. Simple boxes could indicate where content is to be placed. Don’t hesitate to try out your sketches. Sketching is a powerful tool of communication.


Once you are happy with your prototype, think about its interaction details such as clicks, taps, data inputs, and other possible behaviors. Time to turn your sketches into digitalized clickable, so called high-fidelity prototypes, for example with Axure RP or BUILD.

Never too early to validate


Before you take your designs to development, make sure your design will work for your users. BUILD, for example, allows you to engage users for feedback plus you can see how they interact with your app. Define the goal of your validation so that you can create tailored tasks.

Ideally, your validation participants are your users. Ask how they would complete the task while you listen, observe, and take notes. This gives you a chance to identify problems. Do multiple users run into issues with the same feature? Such findings are a great opportunity to improve the effectiveness of your design. After the test, analyze your findings and discuss with your team how they would like to incorporate findings.

Ready to move on? Find out how to develop your SAP Fiori app by following DLD.