Project: SAP Sapphire

Overview

SAP is an ERP software company headquartered in Germany. SAP Sapphire is their premier event that takes place in mid-May each year:

Globally syndicated across 100+ countries
Worldwide in-person experience event with thousands of attendees
Virtual experience with over 10K attendees.

Business Goal:
Max Attendance for Pre, During and Post-Event states.

The Problem

The 2022 event was hosted on 3 different platforms with duplicate content between them. Each platform had it’s own url, masthead/footer, look and feel, etc. Based on survey feedback from the 2022 online attendees, users were frustrated by the confusing user experience.

Additionally, user data from adobe analyics showed high bounce rates on the events homepage, perhaps users were not finding what they were looking for. We needed to make the navigation less confusing for the users. Key issues the project would address:

Multiple websites across different domains  
Duplicate content, varied visual design
Confusing navigation 
Varied mastheads and navigation menus
Complicated registration process

My Role

I was assigned as the Lead Designer of the Events pod. I collaborated closely with many stakeholders including the Experience Manager, the Content Teams, User Research, SAP Brand , Performance Manager, and Platform Development teams.

The Audience

Mainly SAP customers and partners, typically not new audiences. SAP super users also attend, looking to advance their career.

Before

Screenshots from 2022

After

Screenshots from 2023

Team Structure

My Responsibilities

- - Discovery and Research
  - Information Architecture and Wireframes
  - Branding reviews/sign off on templates and page designs
  - Hi-fidelity mockups
    - Pre- during- and post-event states
    - All breakpoints including mobile
  - Manage the graphic designers on image + video production
  - IT handoff of designs
    - Create detailed specifications for components or full page specs
    - Monitor JIRA and Figma comments
  - Final UAT (User Acceptance Testing)

The Design Process

Step 1: Discovery

We began this phase with a UX Audit of the 2022 Sapphire site. This consisted documenting the existing page flow and analyzing key metrics to help us understand the problem space better.

Discovery also included a competitive analysis of the top industry events to keep up with any design trends or patterns.

Supporting documents that informed Discovery

Adobe Analytics
Workshop input from management and key stakeholders
Digital Event Strategy report from design agency
Interview Guide from design agency
Primary Research on Events
Requirements gathering from stakeholders and IT
CEM Personas

Step 2: IA & Wireframes

We adapted the newly developed Secondary Navigation with some minor customization. The landing zone concept template worked really well for the SAP Event pages. 

We needed a very clear navigational element to get users to their desired event page- desired experience: in-person (Orlando, Barcelona or Sao Paulo) or virtual. This helped users choose their journey. We established a technical requirement of needing a new AEM component on the splash page.

Step 3: Branding Exploration

This activity was a bit more organic and overlapped with wireframe/hi-fidelity mockups creation. You can see below it’s a bit of a visual playground since the layout of text and CTAs might affect the visual design choices and vice versa.

This was the first time the SAP Product branding - SAP Fiori System - was very consciously being integrated into the SAP.com web experience.

Supporting documents that informed Branding

Rebranding Document for SAP prepared by SARANKO

Step 4: Hi-Fidelity Mockups

Finalized Hi-fidelity mockups were created in Figma using our SAP Digital Design System. All components/elements in the design system are documented in Frontify are available in our AEM system. For every mockup we created multiple breakpoints: Desktop, Laptop, Tablet portrait, Tablet landscape and Mobile.

AEM Platform Virtual Overview

Registration CTAs were prominently placed in the Hero. As the user scrolls, the CTAs move to the secondary navigation which is pinned to the top of the page. On mobile, the CTAs appear in the nav and hero

Rainfocus Platform Sapphire Virtual Session Catalog

Rainfocus implemented our design system and built pages from the ground up.

Step 5: Oversee Graphic Designer

Once I finalized the template with the Brand team, I then delivered the template to the graphic designer (on the UX research+dev team). It was their role to create all image renditions and upload to AEM DAM (~20 images). Image and video production at SAP.com requires follows a digital asset management process+guideline for AEM.

Image types included different heroes across 4 event pages. The Rainfocus and WEG and Registration platforms had their own process + image repository.

Step 6: Implementation and UAT

Implementation

Making the page designs come to life is the moment of truth (and a bit of chaos!).
Implementation affected 3 different platforms: AEM, Rainfocus and WEG, so we worked closely with these different teams- each with a different processes.

AEM Platform
SAP.com is hosted on the AEM platform. This platform has the highest SEO traffic and most robust components and templates available. We created a new component that supported the various event “experiences” as they become available. Majority of IT communication was done either via JIRA or email or weekly platform <> DX sync.
(Figma recently added a JIRA plugin! DM me if you have experience!)

Rainfocus Platform
Rainfocus was the 3rd party platform that we only use for Virtual Events. We had to communicate the key Design System guidelines like the grid, spacing, typography, colors. Once that was established, we also provided the annotated page designs in all breakpoints. The Freeman Agency development team and SAP team were able to communicate directly in figma, where we would track all communications, questions and any needed design clarifications/updates.

UAT

Every page mockup had a separate UAT section in Figma. UAT was a very intensive robust process that included reaching out to specific stakeholders to enter items, communicating to the responsible party to address issues, and following up once the items were complete. We used a shared excel document for tracking purposes, but thankfully we had figma to talk through the solutions with the developers.

☀️ The Result

Overall, we successfully created a seamless unified experience across the various technology platforms. Now using a consistent visual design, design system and branding which was very well received across the in-person and virtual experiences.

Compared to the previous year, the event achieved 4x the number of visits and registrants; and 3x the number of attendees and post event sap.com interactions.

Virtual Sapphire Event Showcase

Sapphire Virtual Event included Session catalog, Channel Overview, Channel Detail, Livestream, On-Demand Dessions and the Newsguide. (Scroll images below)

Sapphire In-Person Showcase

Sapphire consisted of three in-person events as shown below: Orlando, Barcelona and Sao Paulo. (Scroll images below)

Page updated

Google Sites

Report abuse