- SAP Managed Tags:
We are Laura Tozzo, Product Manager for SAP Integrated Business Planning (IBP) for Demand and AI, and sujatha.nair, UX Designer Lead for SAP IBP.
In this blog, we want to share the journey of redesigning the User Interface (UI) of the Manage Product Lifecycle app in SAP IBP and the key lessons we learned along the way.
Project Team
In addition to us, our project team consisted of some highly experience colleagues:
- Rainer Moritz (Chief Product Owner, SAP IBP for Demand)
- Ralph Moessner (Product Owner, SAP IBP Product Lifecycle Management)
- Jan Kellmereit (UI developer, SAP IBP Product Lifecycle Management)
- Zora Sturm (User Assistace developer, SAP IBP)
- Natasha Haidl (UX Associate Designer, shadowing Sujatha in SAP IBP projects)
Everything started two years ago, when our Chief Product Owner (Rainer) realized that the whole product lifecycle management functionality in SAP IBP needed a makeover. It was clear that it was not providing our customers with everything they needed, but where were the pain points?
The start of the project
Our first step was to interview seven customers across different industries to understand their processes, identify gaps, and capture their wishes. Already at this point there was the need for strict collaboration between UX and Product Management: as product managers we are used to interacting with the customers, while Sujatha guided us on structuring interviews and analyzing their feedback.
After collecting all the feedback in a Mural, we proceeded to summarize the pain points and wishes that were mentioned by multiple customers and to prioritize according to their feedback and our knowledge of the product. Ralph, the product owner for the apps in question, was tightly involved in this process.
Focus on one persona
Once the priorities were clear, we set out to work. There were two main areas we wanted to tackle in parallel: functionality improvements and UI improvements. Customers indicated poor app usability, especially for beginners. While the app had a decent UI for experts, it was cumbersome for novices.
We started working on concepts for both user groups, and we did another round of feedback gathering with our customers. While they liked our general direction, there was still a lot to do. Unfortunately, we could not develop both use cases at the same time, so we decided to concentrate on the use case that was not supported properly in the current app: the beginner use case.
How did the old UI work?
Previously, a demand planner, while introducing a new product, had to:
- Create a product assignment to tell the system that the new product is referencing the old one,
- Define when the new product is going to be introduced to the market,
Maintain the date from which the old product is going to be withdrawn from the market.
Each of these steps felt separated and required a high number of clicks to go through. This included going back and forth from the overview page, which was very cumbersome for the demand planners. Sometimes, they felt lost as to what to do next.
Concept phase
First mockup and first round of feedback from customers
In our first feedback session with end users, each of the demand planners showed us how they worked with the app in their daily work. After each demo, they told us how confusing it was to understand what to do and which fields to fill, etc. It was clear we needed a guided procedure to streamline the process and guide them step by step, so that they would only need to maintain the fields and information that they needed.
It was during this session that we showed them our first ideas. Customers liked the guided procedure concept, but there were still many points they did not agree with. It was at this stage that we had decided we would provide different use cases based on the business needs (phase-in, phase-out, references only).
Second mockup and second round of feedback from customers
We went back to the drawing board and after revising the mockup with the team, we involved Zora, our User Assistance Developer, to refine on-screen text: we wanted to make sure that all the text that was appearing on screen had a reason to be there and the terms were clear. In this phase we also decided that the end-users should rely more on the in-app help (SAP Companion) for further clarification of the terms used in the app. We also decided to add a new use case, called Product Replacement, that would allow phase in of a new product and phase out of an old product at the same time, in contrast to the old app where the steps were somewhat divided.
Once we were satisfied with this second version, we contacted the same end users again. The feedback was unanimous! They were very happy with what they saw as we had also worked their feedback into the concept.
How we ran our end user sessions
Both the first and second round of feedback were done via a detailed walkthrough: we would show the mockups ourselves, by clicking through them, explaining each step in detail and asking for feedback after each.
Development Phase
At this point, since our end users were happy with our concept demonstrated in the mockups, we started development.
This was the longest part of the project: ensuring the new UI matched our mockups and retained all old functionality was not easy and required constant testing. Jan, our dedicated UI developer, played a cricual role in this phase.
Validation Phase
Once the development was done, and before the official release, we reached out to the same end users for a final validation. We gave them a test script focusing on the Product Replacement scenario (a new product replacing an old one) and let them test the beta version of the app themselves, meaning they actually had to reproduce what they would do in their daily job. This allowed us to confirm the usability of the app and to find a few bugs that were still hidden.
The new UI allows users to:
- Start the Product Replacement scenario
Be guided through settings from start to finish
In the new UI, the user is guided step by step in one flow through all the necessary settings: referencing the old product, defining go to market dates for the new one and withdrawal dates for the old one.
If you want to see this in action, here is a demo video:
The importance of the Settings for Product Lifecycle app
While the new guided procedure already improves the usability a lot, it works best when used together with a Settings for Product Lifecycle profile.
The Settings for Product Lifecycle app is a related app where administrators can define profiles for the users: in these profiles certain features can be turned on or off and default values can be defined depending on their business needs. This ensures that demand planners only see what they need to see based on their business requirements. To find out how to use the app, check the following videos:
Lessons learned
- Start early: involve the UX designer in the very early stages of your product development.
- Take your time: the journey might seem long, but it is worth it.
- Listen to your end users: they know what they are missing! And it doesn't hurt to ask. Also, keep asking for feedback along the way. From our experience, end users want to be part of the process.
- Partnership and trust are key: a good product is never a one-person job. To get things done well, you need everybody onboard.
Conclusion
The new UI was released with SAP IBP 2311 and is now available in customers’ productive systems. Although there are still a few things we need to improve on (we will never stop improving!), the feedback we have received has been overwhelmingly positive.
Here are some quotes from our end users:
- “It’s very clear and detailed step by step; what they [used to] struggle with is that they do not know what field to fill or to leave empty because it not self-explanatory. It is a lot easier to understand and maintain now. Planners only need one-time use to understand where to click, second time around they already know everything, and they go quite fast”
- “I think the visual is very clean, it feels like you really focus on the things that matter.”
- “UI is more friendly and easier to navigate. Much easier to use and understand also for inexperienced users. Before that we created guidelines for them to [teach them on how to] use the old app. Now it is easier to handle.”
- “Very easy to use the product replacement instead of multiple product assignments. Overall, it looks great!”
A thank you message
A big thank you to our team for their dedication. Even if the journey was long, it was definitely worth it. For the next app, we are ready to go through the process all over again!
Also, a thank you to our customers for their continued cooperation. We could not have come this far without your feedback!
We hope this blog gave you an idea of what it is like to create a new UI for an existing app in SAP IBP. If you are an SAP IBP user, please go and check the new app out! And do not hesitate to contact us for any questions.
- Sujatha Nair, UX Designer sujatha.nair@sap.com
- Laura Tozzo, Product Manager laura.tozzo@sap.com
| User | Count |
|---|---|
| 11 | |
| 8 | |
| 6 | |
| 5 | |
| 4 | |
| 2 | |
| 2 | |
| 1 | |
| 1 | |
| 1 |
