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.
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
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.
My Design Process
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
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.
PRETTY LITTLE THING
🌊 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.
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.
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?
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.
🏠 Home Page
Users found the Home Page “too busy” as the banners moved too fast making the writing hard to read and inaccessible.
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.
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.
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.
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’.
Clothing associated with sports were grouped together
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.
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.
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
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
Repeated category headings
Search Results and Filters: Before
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
Home Page: Re-Design
Streamlined and unhidden Navbar
Accessible banners with clear CTA's
Clear CTA's in 'category' section
Information Architecture: Re-Design
Categories that suit users mental models
No repeated category headings
Search Results and Filters: Re-Design
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.
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.
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.
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
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose
The site navigation only contains the necessary items. This helps keyboard users easily navigate the website without having to go through unnecessary items.
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'
⏱ 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.