Flagship Digital Retail Experience
UX/UI Design • Retail
Canadian fashion retailer (confidential client name)
Design Lead: customer research (shop-alongs, usability testing, card sorting, heuristics evaluation), analysis, ideation, UX/UI design, testing, user stories
Natalie Moore (Project Manager)
Blair Fast (Project Manager)
Mert Ozcan (Designer)
Divyen Sanganee (Designer)
Elise Sethna (Agile Coach)
June - October 2018 (5 months)
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.
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.
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
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.
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.
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.
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.
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
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.
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.
I started developing low-fidelity wireframes for selected concepts.
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.
Early designs were created and tested with customers to get initial reactions.
Core Aspects of Designs Tested
PLP to PDP flow – creating more seamless connections between product list and details
Easier ability to save or buy an item from any point in the journey
The view of products, navigation tools, and wayfinding
What information she needs and when to help her make decisions
How she likes to manage and evaluate products she has saved and continue to purchase
My team member simultaneously conducted tree test and card sorting activities to test the navigation variations.
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.
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.
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.
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.
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
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.
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.