Shop Relaunch User Research Information Architecture Prototyping User Testing

Shop Relaunch ・ User Research ・ Information Architecture ・ Prototyping ・ User Testing

Improving the digital shopping experience at Tom Tailor

Improving the digital shopping experience at Tom Tailor

TL;DR

Project Overview

Client

Tom Tailor

Year

2021

My Role

External UX Consultant and Designer (Team: 2 UX Designers via best it GmbH)

Main Goals

As part of a planned change in e-Commerce technology to the headless commerce engine “Scayle”, the store was supposed to be completely revised within the scope of technical prerequisites and existing corporate design guidelines.

  • Improve the overall user experience, increase usability and clarity of webshop

  • Establish a mobile-first approach

  • Build a scalable design system

  • Support business performance

Our Contribution

During the project I worked at best it GmbH, the delegated agency. I was a key member of the core project team, which included two UX designers, responsible for delivering the comprehensive suite of services outlined below.

User Research

Understand the status quo, the environment, and Tom Tailor's customers

Methods

  • Web Analytics
  • Heatmaps
  • User Interviews
  • Onsite Surveys

User Research

User Research

To better understand consumer needs, we used various user research methods during the discovery and define phase.

To better understand consumer needs, we used various user research methods during the discovery and define phase.

Insights

Insights

Vision & Strategy

Synthesizing the full breadth of our user research insights, the following key areas for action have emerged:

Product presentation

  • Enhance visual storytelling to communicate product quality through imagery

  • Provide clear and comprehensive sizing and fit guidance

  • Surface detailed information on materials, manufacturing processes, and care instructions

  • Integrate customer reviews as a trust-building element

Inspiration

  • Prioritize content-rich pages to capitalize on their stronger performance

  • Elevate inspirational content to drive engagement and aspiration

  • Showcase new arrivals and product launches more prominently

  • Surface complementary products to encourage complete outfit discovery

Customer loyalty & retention

  • Develop stronger incentives to reward and retain existing customers

  • Clearly communicate the benefits of having a customer account to drive registration and engagement

User guidance

  • Tailor the experience to address distinct behavioral patterns between male and female users

  • Elevate search as a primary conversion driver, leveraging its already strong performance

  • Optimize assortment access and filtering to unlock untapped potential

  • Eliminate dead ends to ensure a seamless and uninterrupted browsing journey

  • Increase the visibility of interaction triggers to guide users toward key actions

  • Make new arrivals more prominent and easier to discover

  • Introduce a dedicated collect or save functionality to allow users to curate their favorite products

Brand building

  • Address the divergent brand perception between new and existing customers to create a cohesive brand experience

  • Establish and communicate clear unique selling points to differentiate the shop from competitors

  • Strengthen the sense of personal and direct customer engagement throughout the experience

Product presentation

  • Enhance visual storytelling to communicate product quality through imagery

  • Provide clear and comprehensive sizing and fit guidance

  • Surface detailed information on materials, manufacturing processes, and care instructions

  • Integrate customer reviews as a trust-building element

User guidance

  • Tailor the experience to address distinct behavioral patterns between male and female users

  • Elevate search as a primary conversion driver, leveraging its already strong performance

  • Optimize assortment access and filtering to unlock untapped potential

  • Eliminate dead ends to ensure a seamless and uninterrupted browsing journey

  • Increase the visibility of interaction triggers to guide users toward key actions

  • Make new arrivals more prominent and easier to discover

  • Introduce a dedicated collect or save functionality to allow users to curate their favorite products

Inspiration

  • Prioritize content-rich pages to capitalize on their stronger performance

  • Elevate inspirational content to drive engagement and aspiration

  • Showcase new arrivals and product launches more prominently

  • Surface complementary products to encourage complete outfit discovery

Brand building

  • Address the divergent brand perception between new and existing customers to create a cohesive brand experience

  • Establish and communicate clear unique selling points to differentiate the shop from competitors

  • Strengthen the sense of personal and direct customer engagement throughout the experience

Customer loyalty & retention

  • Develop stronger incentives to reward and retain existing customers

  • Clearly communicate the benefits of having a customer account to drive registration and engagement

Product presentation

  • Enhance visual storytelling to communicate product quality through imagery

  • Provide clear and comprehensive sizing and fit guidance

  • Surface detailed information on materials, manufacturing processes, and care instructions

  • Integrate customer reviews as a trust-building element

Customer loyalty & retention

  • Develop stronger incentives to reward and retain existing customers

  • Clearly communicate the benefits of having a customer account to drive registration and engagement

Inspiration

  • Prioritize content-rich pages to capitalize on their stronger performance

  • Elevate inspirational content to drive engagement and aspiration

  • Showcase new arrivals and product launches more prominently

  • Surface complementary products to encourage complete outfit discovery

Brand building

  • Address the divergent brand perception between new and existing customers to create a cohesive brand experience

  • Establish and communicate clear unique selling points to differentiate the shop from competitors

  • Strengthen the sense of personal and direct customer engagement throughout the experience

User guidance

  • Tailor the experience to address distinct behavioral patterns between male and female users

  • Elevate search as a primary conversion driver, leveraging its already strong performance

  • Optimize assortment access and filtering to unlock untapped potential

  • Eliminate dead ends to ensure a seamless and uninterrupted browsing journey

  • Increase the visibility of interaction triggers to guide users toward key actions

  • Make new arrivals more prominent and easier to discover

  • Introduce a dedicated collect or save functionality to allow users to curate their favorite products

Concept

For the concept of the online store, the focus was on intuitive user guidance: the store is intended to serve learned behaviors and usage scenarios. In addition, we strived for an inspirational and playful experience with features such as “In Visual Shopping” and “Shop the Look.” More complex features or click-throughs have been designed using visualised in clearly arranged user flows.

Interface Design

We have developed two variants within the existing corporate design guidelines. The first is a lighter version with transparent backgrounds (on the left), while the second represents a more striking variant with bold colours. Ultimately, the decision was made to go with a harmonious combination of both approaches.

The visual design of the online shop should optimally reflect TT’s brand communication. In addition to a consistent color and form language and a uniform typography, the design was component-based in accordance with the Atomic Design Principles.

Use buttons < > to navigate mockups

Impact

Seamless navigation and guidance

Seamless navigation and guidance

Inspiration and recommendation options

Optimal product presentation and information