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.

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.

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.

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.

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

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

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.

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

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.