aritzia_sanslogo.png

Flagship Digital Retail Experience

UX/UI Design • Retail

Client

Canadian fashion retailer (confidential client name)

My Involvement

Design Lead: customer research (shop-alongs, usability testing, card sorting, heuristics evaluation), analysis, ideation, UX/UI design, testing, user stories

Our Team

Natalie Moore (Project Manager)
Blair Fast (Project Manager)
Mert Ozcan (Designer)
Divyen Sanganee (Designer)
Elise Sethna (Agile Coach)

Timeline

June - October 2018 (5 months)

background-pink.png

Problem Space

 

The client was looking to reimagine how they organize and deliver their digital customer experience to maximize sales and propel the digital business forward, specifically against two priority program areas:

Program 1: Product Finding

The search, browse and navigation experiences, which focus on the search function, product listing pages (PLP), information architecture, and sort and filter functionality.

Program 2: Product Evaluating

The product evaluation and shopping bag experiences, which focus on the product description pages (PDP), shopping bag and wishlist.

Our Approach

approach oct10.png

Drawing on business insights and customer research from the Discovery Phase, focus areas were prioritized. In the 1st Design phase, a multitude of designs were co-created with the client team and then tested with real customers, which then informed the focus areas for the 2nd Design Phase. In the 2nd Design Phase, two asynchronous cycles of continuous design, review, ad-hoc testing, validation and iteration took place. The resulting Ambition Concepts formed the inspiration for the Detailed (MVP) Designs, which stayed closer to the current site and was more immediately feasible.

01. Discovery

 

I. Business Objectives & Insights

Through a business objectives workshop and several deep dive sessions with the client’s Digital Experience Team, Social Media Team, Customer Care Team, among others, we developed guiding vision statements and principles for Programs 1 & 2:

 
 

Program 1 - Product Finding:

“An inspiring exploration of style while she effortlessly finds what she loves.”

Program 2 - Product Evaluating:

“Offering information she trusts to encourage a confident decision.”

II. Customer Research

Customer insights were derived through a mixed-methods approach to identify customer needs, wants, pain points and opportunities. Qualitative and quantitative research were conducted through:

  • a Google Analytics assessment;

  • a Voice of Customer assessment with the Customer Care Team;

  • in-store shop-along research; and,

  • 1:1 user research

3.jpg

In-store shop-along

Along with another researcher on our team, we spent time in stores in Canada and the US observing customers as they shopped to understand their shopping behaviours, frustrations and motivations. We also interviewed Style Advisors (i.e., customer service associates) to understand their experience and challenges with meeting customer expectations.

 
michelle.jpg

Customer Research

We also conducted interviews, usability testing, and card sorting activities to gain an understanding of customer’s pain points, preferences, and wants around information architecture and to better understand their online shopping behaviour.

 

III. Competitive & Industry Landscape

We conducted a competitive assessment to understand how the client compares to its competitors and usability leaders. As part of the assessment, we identified opportunities for parity with competitors as well as opportunities for innovation, in areas such as: navigation and category listing, search functionalities, bag/wishlist, and more.

We also evaluated the client’s existing website against the Nielsen Norman Group’s ten usability heuristics for user interface design to identify pain points for further research and potential improvement opportunities.

 
heuristics transparent.png
 

02. Analysis & Prioritization

Research converged into thematic analysis in which our team synthesized the insights into 9 Discovery Themes. These themes were used as a basis to select 10 Vision Areas to focus on for the Design Phase, which were ambitious from a technical and product design point of view.

discovery_sep5.png
vision_sep5.png
 

also created behavioural personas and an experience map to provide a digestible and referenceable means of understanding information. These design tools created a shared understanding of customer needs, frustrations and opportunity areas and were used to inform design decisions.

 
unfamiliar.png
budget driven.png
established omni.png
connection seeking.png
 
Experience Map sep20.png
 
 

Prioritization

Prioritization activities were then conducted between our Experience Design Managers and the client’s leadership team to define their digital key performance indicators and business value drivers, including:

  • Product click rate

  • Returning visitors

  • Checkout rate

  • Add to Bag rate

  • Add to Wishlist rate

The team then mapped opportunity areas using an effort / impact matrix and further prioritized four vision areas to ideate on and create prototypes for:

Product Listing Page (PLP): She is empowered with the right information on the PLP to guide her exploration.

Product Detail Page (PDP): She understands the product story which builds confidence in her decision.

Bag / Wishlist: She seamlessly saves items and selects her favourites for purchasing.

Information Architecture (IA) Structure and Labelling: She intuitively understands how items are grouped and labelled to encourage exploration.

 
background-pink.png

