Allison Walker | Work: Luxury Retail

Project Overview

Our project was to introduce design updates to our client’s e-commerce sites during a CMS migration. Our client, Tapestry, is a specialist in luxury footwear, premium handbags, accessories, and apparel (Stuart Weitzman, Kate Spade, and Coach).

The first phase (6-8 weeks) focused on gathering examples of best practices and conventions within UX for e-commerce and luxury retail. The second phase (4 months) focused on developing wireframes to document functionality.

Key background

Duration:: 6-7 months

Location:: New York City

Agency:: Publicis Sapient

Tools:: Sketch, Keynote, InVision, Zoom, MS Teams

My role was as a contract UX Designer. I worked on a team of 5, including creative directors and visual designers. I conducted competitive research, created wireframes, sitemaps, and other tasks.

phase 1: e-commerce research

UX Research in E-Commerce

I gathered best practices in e-commerce UX research using Baymard as a major source. I also collected example screenshots from competitor websites, for the product detail page and other parts of the site. My work also included reviewing aspects of the sites' information architecture and creating an animated demo.

Screen shot of Baymard Institute website

Using Baymard Institute for examples of best practices and conventions.

Example of PDP from competitor website.

Phase 2: Design Sprints

Design Sprints

In the second phase of the project, we worked with the client on requirements in Jira, which we used to develop wireframes, workflows, sitemaps, etc.

Below are the main areas where I spent my time.

Global Navigation

I focused on sitemaps and exploring information architecture. I also considered the interaction design and functionality of global styles.

Global Elements

Main Menu and Site Map: Where items should live, and how do menu functions work.
“Customer Care” (FAQs, Shipping, etc): Used the site map to review global menus across three sites.
Breadcrumbs: Searched for examples of breadcrumb best practices, for site navigation.

Product Pages

The client team ultimately decided they wanted to work on product pages in-house. However, while we still worked on it, my contributions included:

Options for Mini cart, Save to Favorites, and Find in Store
Exploration functionality of attribute selectors (i.e., drop-down vs buttons for selections)
Exploring options for related styles and cross-sell
Discussions of layout with visual team

Reviewing competitor PDP pages.

Clip from a UI to select colors for a product

Emphasis on color variety

Clip from a UI to select sizes for a product

Emphasis on configurability of fit

Emphasis on size availability

My Account

The focus on the user account pages included collected examples of best practices and competitors. I interpreted the client’s requirements into workflows and wireframes. Some of the workflows were simple arrows between wires. Others used simplified wireframe/thumbnails to focus on functionality.

Functional areas for the account pages included:

Change & Reset Password
Navigation & Dashboard
Track Order Form
Personal Information
Purchase History
Payment Methods
Email & SMS Sign-Up
Returns
Communication Preferences
Save for Later

Comparing different structures of account menus, based on competitor websites, using low-fidelity wires.

Low-fidelity wires of using different account menus styles.

Comparing email and SMS sign-ups across sites.

Workflow for track order, guest checkout.

Workflow for track order, split shipment.

Design Library

Using the visual styles previously created by the visual designers in the pattern library, I built a deconstructed design library to demonstrate the construction of complex elements.

Base typography styles

Typography + placement + CTAs

E‑Commerce Redesign for Luxury Retail