e‑commerce, luxury retail

NYC

Luxury e‑Commerce, UX Research and Design

Discovery and design of a responsive, global e-commerce platform.

decorative image for luxury retail

Project Overview

The goal for this project was to migrate our retail client’s e-commerce sites to a new backend platform while shaping the design and user experience.

The client was a multinational, fashion holding company. Their three brands specialized in luxury apparel, as well as shoes, handbags, and accessories.

Key background
Duration:
6-7 months
Location:
New York City
Agency:
Publicis Sapient
Tools:
Sketch, MS Teams, InVision

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

Woman shopping for high-heeled shoes
A case of men's watches
An interior of a fashion store

Approach

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.

Phase 1

E-Commerce UX Research

In phase 1, I gathered best practices in e-commerce UX research.

My work included collecting example screenshots from competitor websites, as well as reviewing aspects of their information architecture, and creating an animated demo.

At the end of phase 1, the team presented our work to the client, as best practice options.

Screen shot of Baymard Institute website
Phase 2

Design Sprints

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

Below are the main areas where I spent my time.

Global Navigation

We focused on global elements prior to beginning any other work in Phase 2.

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.
Screen shot of Sephora mobile shipping form

Example of main menu

My Account

The bulk of my time was spent on developing My Account.

We’d spent much of our time in phase 1 researching the shopping experience, so it was a surprise to shift to My Account. However, we regrouped and collected examples of best practices and competitors. I interpreted the client’s requirements into workflows and wireframes.

Functional Areas
  • Change & Reset Password
  • Navigation & Dashboard
  • Track Order Form
  • Personal Information
  • Purchase History
  • Payment Methods
  • Email & SMS Sign-Up
  • Returns
  • Communication Preferences
  • Save for Later
Screen shot of Dunelondon.com create account page

We reviewed how competitors like Dune London handled sign-ups.

Design Library

During 1-2 sprints, the client made a request for a design system. I helped the team get started.

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.

The process greatly reminded me of CSS frameworks. Typically the documentation starts by defining the typography, then builds to complex layouts.

Bootstrap framework, typography

Base typography styles

Bootstrap framework, jumbotron

Typography + placement + CTAs

Bootstrap framework, gallery

Typography + hierarchy + placement + CTAs + images

Product Pages

Design for the primary shopping experience was reassigned.

Due to changing priorities, we took on My Account instead of product page design. However, while we still worked on it, my contributions included:

  • Exploration of attribute selectors on product page
  • Exploration of similar style, cross-sell options
  • Reviewed page elements and order
  • Discussion of layout with visual team

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

Clip from a UI to select sizes for a product

Emphasis on size availability