03. Prototyping

I created prototypes for the vision areas through frequent co-creation and design review sessions with the client’s Digital Experience Team. Idea generation and development included a mixture of divergent and convergent activities, such as rapid brainstorming sessions and getting inspiration from other retailers. We zoomed in and out multiple times to see the problem and solution space from different angles, which helped us not get stuck in a narrow frame of possibilities.

 
 

Paper sketches

I started developing low-fidelity wireframes for selected concepts.

transparent sketches.png
 

Wireframes & Information Architecture

After a few rounds of feedback with the client, we selected a few ideas to create wireframes for. Simultaneously, another UX Designer on our team created navigation variations based on what we heard during the 1:1 user research as well as insights from the competitive assessment.

wires transparent copy.png

04. Testing

Early designs were created and tested with customers to get initial reactions.

Core Aspects of Designs Tested

  1. PLP to PDP flow – creating more seamless connections between product list and details

  2. Easier ability to save or buy an item from any point in the journey

  3. The view of products, navigation tools, and wayfinding

  4. What information she needs and when to help her make decisions

  5. How she likes to manage and evaluate products she has saved and continue to purchase

 
tested designs_sanslogo.png
 

My team member simultaneously conducted tree test and card sorting activities to test the navigation variations.

IA pt1_transparent sans logo.png
IA pt2 sans logo.png
 

05. Iterations & Final Designs

After testing our initial concepts, we diverged the design work into two separate paths – The Ambition Concepts and the Minimum Viable Product (MVP) Designs.

I. Ambition Concepts

The Ambition Concepts targeted all 10 vision areas. Their purpose was to create the overall visionary future state for the digital space and also inform and inspire the MVP Designs.

concept_aug31_sanslogo.png
 

II. MVP Designs

Meanwhile, the MVP Designs took inspiration from the Ambition Concepts and stayed closer to the current site, rendering it more feasible in a short period. We focused on the 4 prioritized vision areas for the MVP in order to help us delve deep into the bare bones of the visual, behaviour and mechanics of the experience.

mvp_aug31_sanslogo.png
 
 

Product Listing Page (PLP)

Product availability: She wants to see product availability and colour options earlier on in her journey, so swatches are shown on the PLP. We also created a “Quickview” that displays stock availability so she can make a decision on the PLP.

Mobile image sizes: She likes seeing larger images to see product details, so we created a 1-column and 2-column view for her to alternate between.

Product Detail Page (PDP)

Product details: She likes knowing the story behind the product to help her make her decision so we restructured the flow and display of content on the PDP to better convey the product story.

Recommendations: She sees the client as fashion inspiration, so we surfaced other items worn by the model in the product image.

Bag/Wishlist

Selective checkout: She likes to save items for later but does not use the wishlist due to sign up barrier and lack of awareness. With a selective checkout, she can add items all into one space, select items to check out and leave the rest to return to later.

IA Structure and Labelling

We provided options for navigation variations and suggested next steps, including: understanding why she gets lost on the '“New” page, re-ordering L1 items, further categorizing “Features”, and incorporating imagery as part of the navigation menu.

 
Simple Mockup Free Scene v3_sanslogo.png
 
desktop white_sep20.png

06. Development & Handoff

I helped with the creation of detailed JIRA backlog tickets, which contained the design information and wireframe designs needed for sprints. Each ticket contained a detailed user story, the problem(s) the design addressed, research feedback, solution details, acceptance criteria and annotated wireframes. We then created roadmaps that mapped out the timeline of the initiatives and activities.

Impact & Reflections

Impact

Prior to this engagement, the client had never conducted any customer research nor had taken a customer-centric approach to their design work. This engagement helped the client develop knowledge, skills and lessons learned around adopting a customer-centred approach to their work, which will ultimately help drive the client towards achieving identified KPIs, such as sales, product click rate, and checkout rate, among others.

Reflections

Below are some lessons learned that I have kept in mind in my future engagements to be a better advocate for customers and integrator of business and design:

Don’t forget the “why”. Relate designs back to customer research, agreed priorities, business KPIs and program visions to support design decisions and get buy-in from leadership.

Balance focusing on the high-level user flow and zoning in on a specific screen design. It’s easy to get caught in the details of a specific screen. When needed, take things to a higher level to make sure everyone understands how a screen fits in with the overall user flow.

Involve relevant teams in the conversation earlier. Involve the Development and Merchandising team when the early concepts are developed to understand technical feasibility and merchandising requirements, and to ensure there are no surprises during handoff.


2018-04-28 07.19.56 2.jpg
 
Previous

Smart, Connected and Inclusive Community

Next

Online Credit Application Design