e‑commerce, luxury retail NYC

NYC

Redesigning a Luxury e‑Commerce Experience

Redesign of the e‑commerce experience for three luxury retailers — within the context of a new backend implementation.

Role:
UX Research and Design
Company:
Publicis Sapient
Area:
Retail, Luxury, e-Commerce
Duration:
6-7 months
decorative image for luxury retail

Agency Profile

Business Management consultant

Publicis Sapient defines itself as a “digital business transformation company”.

Headquartered in Boston, MA, with offices in North America, the Asia-Pacific region, Europe, and the UAE. My office was located in New York City.

Formerly: Publicis.Sapient, SapientRazorfish, Sapient Consulting, SapientNitro, Razorfish, Sapient Global Markets, Sapient Public Sector, Sapient.

Client Profile

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

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

Team Overview

The team was highly collaborative and got along well. We spoke up for each other, provided feedback, and shared insights on each other’s work.

One thing that helped us work well together was using retrospective sessions to reflect on what went well and what didn’t. It was a fantastic team.

Project Overview

An e-commerce site migration and UX revamp.

My role was to help provide guidance for the front-end on best practices, such as when to take advantage of the platform’s built-in functionality and when to deviate; and I provided new interaction designs (wireframes or demos).

The challenge was that our design and functional choices needed to conform to technical capabilities, budget, and schedule.

The project experienced several pivots, so flexibility and an agile approach was important to success.

The project had 2 phases.

For all teams, the first phase was understanding the problem, conducting research, establishing an overall look and feel, reviewing any previous work, etc. Second phase was implementation.

Client requested we take a mobile-first approach.

The UX strategy for the two phases consisted of a research phase, followed by a design phase:

Phase 1: Research
  • Assess existing sites and competitors for usefulness, usability, content, and design
  • Identify and document meaningful patterns and best practices
  • Provide recommendations to the client team
Phase 2: Design
  • Apply best practices from phase 1 to the design of navigation, information architecture, and interaction design
  • Work cross-functionally with product management and engineering

Phase 1: UX Research

The goal of our research phase was to gather examples of best practices and conventions within the luxury retail market. The research phase took approximately 6 weeks.

Identify and Document Best Practices

I used sources like Baymard Institute to find and collect best practices used in online retail.

We reviewed many other websites, including gathering screenshots from competitors, the current website, and the new CMS. I created an animated demo.

This work was helpful later in the project, when we could refer back to these findings during the design phase.

Screen shot of Baymard Institute website

Phase 2: Design Sprints

The goal of the design phase was actually creating the new designs. Our schedule followed a cycle of 2-week sprints. We collaborated with our client (product owners), who shared requirements in Confluence.

Global Navigation

Early Sprints

Early in this phase, we began focusing on the global navigation, which included:

  • Site Map
  • “Customer Care” (FAQs, Shipping, etc.)
  • Main Menu
  • Breadcrumbs

We discussed topics such as form elements, for example.

Screen shot of Sephora mobile shipping form

Entering shipping information on mobile

Product Pages

Mid-Sprints

We began to explore options for product pages. I worked with the visual designers to explore UI options for attribute selectors commonly found on Product 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

Clip from a UI to select sizes for a product

Emphasis on size availability

Design Library

As the product page sprint got started, the client’s long-term priorities changed. They made a new request for a design system. The client’s request included elements they wanted to be included in the first pass.

The project had been planned well, but internally it caused a bit of a scramble on how to complete this unscheduled task.

With experience using CSS frameworks, I felt solving the client’s request should focus on showing how the components could be built. I created a deconstructed design library building on the idea that a design library is like a CSS framework.

How a Design Library is like a CSS Framework:
  1. Start with typography.
  2. Next combine typography with hierarchy and placement.
  3. Finally put it all together with images, and you start getting a website.
Bootstrap framework, typography

Base typography styles

Bootstrap framework, jumbotron

Typography + placement + CTAs

Bootstrap framework, gallery

Typography + hierarchy + placement + CTAs + images

My Account

Later Sprints

After the design library, the UX team remained focused on My Account while the visual team continued with the design library.

During this sprint, I created wireframes, and workflows where needed. We covered a lot of functionality, including:

  • 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.