Responsive eCommerce Fashion Store
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.
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.
The goal of the project was to understand the current state of fashion e-commerce and empathise with users across demographics. What are their needs, wants and pain points? How do users go about searching for clothing online?
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.
Dec 2017 - Jan 2018
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.
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).
Prototype 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).
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.
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.