Charles Tyrwhitt

I was hired by Redbox to design a new global ecommerce site for Charles Tyrwhitt. The aim was to invigorate the site with a fresh look and a better customer experience. I handled UX and design, led client presentations and instructed developers.

Agency: Redbox Digital
Time frame: 7 weeks
Role: Research, UX, Design

Project Goals

  • Find a solution to the complicated problem of clearly explaining Charles Tyrwhitt’s unique ‘Multibuy’ business model, which offers discounts for multiple purchases across different lines.
  • Find ways of ‘cross selling’ the rest of Charles Tyrwhitt’s range to those customers who primarily buy business shirts.
  • Simplified customer journey from start to finish.
  • Clarify the different categories in suits and trousers range.
  • Increase conversion rates.
  • Improve mobile experience.

Moodboard

I gathered some inspiration from adjacent brands in the menswear space to get a feel for how the new Charles Tyrwhitt could look.

Wireframes

In the initial stages of the design process we went through many rounds of high fidelity wireframes in client meetings to help brainstorm and eliminate ideas.

Challenges & Innovations

Multibuy

Charles Tyrwhitt operates a unique ‘Multibuy’ business model, allowing customers to unlock discount prices after choosing a certain quantity of product. The quantities and discounts varied significantly and so our challenge was to continually inform the user of how close they were to achieving Multibuy. Our solution was to gamify the process and implement a consistent visual reminder. Below are the earlier visual treatments of these ideas.

Multibuy solution

The final Multibuy solution involved a visual tracker that persisted across the customer journey, from listing, to product, to shopping bag. Below are some examples of the Multibuy tracker in situ.

Listings page
Product detail page
Bag fly out
Bag

Shop the Look

Charles Tyrwhitt’s best selling product are business shirts, but they were keen to remind customers about the rest of their extensive range. The challenge was to do so in a way that was subtle enough not to interrupt the normal shopping flow.

Our eventual solution was an interactive module to be used in the listings and product detail page. The panel would slide across on rollover to allow browsing without interrupting the user’s flow.

Product tiles

Charles Tyrwhitt’s Multibuy system necessitated many different versions of the product listing tile in different states. We needed to explain the multi-tiered prices and colour options, and strike a balance between clarity, information and visual simplicity.

Initial options (Mobile)

Final Product Tiles (Desktop)

The final design for the product tiles in three states.

Regular tile
Markdown tile
Sale tile

Size selection interface

Many of Charles Tyrwhitt’s product offer an extensive degree of variation for correct fit and customisation. In order to reduce the cognitive load I designed a selection interface that loads progressively.

Accessories selection tool

A tool on the shirt detail page that enables a customer to browse and add accessories.

Suit & Trouser selector tool

The suits and trousers ranges are very broad and can be quite daunting, relying on extensive filtering to find the right product. In order to make this process a little easier and enjoyable I designed an optional one-two-three click tool for use on the listings page.

Final designs

Product Listings Pages

Shirts

Trousers

Landings Pages

Suits

Trousers

Product detail pages

Shirts

Trousers

Bag

Homepage

Style guide