Shopper Journey Tool

UX design, mobile UI design, product design
Tools
Sketch, Invision
Duration
08.2019
2 weeks
Company & role
UX internship @ Havas
Team
UX mentor and team lead - Andy Lin
visual designer - Jonathan Truong product designer - me  
Project overview
Cadillac Fairview (CF) invests in, owns, and manages commercial real estate. It owns and manages North America’s busiest mall: Toronto Eaton Centre. The retail shopping experience has not kept up with the pace of innovation since malls became popular in the 1980s. The industry is facing new competition especially during this age of e-commerce. In order to deliver new solutions to the aging retail experience, CF needed to learn more about the shoppers and their shopping habits.

The shopper journey tool is a website that filled with information about shoppers. The goal of the tool is to empower CF employees to turn this data into actionable insights and leverage it to solve business problems.
My contributions
Ideation and design exploration
Defining end-to-end user flows for web and mobile experiences
Developing high-fidelity wireframes and prototypes
Creating mobile UI designs
Context
Who are we designing for?
CF employees
What are the current problems they're facing? 
They want more information about shoppers to be able to inform innovative business decisions.
What do we have for the users?
An ethnographic research study was done to gather insights into CF's shoppers. Now that we have all this data about shoppers, we must develop a tool to present the results to CF employees.
What will they do with this tool?
this tool will contain user journeys, pain points and other insights related to a shopper's experience at the mall. It should be a CF employee's go-to platform for understanding shoppers when they are solving business problems.
Finding our vision
Why the interactive infographic format? 
How do we empower CF employees to see the value in this data and turn it into actionable insights for the users? Up the engagement level!
Interactive infographic formats allow users to easily access both quantitative and qualitative research data and also displays insights in an engaging format.
User persona
There are two very different user groups to keep in mind...
After gathering a list of different use cases, I separated them into two groups.
These two groups have very different user needs. One group is looking for some specific and the other group is looking to explore.
Ideation
Drawing inspiration from past success! 
Levers are a concept inspired by pivot tables. What are levers you ask? They are entry points that help users filter data and surface relevant insights they are looking for! 
CF showed our team a pivot table tool that was successful with users in the past. However, pivot tables are more effective when presenting quantitative data; both quantitative and qualitative data were involved in the shopper journey tool. We were inspired to mimic the idea and adapt it into an infographic to show both quantitative and qualitative.
I also looked to industry leaders for inspiration, like Airbnb and Google Flights. They helped me figure out how to design features that will be used for users with completely opposite user needs (if you remember the two types of personas from before). All these features will be levers for the sites.
Levers
Pain points
The pain points lever is useful as an entry point for type 1 users: users with an idea already in mind. They will be looking for something specific.
With over 50 pain points to choose from, there had to be some ways of narrowing down which to look at first. Here are 3 features to help: 

  1. Key word search: if the user already knows what they should be looking for, they can right away type that in.
  2. Category: since some of the pain points have very specific wording, users may not always be able to find what they’re looking for through keyword search. They can scan through categories of pain points to find what they’re looking for.
  3. Incidence and severity rates: will support users in choosing which pain point are the most critical.
The design challenge
What are incidence rates and severity rates? 
Incidence rates represent how often a pain point is likely to occur and severity rates represent how strongly the pain point will effect the client when it does occur.
These values show up often throughout the entire experience, it was an important to get it right. A few questions that needed answers were: 
  • Where should pain point severity be shown and what scale should it be rated on?
  • Where should the incidence rates of segment crossed with mode be shown?
  • How will a user determine which pain point is more urgent, is it based on severity rate or incidence rate? 
Here is a situation we ran into: 
The goal is to make the experience
  • Easily differentiate between various data points
  • •Minimize confusion for the users
  • •Present the rawest data possible
With that in mind, here are 4 possible solutions that were considered and why solution 4 was chosen: 
Levers
Segments & modes
Segments are types of shoppers and modes are the shopping occasions that shoppers engage in. This lever will be useful for users in exploratory mode and expert users.
During testing it was discovered that some of the nomenclature was hard for users to distinguish, Therefore, we made sure to add a quick description as a reminder. Incidence rates were added to help highlight which are the largest modes and segments population wise (for users who are exploring). Here are the final designs:
Levers
Heat map
The heat map show the frequency (using colours) of when one type of shopper (segment) will go on a type of shopping trip (mode).
This lever is targeted for type 2 users: users with exploratory intentions! For those who are unsure of where to start, the heat map provides an overview for which is the largest population of segment and mode.
,How to tell a story with data? 
Infographic
There was a ton of information to cover on this page and the goal was to find a narrative for the infographic page instead of an information dump. The wireframe below shows the first iteration which attempts to tell a story of a shopper's journey by starting with introducing the shopper's characteristics followed by mode descriptions etc. However, for a long page like this, we wanted to have a more strategic way of organizing the content.

For the second idea, we took a step back and looked at how the users are getting to the infographic pages. They are ultimately choosing a combination of one segment and one mode. Based on this, the top of the page starts with showing segment and mode specific information in a funnel style graphic and the rest of the page shows content with both combined. This iteration was chosen because it correctly conveys the relations between mode and segment data and how these new insights  will build on existing knowledge to inspire new perspectives.
Takeaways
I was super excited to start this project for CF, when I started the ideation stage so many ideas were all jumbled up together in my head as I tried to piece together the perfect solution that will revolutionize CF employee’s experience. It felt like it could take forever to get to that solution. My team did a great job of reminding me to stay grounded and take one step at a time. Instead of trying to piece together my design in my head, I practiced expressing ideas clearly to my team and the client. Since this is the first iteration of the product, there will be many more iterations to come in order to get it to that one perfect solution. I’m proud of how my designs turned out and I’m excited to see where further design iterations will take it!
© 2020 Annie Cui
LinkedinEmail