User Experience Insights
UX Champions: Creating a UX-Driven Service Portal with SAP Fiori
A group of colleagues at SAP partner company All for One Group SE ( also called “All for One” ) advocated for improving the user experience of their customers and employees with dedicated services, including a centralized portal that could neatly offer everything in one place. Prior to these improvements, All for One consultants and customers were lacking an easy, centralized way to access various kinds of information and services such as contract details, support tickets, and user account information.
The new service offerings have made work easier for users thanks to its mobile-enabled services, an easy single sign-on process, and a harmonized user experience following SAP Fiori. They can access a wider variety of services, especially when on-the-go. In this blog post, some of the UX champions at All for One share the story behind the UX transformation of their service portal.
The UX champions at All for One
Rainer Betrich, Michael Manea and colleagues took on the challenge and acted as UX champions with both internal and customer end users in mind. These key players were the driving force behind the UX transformation project centering on All for One’s customer and employee portal:
- Rainer Betrich, Business Expert – Rainer is part of the SAP Excellence development organization and helps to promote and implement innovative solutions and concepts such as SAP Fiori
- Lars Woll, Senior Director of Development and Technology – Lars heads up All for One’s SAP Excellence Development Organization
- Timo Schmid, Senior Manager of Process Excellence and project lead for the employee-facing side of the enterprise portal – Timo is the project lead for All for One’s internal employee facing SAP Fiori project
- Michael Manea, Director Support and project lead for the customer-facing side of the enterprise portal – Michael is responsible for the seamless integration of SAP Fiori apps using SAPUI5 and brings process know-how to customers related to SAP ECC, SAP S/4HANA, Solman, and more
- Daniela Engert, Senior Developer focusing on SAP Fiori elements, UI5, and OData – Daniela focuses on the technical side of UX transformation using SAP Fiori elements, SAPUI5 and OData
These champions also acted with the support of their internal development and marketing teams, and initially with an external marketing agency and UX designers. Since the project began, they went on to establish a team of in-house UX designers to consult on any decision made in response to customer requirements, and have developed their own consistent corporate identity and design.
Customers needed easier ways of getting in touch
All for One primarily serves the SME market and provides consulting services for three key industries: manufacturing, automotive, and consumer. This entails over 2,500 customers across Germany, Switzerland, and Austria, and over 30,000 users. They have a broad range of key users, spanning logistics and HR, or working as CIOs and IT managers.
The greatest user needs that All for One repeatedly heard coming from their employees and customers was having easy access to their contract details, tickets, KPIs, and user account details (rights and permissions).
After attending several different technology fairs to look for the right kind of standalone solution to build their desired portals, All for One realized that there weren’t so many options out there. They needed a service portal that could support different types of apps and combine information and graphics. Michael adds, “The vendors at the fairs all said, ‘that sounds interesting, but we can’t build this!’”
Discovering the possibilities of the SAP Fiori design system
In the end, SAP impressed with their offerings and All for One implemented parts of SAP Fiori technology. “As a big SAP partner with plenty of backend engineers, we decided to give it a shot ourselves with SAP Fiori. We built an initial portal linking to the launchpad, as well as a ticketing app and a few more apps,” Michael explains.
Furthermore, All for One was eager to provide mobile services to their employees and customers, who work frequently on-the-go and in different locations. “Mobile usage was extremely important to us and SAP Fiori was the only solution offering a holistic mobile interface,” says Rainer.
“As a consulting company, our priority is to support our employees and consultants in various situations throughout the day so they can bring business value to our customers. That means supporting them wherever they are, with whichever device they use, and whenever they use the services. With a set of SAP standard apps in combination with some custom apps, all accessible via the SAP Fiori launchpad, we can deliver a mobile experience which goes far beyond what we had in the past,” stated Timo.
Beauty is in the eye of the end user
Building the initial service portal got the ball rolling and after one year of internal usage they did a review of what the portal looked like overall. Back then, they were still not aware of the value a design team or UX designers could bring, and so didn’t have any in their organization. Their developers had been building apps as they saw fit, but without any guiding principles or design guidelines. The outcome was an array of unstandardized apps. “We ended up having seven types of forms for users, and they were all different”, adds Michael.
It was time to really look at the portal through the eyes of their users. “At one event we hosted for SME customers in Ulm, we asked about what their wishes and expectations for our new portal would be.” Customers most asked for mobile use, more details about their SAP maintenance contracts (Standard/Enterprise), and access to contact details from their relevant contact persons such as Sales or Service Manager at their company. All for One took this feedback to improve every existing application on their service portal, and later went on to release new applications such as an Enterprise Service App for SAP maintenance contracts, an online shop, and more.
Later, in a company-wide initiative to update all their webpages and bring daughter companies into alignment with their own corporate branding, the UX champions also pushed to have the customer portal integrated in this drive for visual consistency. They wanted to offer just one target URL for customers. All for One hired UX designers with the know-how to assist in ensuring consistency around their logo and color usage. With the help of their agency, All for One created style guides for each button, icon, and other UI elements.
Two years ago, All for One then decided to try a new greenfield approach to better understand the customer journey and guide customers through SAP apps and technology. Together with their UX designers, the team analyzed the status quo and realized the importance of UX consistency. Their internal marketing team then gave exact definitions of each style and function to build every app again from scratch. The main challenge for their developers was implementing it all without any visual differences between the portal, apps, or devices.
Customers happy with a harmonized user experience
Today, the customer service portal works in combination with a content management system, SAP technology, and OData web services. All users are presented with one webpage after logging in with their SAP Single Sign-On credentials, where they can then access customized SAP Fiori apps and the SAP backend systems (SAP ERP, SAP CRM, the ticket system, and SAP webservice technology). For building their apps, All for One decided for SAP Fiori elements, which allows a simplified UI development fostering UX consistency and increasing both development efficiency and maintainability across releases.
“Instead of building every app around the content management system, SAP Fiori elements had the huge advantage of bringing all the logical SAP out-of-the-box validation checks to the frontend. This was a huge benefit for us and made the portal look great,” shares Michael.
And customers are enjoying the easy access to all their important data. “They tell us, finally, we can do everything everywhere. It’s a fingertip away and one customer journey!” Michael adds.
All for One’s UX outlook for the service portal
All for One is bringing UX to the forefront in all future decision-making. “UX defines how the customer both recognizes and gets in touch with your company”, Michael emphasizes its importance. “App usage has to be simple and consistent, if it’s too complicated you can lose the attention of your customers.” In practice, every incoming customer request is now run past their inhouse UX designer before any changes are implemented.
One of the next UX milestones All for One strives to reach includes creating new apps to show invoice details and new offers made by customers, an improved online shop offering a better experience, providing new products and services such as online trainings, and adding more self-services instead of tickets.
Each and every accomplishment starts with a decision to try. What started off as uncertain kept growing and evolving over years, and now the UX champions can be proud of their efforts and how they are making their employees and customers’ lives easier. Rainer summarizes, “Although it was a hard and rocky journey at times, this projects ultimately turned out to be very successful.”
To learn more about the SAP Fiori user experience, please visit the community topic page.
Make sure to also bookmark the UX Champions tag and the UX Champions overview blog post to catch all the stories in the series.
***Special thanks to Victoria Thomas for researching and writing this blog post.***