Mirror is an established, international clothing store chain with a very outdated, informational website. Mirror now wants to invest in creating a digital platform to tie-in with the launch of a more premium, sustainable sub-brand.
Understand how, when & why the Mirror demographic shop online for clothes
Analyse competitors to understand their strengths, weaknesses & identify opportunities
Identify the top user pain points for online clothes shopping
Determine Mirror’s key demographic who are most likely to shop online
Define & understand the key factors that determine online purchase completion
Six relevant retail trends were identified
The Influencer Economy
Sustainability
Personalisation
Trust & Loyalty
Physical & Digital
Immersive Experience
Identified strengths:
Identified weaknesses:
Asking respondents to compare online to in-store shopping provided a great insight into the pain points and benefits of both, as well as highlighting potential opportunities to offer a better shopping experience.
This led me to question the validity of the project: would a small, local coffee shop really benefit from a website and could you justify the cost and upkeep involved?
I looked back at my initial research and reminded myself of a study that had directly looked at the importance of coffee shops in connecting the local community. I also refocused on the 'why' of the project; creating a digital space for encouraging local engagement. I decided this concept was something that could work more broadly for local coffee shops across the UK and had potential beyond my favoured cafe.
Six interviews were conducted remotely over zoom; with four women and two men ranging in age from 30 - 57.
This was my first experience of conducting formal interviews and it was immediately clear to see that the more relaxed a participant felt, the more they expanded on questions and talked openly. The ability to record the interviews enabled me to be more present and actively listen, helping to keep conversation flowing.
One of the more effective questions asked participants to describe their most recent online clothes shopping experience. As this is currently the only way to shop in the pandemic they were all able to provide a detailed walk-through, with prompts given as necessary.
"I like trying on clothes with my own mirror & lighting. I can also do my make up and try on jewellery before sending pictures to my friends to discuss options."
“Shopping for an outfit is really easy as she tags everything she wears.”
“I tend to stalk items for around a month -do I want it, do I need it? By the time I have decided to get it I want it now!”
Overall all participants were looking for quality, value for money and convenience.
Transparency
Browsing
Focused Search
Convenience
Ahead of creating a site map I decided to carry out an open sort of 30 clothing items to see how participants categorised them. This was carried out digitally (due to the pandemic restrictions) using Optima Workshop with nine participants.
This exercise opened my eyes to how differently people categorise items and approach shopping in general. It also highlighted the importance of colloquial terminology and context in understanding as well as our heavy reliance on visual information when shopping online.
Informed by my card sorting exercise and previous research the site map was organised based on the two key identified approaches to online shopping:
Creating a task flow highlighted all the steps required to purchase an item and enabled me to plan all the key pages needed for my site.
Putting together the user flows for my key persona Megan really helped to cement necessary features and prioritise elements of the site ahead of starting to design it.
Work to find the right balance between an aspirational feel and providing content that is relatable, light hearted and authentic
The style of product photography is key and needs to be engaging without looking too posed
The design should enhance the product imagery and not distract from it
I began the design process with hand drawn, wireframe sketches to quickly explore different layouts for the home page, before refining and moving into Figma. These pages were analysed and iterated, as I worked to balance familiarity with fresh perspective, whilst giving prominence to the key features. Once I had a solid foundation, the wireframes were adapted and improved as the designs were made responsive.
This process began with hand drawn sketches, of which the most interesting routes were digitising before multiple rounds of feedback and iteration.
Forcing decisions around fonts, brand colours and the design of key elements before starting the main design helped to speed the process up. This branding document brought together the first tangible elements of the site and enabled me to visualise versions of the final product.
Responsive user interface designs were created in stages; starting with the homepage and navigation menu. These designs were discussed and iterated before a design for the product page was created. By making the site in stages, key design decisions could be made for the initial pages and then applied to the next ones.
Five participants; three that are a close match to the primary persona, one whose partner is a close match, and one participant that does not match the primary persona.
All participants were able to complete the given tasks but one had to be prompted regarding filtering by colour. This participant said she would normally rely on the search bar which was not activated in the prototype tested.
The site is clean, clear and intuitive to use and the visual simplicity of the checkout makes the process quicker to navigate.
The confirmation page offers reassurance and suggests next steps.
Clear visibility of stock availability, the option to add a promo code and sustainable practices were appreciated.
Participants found the visual nature of the colour wheel made selecting a colour filter quick and easy.
The ‘Select Size’ dropdown menu only currently expands when the expand icon is clicked. Participants expected the whole bar to activate the dropdown
Positioning and style of the filter menu meant it wasn’t immediately visible to all participants. The way the menu expands currently doesn’t feel very natural
‘All Clothing’ & ‘What’s New’ are not prominent enough due to tight spacing next to product categories. ‘Help & Info’ may currently be difficult to find
There was an expectation from one participant that as soon as ‘Add to Bag’ was clicked a pop up should appear and show it in the bag
User testing provided a reminder to ensure when using drop-downs that the fullest appropriate area is clickable; not just the icon itself.
Testing highlighted the importance of space in ensuring the correct hierarchy, grouping and prominence is attributed to information.
As soon as an item is added to the shopping bag the feedback should be obvious and instant. Users will expect a certain level of familiarity in-line with their previous experiences.
