SAP Learning

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

Serving over 335k customers in 190 countries, SAP is one of the largest enterprise resource planning software vendors in the world - in fact, it’s estimated that 75% of all global business transactions come in contact with an SAP system.

The opportunity

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.

It's very hard to navigate because there's not one place to go to to find information and it wastes time

Setting the vision

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”.

Starting wide, generating & validating ideas

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.

Narrowing down and defining MVP scope

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.

Moving fast and keeping senior stakeholders informed

Daily stand ups meant blockers were quickly resolved, and weekly show-and-tells gave an opportunity for the wider business to have visibility and weigh in on important decisions. With teams from every corner of both SAP and Tangent involved, it was important to strategically bring in the right people at the right time. From a technical perspective, both tech teams worked in close collaboration to get the front- and back-end completed in time.

Scalable design system

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.

Our progressive approach

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:
  • Speed of development: with the focus being on getting to market quickly, JAMstack enabled our front-end to work in isolation from the other development work streams to ensure efficient workflow
  • Security: not only functional, this approach is highly secure by only exposing compiled markup and any logic kept safely behind APIs
  • Scaling: infrastructure can scale
  • Flexibility: the whole infrastructure is built with flexibility at the forefront. Content is pulled from Contentstack for a flexible and bespoke experience
  • Performance: the final product is optimised for performance. Improvements in base level performance as well as SEO and accessibility ensure a lightning fast and accessible experience for the end user

The business logic behind our tech choices

Widely adopted front-end framework
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.
Less bugs
We also make use of TypeScript to ensure the code we deliver has fewer bugs.
Progressive application framework
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.
Efficient development
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.
Headless CMS for an 100% up-to-date 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.
Collaborative approach
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.
Improvements in performance
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.

What’s next?

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.

At SAP, we pride ourselves on creating world-class digital products for our customers. The Tangent team completely understands this and we highly value their outside-in view. They aren't afraid to challenge our status quo and push us to disrupt the market with cutting-edge products. The best bit? They do it all so quickly.
Stefan Ritter - VP of Product, SAP Learning