A new MVP learning platform for SAP launched in less than 100 days

SAP is one of our longest-standing clients. So when they needed help to deliver an MVP in time for their global customer conference attended by 30k+ of their customers, they turned to Tangent to deliver.

SAP has lots of different platforms (and brands) their customers use for training and CPD, which was causing a problem. Research by SAP found that for first-time users, the differences between these platforms (such as Open SAP, SAP Training, SAP Learning Hub, SAP Community) was very confusing.

The vision for the MVP was to create a single platform that over the next 4-5 years will become the home for all SAP Learning. No more jumping between platforms, logging in multiple times or experiencing disjointed user and brand experiences.

Our mantra became “One experience, one destination”.

With the deadline being so tight, we worked very collaboratively with the SAP team in an agile set-up. We created an embedded team of product designers and developers working together to explore and validate solutions.

The process began by translating what we heard from user and stakeholder interviews into product principles that would guide our teams and, more importantly, made sure we stayed true to the project’s vision.

We then spent the first 4 weeks rapidly exploring and prototyping different potential user journeys. Our approach was to generate lots of different ideas for the different stages of our users’ journey. We tested concepts for onboarding journeys, content discovery, consumption, account management, loyalty and gamification.

We agreed the focus of the MVP should be on the consumption of learning. This is after all the heart of the platform, so making it effortless for our users to jump in and out and learn on the go is critical to success.

We focused our efforts on designing an immersive learning experience that allowed users to freely navigate and cherry-pick the content they need to learn. For our more inexperienced learners, we used quizzes and interactive elements to help them retain knowledge.

Bookmarks and notes were all important requirements from our initial research, along with access to communities to get answers to questions when our learners needed help or became stuck.

The new platform is going to become a key digital asset for SAP. So it was important we set ourselves a design foundation that we could build upon over the next 4-5 years.

Therefore, the project was also used as an opportunity for us to push SAP’s existing brand guidelines to make the experience more visually engaging for learners. More relaxed copy, refreshed colour palettes and gamified elements helped to bring the learning proposition to life.

SAP Learning uses a JAMstack architecture (JavaScript, API and Markup) integrating with the headless CMS, Contentstack. This is becoming a de facto approach to how we approach greenfield projects here at Tangent, down to the numerous benefits for our architects. They include:

The website uses the JavaScript library React so that we can easily build user-interfaces which scale well as the project grows. Since the framework is so widely adopted, there’s no shortage of developers both able and keen to work on such an intuitive system.

We also make use of TypeScript to ensure the code we deliver has fewer bugs.

We use the React framework Next.js which allows us to serve statically pre-rendered pages, leading to faster site performance for users and allowing search engines to better index the content of the site for higher rankings.

The website was styled using the SaaS framework, allowing us to define a theme based on the design system for a much more rapid development experience.

The front-end is driven by data from headless CMS Contentstack as well as various custom APIs built by the SAP teams. Our use of incremental static regeneration means that if data from any of those sources are changed, the static pages will always stay up to date - a solution we’ve also previously built for Sky. Here at Tangent, we also do a lot of work with Contentful for brands such as REED and recently Umbraco’s new headless service Umbraco Heartcore for UKPN and Egis. Besides being the best choice in terms of regeneration, they also benefit from being a managed service with hosting and maintenance support with SLA around uptime and incident response, as well as automatic upgrades.

We worked very closely with the SAP development teams on the overall system’s architecture, data modelling and approach before owning the front-end workstream. Due to the tight deadlines imposed by SAPPHIRE NOW there were also separate workstreams for our local API, system integrations and quality, which all worked independently following the rapid development model made possible by architectural choices.

Thorough tests by the Tangent QA team show that the new SAP Learning platform is also providing a much faster experience for the end user. The new platform achieves a 46% improvement in the base level performance score (based on key page quality metrics from Lighthouse), with the greatest improvements in First Contentful Paint and Cumulative Layout Shift. The team also generated a 10% uptick on the Best Practices score; a 22% improvement in the Accessibility score; and an 11% boost to the SEO score.

Our MVP launched at SAP’s SAPPHIRE NOW 2021 global conference. We launched as an open beta with a single learning journey: ‘Building Extensions with SAP Extension Suite’.

We’re proud to have delivered a slick and polished first experience of the MVP, in one of the tightest turn-arounds Tangent has ever done.

We will be running the beta for a few months and actively encouraging our early adopters to provide feedback using a survey in Qualtrics.

As with any new site, it’s now that the real fun begins. We’re looking forward to learning more about our users and building on the MVP to deliver even more value to SAP’s learners.