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
Vision & Strategy
Synthesizing the full breadth of our user research insights, the following key areas for action have emerged:
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
Inspiration and recommendation options
Optimal product presentation and information
