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
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.
And 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:
- 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:
-
-
- Who’s POV (aka the persona) they were viewing
- What the current weather conditions were (for outdoor locations)
- Which scenario was selected
- 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.