Adaptive Commerce in a Winter Getaway

Designing an Interactive App for SXSW

 

UX Design | UI | 3D Design

Project Overview

In 2018, Elastic Path partnered with Accenture Digital to produce an interactive experience to demonstrate the power of “Adaptive Commerce”. I was the primary UX / UI designer for the project, and my main role was to design a fully interactive iPad app that would be shown to attendees throughout the festival.

The app had to demonstrate a wide range of scenarios, including telemetry data, personalized offerings, and variable weather conditions to show how the commerce engine could be set up to offer just the right product at just the right time.

Challenges

  • I’d be working with a 3rd party agency who would determine the final look and feel
  • We only had a month to have everything built and designed
  • The interface had to represent a UI “within” a UI
  • Had to present a lot of data on a small screen and convey a lot of information
  • The interaction had to show multiple permutations of each state based on a set of conditions

Getting the Concept Down

Alpine Sky Creative Brief

First steps were sketching out the concept to achieve buy-in.The only direction we received from Accenture Digital was a vague mood board with some loose concepts and a logo for the ski resort.

Based on the concept of a “connected ski resort”, I had to visualize several scenarios based on three distinct personas, and how they might act in a variety of settings, from driving to the resort, to entering their hotel room, and finally to hitting the ski slopes. What would the weather be like, and how would that influence their decision to buy a certain product or not?

Building Out the User Flow

The next step was to understand the narrative that would be presented. I had to consider both the fixed demo that would be presented by the BDR team, as well as the possible variations that might come up when an attendee wanted to see an alternate scenario. Working with the Presales team, I decided to build out a userflow where each scenario is displayed in a “looped Storyblock”. Attendees would be able to see how each persona would be offered a different product offering depending on the weather and the time of day.

Time to Make it Interactive

Once the rough user flow and storyboard had been reviewed, it was time to show how all the scenarios and permutations might manifest.

Axure RP Logo IconAnd for that, I used Axure, because I wanted an advanced level of interaction to better articulate how the user might select different contexts in the experience.

Defining the logic took the most time, because I consider working in Axure almost like “pre-programming”. It also helped our iOS developers understand certain issues before they got their hands dirty in actual code building!

Taking it Up a Notch

It was time to craft some actual wireframes. This time, I needed to flesh out the actual “Inner UI” for the various states of the devices that lived within the iPad app. For example:

Alpine Sky Mid-Fidelity Wireframe Sally

  • The “John” persona needed to be offered a scotch while he checked in the lobby
  • The “Sally” persona needed to be recommended a spa getaway via her smart TV in her hotel room

These UI elements were based on actual interfaces, e.g. the iOS interface for the smartphone, and the Microsoft Hub for the hotel room.

I kept the design close to the existing experience of a commerce checkout flow, and used a notification popup style to indicate when the app would signal the user’s attention.

Generating Backgrounds

Due to communication challenges with the client, I had to step in and project manage that assets that were being developed by the external agency. Background elements had to match what they were creating separately for the interstitial videos. Fortunately, they were using the 3D software Blender, and I could easily open their 3D files. I recreated the backgrounds myself, to make the aesthetic consistent. These included a car dashboard, a hand holding a phone, a hotel room tv screen, and a wider view of the ski resort itself.

Refining the User Interface

After the Mid-fidelity wireframes  were created and signed off, it was time to develop a series of UI components for the developers to extract the CSS elements. A big pivot in the process came when we had to decide to switch from Portrait to Landscape orientation. This presented some challenges, since the original wireframes were all in Portrait mode, to accomodate the internal phone UI.

It was important to make the user aware of several key factors:

      1. Who’s POV (aka the persona) they were viewing
      2. What the current weather conditions were (for outdoor locations)
      3. Which scenario was selected
      4. Which state was chosen

Since the digital agency had chosen a very restricted colour palate with a pale teal as the only accent colour, I had to use it sparingly to draw the user’s attention to key areas. I made sure to keep the teal in the parts of the interface that were most interactive for the user. I kept the darker areas of the image restricted to the outer UI, to show a clear separation. I also used familiar iOS design patterns, such as the scroll widget for the scenario and state options.

Another late revision change was decided to create a “gods-eye-view” instead of the hotel room, to show how the system would use their telemetry and geographic data to determine the best time and location for all three personas to meet up. It was important to visualize this purely with the “Outer” UI to show a “behind-the-scenes” look at the data processing.

This slider shows examples of the final UI that was created:

Displaying the Technical Backend

In addition to the main app, I was also responsible for ingesting a table of Adaptive Commerce product suggestions and visualizing them in a unique way to show how the “Drools” recommendation engine was being used.

The two geometric shapes represent both persona above, and the relevant product listed below. The triangular spikes represent the levels of compatibility that each particular attribute has in common. The yellow section in the middle highlights a ranking of the most likely to least likely product recommendations.

Results?

The venue at SXSW had a great turnout, and Elastic Path was able to demo the app to a wide variety of prospects over the course of several days. The app ran smoothly and become a showpiece to highlight the strong relationship between Elastic Path and Accenture Digital. You can read a blog post about this experience here.

Back to Portfolio
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google