Responsive eCommerce Fashion Store

UX / Prototyping / Web Design

Background

Mirror is a retail store looking to enter into the eCommerce space for fashion retail. This body of work was completed as part of DesignLab's UX Academy course.

Problem

Mirror sells relatively cheap clothes of a high quality to men, women and kids, and are looking for the best possible online store experience catering to the needs of every demographic.

Solution

User Research identified that ease of use was a key factor in customer's decision of which fashion eCommerce site to use. The design that followed focused on usability and drew attention away from the design itself and onto the content of the store.
View Prototype
Project Duration: 80 hours

Research

Competitor Analysis
User Research
Empathy Map
User Persona

Architecture

Card Sorting
User Flow

UI Design

Wireframe Sketches
Icon Set
Logo Design
Wireframes

Implementation

Prototype
Usability Testing
Affinity Map

Research


Research goals:

To understand the current state of the online fashion retail business with regards to strengths and weaknesses, UX and UI.

To empathise with users of online shopping across demographics. What are their needs, wants and pain points?

To understand how users categorise and search for clothing.

Competitor Analysis

The competitor analysis served to help understand the current state of UX in fashion retail online. It is one of the most prolific eCommerce types and therefore has very well understood design patterns.

User Research

4 participants were interviewed (1 male and 3 female), all of whom shop online several times a year. They range in age from 23 to 39 and represent a variety of different audiences but there were common patterns in what they seek from an online shopping experience.

Participants were most frustrated with obstacles to their end goal, such as long loading times, items not being in stock, confusing categorisation, too many steps, e-mail marketing signups and checkout addons.

The biggest opportunities for differentiating an online clothing store were found to be in the product details, such as varied and close-up imagery, sourcing information (eg where the factory is etc), and model sizing information to give the product a curated feel.
I’m a visual person, and you lose all of that tactile quality when you’re shopping online. You don’t know what you’re looking at.

Slow loading really frustrates me. Filters can result in endless refreshing. I have no patience at that point to carry on.

Some pyjamas I bought were recyclable, ethically sourced, really comfortable. I feel like humans have designed it, made it and are selling it to me that is the essence of what I enjoy about shopping.
"

Empathy Map

Based on the interviews, an empathy map was created to surmise the qualitative opinions of users.

User Persona

One of the interviewees particularly stood out as a potential end user of Mirror's product, with strong feelings about what an online fashion store should be. This persona acted as an anchoring reference point through the design phase of the project.

Architecture

Card Sorting

The Card Sort was conducted with the user interviews to understand how clothing items should be categorised and to inform the site map of Mirror. Interestingly, female participants grouped items by occasion while male participants categorised clothes by what type of item they were.

User Flow

The User Flow below, informed by research and the card sorting, is the flow that will be prototyped using Sketch and Invision with an aim to model the entire conversion process from discovery through to checkout.

UI Design

Design Approach

Mirror's platform is intended to be responsive and operate across devices. In order to ensure a consistent, device-agnostic experience, a simple but versatile navigation system needed to be designed that could cater for both mobile devices and widescreen monitors. During the ideation process a mobile-first mindset was used to ensure a consistent experience across devices.

Pen On Paper Wireframes

The more of the design that can be sketched prior to wireframing in software, the better. Sketching is faster and easier, encourages divergent thinking as well as the rapid production and discarding of ideas, ultimately saving the designer time later on in the process.

Low-fidelity Wireframes

Focusing on layout, content, visual hierarchy and navigation was a priority at this stage - Low fidelity wireframes allowed me to focus on these important aspects and remove distractions around the visual design.

Visual Design

User research indicated that many users found stylised visual design frustrating as it decreased usability and took the focus away from the clothing. The resulting visual design is simplistic in it's colours, typography and interaction design.

High Fidelity Wireframes

The below shows a product page and the user flow wireframes for men (M) and women (F) with other assets on the left for prototyping interactions.

As a result of the mobile-first approach to layout, certain elements may not be optimised for web, although this is a tradeoff for consistency and usability.

The pictures for the wireframes are from Carhartt (M) and Everlane (F).

Implementation

Prototype

The Mirror platform was prototyped using Invision and is available for use here.

Usability Testing

The purpose of the usability test was to meet the following two goals:

Ensure the usability of the prototyped user flow through a quantitative assessment.
Understand how users feel about the experience in a qualitative sense (Likes, Dislikes, Wants, Frustrations).

The test was completed with 4 individuals, who were asked to complete a series of 4 tasks using the prototype and then answer 4 qualitative questions. The participants were asked to assume they wanted either a shirt (M) or a top (F).

Quantitative Results

The usability was quantitatively very good, however there was some confusion when navigating the menus. This is partly due to difficulty in prototyping the interaction in invision.

Affinity Map - Qualitative Results

Throughout the usability test, comments that voiced some opinion from the user were recorded and then collected. These could then be grouped based on related content and put into an affinity map. This informs the designer about what users appreciate and what they would like to change.

The feedback showed there was some confusion in the content labelling and navigation with categories like 'By Type' and 'By Occasion'. Interestingly, this was an artefact from the card sort, where participants used these words to label clothing. With hindsight (a few projects later), I should have tested the navigation earlier with a pen and paper wireframe.

Priority Revisions

Using the affinity map, the navigation and menu hover states were changed to enhance usability by removing the 'By Occasion' category and label the types of clothing simply under 'Clothing'.

The form of the dropdown hover was also changed from a box to a more stylised bar, with an underline to improve usability.

The image below shows the original and updated version of the navigation (with a mouse hovering over the clothing options).
Super straightforward, it looked very intuitive.
Young Professional, 27yo Male

Pleasant and well laid out, I could see myself using this.
Company Director, 61yo Female
"

Outcome & Reflection

I'm pleased with the outcome for Mirror, particularly with the visual design. It was interesting designing for a user flow that has been around for a while, as a competitor analysis reveals some trends and design patterns that appear particularly effective for the medium.

The most important takeaway for me was the power of testing and research with real people, who can shatter and generate ideas with a single sentence. The feedback loop this gives is an essential part of the design process and arguably the most important as it validates the hypotheses of the designer.

Next Project: Redesigning the Spotify Homepage

How might we bring back a sense of community and value behind songs?

Full Case Study