Salesforce + Google Virtual Adventure

Year: 2020
Client: Salesforce

Overview
The web experience is a content hub which showcases the partnership between Salesforce and Google. We leveraged Salesforce’s eccentric Trailhead branding to create a web experience for users to navigate and consume informational content.

Roles
UX/UI Design lead
Visual design

Impact

10,000+ unique visits to Google/Salesforce landing page
4,000+ total virtual quest completion

200% Increase YoY
20+ high quality virtual customer meetings

Context & ChallengeWe were tasked with creating an immersive and engaging digital experience for users to access Salesforce‘s content hub full of product demos and customer testimonials. The experience was considered a prototype to their big event Dreamforce.One condition of the hub was to utilize their highly photo realistic rendered assets. While we wanted to make the experience fully immersive and 3D, because of the extremely accelerated timeline, we had to find an alternate solution.

Key Target Users

35%

Marketing managers

23%

Ecommerce directors

17%

VP+ marketing

25%

others

We were able to discern attendee profiles from event registration data. Once we recognized the types of users that will be coming to the event, we were able to set the right level of interactivity for the web experience.

We identified marketing managers and Ecommerce directors are the main consumers of the content. We knew that the users are anundated with dry demo of the content and didn’t allow a true brand engagement. We decided to take full advantage of the fun Trailhead branding of Salesforce to create a magical experience while accessing important content.

The ProcessWe started from a list of content and an outline of required steps to access the content. We started to think about how to incorporate their highly rendered brand assets while maintaining unique interaction. Because we had an ample amount of rendered assets, a concept of collaging landscape assetes and animating the layers to transition and explore the content emerged. We thought exploring a trail map to unlock content is a great way to reveal content while keeping the users entertained.

Discovery

Existing web experiences that are unique were grouped together and presented to the stakeholders. The discovery phase consisted of looking at interaction modes of the sites and thinking about the fidelity of the rendered assets.

The stakeholders were drawn to the Panera Land of Clean expereince which is a fixed pov experience where users can click around different touch points to consume various contents.

User Flow

Users were able to select three chapters from the home screen. Once the user has watched more than half of the pre-recorded content, they were eligible to win a prize. Users were also able to learn more and follow up by clicking external links which led them to Salesforce Customer Representatives.

Initial UX

Concept 1

Two options were initially shared with the stakeholders. First concept was similar to what was already existing on Salesforce’s demo website. The concept utilized a standard navigation system for users to easily access the content.

Concept 2

Second concept explored UX which relied on users to navigate around the scene to find content. We landed on the second concept because we wanted to deviate from existing demos that are on Salesforce’s websites. This experience was thought of as a prototype for Dreamforce, a major event for Salesforce.

Refinement

Because we were crunched for time, we decided to leverage existing assetes as much as possible. The background screens were all created by collaging various assets. The touch points users click on were also collaged as well.

Conclusion
Collaging the landscape features allowed us to think about how the scenes can animate to reveal content. Just like old school cartoons using layered backgrounds, we decided to transition between scenes using the layers. The theme of exploring a trail to watch content matched well with the transition effects. Because we were limited with time, animating the parallax-collaged background achieved the immersive and interactive experience we sought after.

GIF sped up for presentation purposes

Since the website can be fully experienced on desktop, I decided that the mobile version should be simple and thorough. Although things like parallaex animations and other environmental bells and whistles are nice to have, they weren’t optimal for a mobile experience.

ReflectionAlthough parallax sites are becoming a thing of the past, when you need to achieve a fun interactive experience in a hurry, it is still a powerful tool. Thinking ways to animate the background using layers and scrolling interaction is always effective as well (since the dawn of animation). I’d love to do some more exploration with this simple apporach to create web storybooks or AR dioramas.

Full Team
Development: Magnus Oliv

Salesforce + Google Virtual Adventure

35%

23%

17%

25%

Next︎