MISSGUIDED: eCommerce Case Study
Re-designing the MISSGUIDED eCommerce site to improve the journey experience
As lockdowns became the new normal, businesses and consumers increasingly “went digital”, providing and purchasing more goods and services online. While the boost in sales is a plus for eCommerce as an industry, there is added pressure on digital stores to get it right during this busy, sensitive time.
MISSGUIDED is an online only clothing store. The challenge is to ensure this eCommerce site complies with usability laws, and e-commerce best practices that are hassle free, trustworthy and an engaging service that ultimately leads to an increase in sales.
The Brief
Choose an eCommerce clothing platform. Identify problem areas within the website journey experience across mobile and desktop screen sizes. Solve these problems to ensure a functional eCommerce platform that complies with UX methodologies
My Role
This was an individual project where I was responsible for all aspects of the design. I conducted the research, ideated concepts and designed & prototyped solutions. This case study is a part of a UX/UI Design Bootcamp I completed.
Timeline
2 weeks
My Design Process
Empathise
DEVELOPING A DEEP UNDERSTANDING
Before conducting any User Interviews or Competitor Analysis I researched UX best practices for eCommerce sites to better understand the eCommerce usability guidelines and UX design principles. In particular, I learnt about the main reasons a cart is abandoned, such as, a site not being easy to navigate, lack of trust, social proof, no reviews, lack of payment options, lack of transparency, perceived risk, and an unresponsive design. I used this knowledge to evaluate the strengths and weaknesses of the MISSGUIDED site as well as its competitors
COMPETITOR ANALYSIS
I carried out competitive analysis on three direct competitors; Pretty Little Thing, Boohoo and Nasty Gal. I chose competitors with similar offerings and target markets. I focused on analysing the strengths and weaknesses of a customers purchase journey, starting from the Home Page to landing on the Payment Page. This helped me with assessing the industry standards, the common User interfaces, User Experience flows and which features did and did not work.
MISSGUIDED
PRETTY LITTLE THING
BOOHOO
NASTYGAL
KEY TAKEAWAYS
🌊 Similar User Flows
-
All websites have a similar user flow from the home page, to selecting a product, and then landing on the payment page.
🗺 Unclear Navigation Patterns
-
The MISSGUIDED navigation bar has repeated options on the navigation bar which can be confusing to the user.
🤝 Overwhelming Number of Filtering Options
-
The search results page on the MISSGUIDED site has many filtering options that are repeated on both sides of the page which can be overwhelming and frustrating for the user.
USER INTERVIEWS
I then conducted usability interviews. I asked users to complete small tasks that took them through the journey of finding a product to adding it to the basket. The goal for the interviews was to identify users pain points and assess if users can effectively navigate the website using UI elements, whilst focusing on how they felt throughout the process.
QUESTIONS
I started off with topic related questions to understand and learn about the problems that people have with online shopping. I then asked the participants task related questions so I can observe their behaviour. I ensured I followed up with questions that focuses on empathy by consistently asking users how they felt after each task.
WHO I ASKED
-
I interviewed 4 females aged between 18-26 based in the North-West of England.
WHAT I ASKED
-
Tell me about the last time you bought clothes online, what were you feeling before and after the experience?
2. What do you like about shopping for clothes online?
3. What are the similarities and differences between shopping online and shopping in store?
4. What is the biggest pain point related to shopping for clothes online?
5.What do you think about this website? (Users are shown homepage)
6.Can you show me how you would search for dresses using the navigation bar?
7.Can you show me how you would look at more information for an individual product?
8. Can you show me how you would add an item to basked and checkout?
9. Is there a feature missing from this page that you expected?
Define
AFFINITY MAPPING
To make sense of my research, I gathered all the qualitative data from each step of the user journey. I then identified common themes to help uncover insights from my findings.
INSIGHTS
🏠 Home Page
-
Users found the Home Page “too busy” as the banners moved too fast making the writing hard to read and inaccessible.
🗺 Navigation
-
The participants thought there were too many options that were repeated which made it hard to find what they were looking for.
🔍 Search Results
-
There were too many filtering options that were repeated making it overwhelming to use.
👗 Product Page
-
Participants wanted to see reviews and images of the clothes that were not on models.
💸 Payment Page
-
There is an easy payment process as users can checkout as a guest and the payment is broken down into steps.
Ideate
MIND MAP
I then created a mind-map of my thoughts and ideas using the insights from the competitive analysis and the user interviews. The aim was to find ways to improve the users journey so we can create a pleasant experience from the home page to making a confident purchase.
CARD SORT
Part of making a site easy to use is organising information so that people can find what they’re looking for. Since users found it hard to find ‘dresses’ in the navbar I decided to do a card sort for the clothing tab. I did a moderated think-aloud card sort so I could understand how participants thought about the Information Architecture and how they would organise it using their own category names to suit their mental models. This helped me identify issues in the category structure.
RESULTS
KEY TAKEAWAYS
👗 Collections
-
Users discussed having a separate area for collections and promotions
🤔 'I am not sure'
-
Most users placed individual clothing in the ‘I am not sure’ section. This led me to create a new group labelled ‘shop by product’.
🏃♀️ Activewear
-
Clothing associated with sports were grouped together
🧥 Outerwear
-
All users placed ‘blazers’ ‘coats and jackets’ in outerwear.
NEW INFORMATION ARCHITECTURE
Based on the findings I organised the information to suit the users mental models.
Prototype
LOW FIDELITY WIREFRAMES: DESKTOP
LOW FIDELITY WIREFRAMES: MOBILE
KEY DESIGN DECISIONS
🏠 Home Page
-
Users have the option to navigate the banners manually, so users have time to read the promotions clearly.
-
Social Proof: Images of customers wearing the clothing with their Instagram handle to improve credibility and engagement with the brand.
🗺 Navigation
-
A more streamlined navigation without repeated tabs and multiple navbars stacked on top of each other, so it is less overwhelming.
🔍 Search Results
-
The filters are removed from the top and left hand side and are placed under a single tab to not confuse and overwhelm the user. I decided to include a ‘Quick add’ option so users can add to the cart directly.
📱 Responsive Design
- For the mobile screens I removed the quick add option and decided to use a hamburger menu to conserve screen space to suit the smaller screen size.
MID FIDELITY WIREFRAMES: DESKTOP
MID FIDELITY WIREFRAMES: MOBILE
WHAT'S CHANGED?
🗒 Reviews
-
I decided to have the reviews open up as an overlay instead of the user scrolling to a reviews sections. This makes the product page more succinct. I also carried this design into the mobile version.
🙍♀️ 'I'm not a model'
-
Users wanted to see images of the clothes without the model to get a realistic view of the product so I decided to include an option where users an choose to view the product on its own or on a model.
HIGH FIDELITY WIREFRAME: DESKTOP
Home Page: Before
❌
Overwhelming and confusing Navbars
❌
Busy and fast moving hero banners with unclear CTA’s
❌
No social proof
❌
No clear CTA's in 'category' section
Information Architecture: Before
❌
No organised structure
❌
Weak categories
❌
Repeated category headings
Search Results and Filters: Before
❌
Disorganised filters
❌
No option to view without model
❌
Unclear filtering options
Product Page: Before
❌
Centre aligned text making it hard to read
❌
No preview of different colour options
❌
No reviews
Home Page: Re-Design
👍
Streamlined and unhidden Navbar
👍
Accessible banners with clear CTA's
👍
Social proof
👍
Clear CTA's in 'category' section
Information Architecture: Re-Design
👍
Organised structure
👍
Categories that suit users mental models
👍
No repeated category headings
Search Results and Filters: Re-Design
👍
Streamlined filters
👍
Option to view without model
👍
Clear filtering options
Product Page: Re-Design
👍
Left aligned text making it easy to read
👍
Preview available of different colour options
👍
Users can see reviews to help with the decision making process
REVIEWS OVERLAY: DESKTOP
HIGH FIDELITY PROTOTYPE: MOBILE
RESPONSIVE DESIGN: WHAT'S CHANGED
When approaching the design of the mobile screen size, it was crucial for me to think about what to prioritise and how my designs will behave on a smaller screen. Below are some of the changes I decided to make for the mobile screen.
✅ Priorities
-
I decided against the 'quick add' feature on the search results page as I realised this feature wasn't necessary considering there is a much smaller real estate and adding it will make the screen too busy.
-
I decided to have the Navbar under a hamburger as there's not enough space to show the menu items. However, I kept the icons on the right as these were too important to hide.
👜 'add to bag'
-
On the product page there is an 'add to bag' overlay which sticks to the bottom of the screen so the user has easy access to it whilst they scroll down the page to read extra information about the product.
🔍 Search
-
I ensured there was a prominent and easily accessible search bar on the home screen so it is easy to find on the smaller screen size.
DESIGN SYSTEM
Accessibility
I used the accessibility standards and guidelines like W3C's Web Content Accessibility Guidelines (WCAG) 2.1 to ensure a wide range of diverse people can access the website.
APPROPRIATE COLOUR CONTRAST
NON-TEXT CONTENT
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose
SUCCINCT NAVIGATION
The site navigation only contains the necessary items. This helps keyboard users easily navigate the website without having to go through unnecessary items.
Test
FEEDBACK
I tested my prototypes and asked users the same task related questions I asked during the Research stage. Here is some of the feedback I received.
🙍🏽♀️
'I like how the filters are much more easier to digest. Before I was overwhelmed by the number of options'
👩🏼🦳
'I can move the banners myself and actually have the time to read what the offers are'
🧕🏽
'I can find what I am looking for now, before there were too many options in the menu'
👱🏾♀️
'I like how you can now see the reviews, I always look at reviews before buying something'
Reflections
⏱ If I had more time...
-
I would've wanted to explore the visual elements of the 'MISSGUIDED' brand like the colours and typography to help with brand recognisability. As I feel my redesign doesn't quite reflect the 'MISSGUIDED' brand identity.
💃 I enjoyed...
-
As this was my first comprehensive project it challenged me in ways that strengthened my research skills and refined my design skills. I enjoyed having sole control of the project as I learned how to use my findings from one stage to figure out what the next best course of action should be.
