Capping IT Off

Capping IT Off

Opinions expressed on this blog reflect the writer’s views and not the position of the Capgemini Group

Building the one stop retailers portal using Design Thinking, Agile and SAPUI5

Building the one stop retailers workplace portal for BSH Home Appliances Group using Design Thinking, Agile ways of working and SAPUI5 

In this blog, I will talk about how we collaborated with BSH Home Appliances Group to use Design Thinking, Rapid prototyping and agile ways of working to build a portal framework using technologies like SAPUI5, NetWeaver gateway, coremedia, e-spirit and adobe analytics.

The journey started from identifying and reframing the real needs using Design Thinking, to building a lean architecture enabling a quick start to the digital transformation journey in B2B space, ensuring optimal use of existing IT landscape and investment.

The Need and Vision:

During our Design Thinking process the needs and wants led to the “How might we design a one B2B portal solution?”, a single portal which can handle role based user contextualization, branding, internationalization and act as a one stop shop for retailers’ workplace. This one B2Bportal should be able to fulfill the following needs:


Product information, quick and exploded views, Quick search and compare functionality, Product Catalogues, price lists and Technical info, Real time price and stock, Media download, Role-Based View


Centralized, easy and fast purchase for appliances, spare parts and tools, real-time price and stock check, Order History and Turnover report 

Repair and Maintenance Service:

One stop for Repair Service Order booking, Job servicing and claim fulfillment

Easy to maintain Marketing Content:

Flyers, Brochures, Catalogues, Pricelists, Promotions, Marketing Content and News, User focused targeted campaigns and promotions.

Centralized e-learning and tools:

 Centralized access to e-learning, training, media download and other tools.


Improved User Experience with customer focus, multi-language and brand experience

Easy Access via Different browsers and devices:

Our Approach, Methods and Accelerators


The project was delivered with Agile methodology. Accelerators like Jira were used, as the scrum tool for sprint planning, release management, daily stand up calls and defect management. The project was delivered in 6 sprints, followed by a pilot Go-Live of 2 weeks. The final product for Go-Live went through 4 releases from the base release.

Design Thinking

Our design thinking methodology of Discover-Define-Design with multiple iterations was conducted to encourage collaborative ways of working. The short window of 3 weeks involved methods like User Shadowing, User Interviews, Storyboarding, User Journeys, Smart Canvas and Rapid Prototyping. The fully functional prototype then went through 3 iterations of review and testing.  

Use of AIE as the Design Space

Design thinking and Rapid prototyping has a big dependency on a Design space, our open plan AIE Munich facility perfectly fitted the bill. The use of smart boards, video conference, creative wall and live streaming enabled seamless participation across the globe. Following the success of the Design Thinking workshops, the AIE was used for the end of Sprint Show&Tell sessions involving the steering committee and C level leadership.

Performance Load and Testing

Performance being one of the key criteria, the solution was tested using service offering from Sogeti. It provided insights on load times and automated testing for the key processes from different parts of the globe. This tool also came in handy to de-risk login issues of 2000 users for Go-Live using the tools automation capability.


The Solution

The final solution had a very lean architecture with the ability to plug and play UI technologies or web services in the future. Netweaver Gateway acted as the hub exposing REST based Odata web services from multiple backend SAP systems and also providing OData services to other 3rd party legacy systems. Some of the features of the solution are as follows:

Home Page:

The solution consisted of SAPUI5 framework being the main backbone supporting internationalization, multiple brand theming, ability to switch Customer context like Customer Number/Brands/Languages.

Individual Apps:

The framework hosted UI5 apps for multiple processes like Create Order, Product Availability, Turnover Report and Order History/tracking. 


The build one deploy everywhere held true, with the UI5 solution being responsive on IE, Chrome, Safari, Mozilla on devices with ios, android and windows operating systems. We faced challenges related to retina quality images and html functionalities on ios, which were eventually overcome.

Product Information Management

The framework was supported by PICenter (Coremedia product) for all product information content/functionality and eSpirit for promotions and campaigns. 



Analysis of user behavior is important for our next releases and helps us gauge user acceptance or rejection of various functionalities and features. Adobe analytics was integrated into SAPUI5 and PICenter to get important information on the usability of the solution. Important aspects related to most visited pages, frequency of visits, peak usage during the day and others were implemented. 


The final solution which went live in Netherlands has seen a 34% increase in turnover via the online B2B portal, reduction in back office order processing and is now being globally rolled out to other countries through 2017 and 2018. 

About the author

Sumeet Nag

Leave a comment

Your email address will not be published. Required fields are marked *.