Frame 186-2.png
 

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

Frame 205.png

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.

Frame 89.png

MISSGUIDED

Missguided.png

PRETTY LITTLE THING

PrettyLittleThing.png

BOOHOO

Frame 92.png

NASTYGAL

Nasty Gal.png

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

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

image-2.png

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.

Frame 99.png

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

Frame 104-2.png

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.

Frame 109-2.png

Prototype

LOW FIDELITY WIREFRAMES: DESKTOP

Frame 112.png
Frame 111.png

LOW FIDELITY WIREFRAMES: MOBILE 

Frame 115.png

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

Frame 34.png

MID FIDELITY WIREFRAMES: MOBILE

Frame 35-2.png

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

home page orig-2.png

❌ 

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

Screenshot 2021-08-05 at 13.14.04.png

❌ 

No organised structure

❌ 

Weak categories

❌ 

Repeated category headings

Search Results and Filters: Before

search results.png

❌ 

Disorganised filters

❌ 

No option to view without model

❌ 

Unclear  filtering options

Product Page: Before

Screenshot 2021-08-05 at 17.33.04.png

❌ 

Centre aligned text making it hard to read

❌ 

No preview of different colour options

❌ 

No reviews

Home Page: Re-Design

Frame 124.png

👍 

Streamlined and unhidden Navbar

👍 

Accessible banners with clear CTA's

👍 

Social proof

👍 

Clear CTA's in 'category' section

Information Architecture: Re-Design

Frame 186-3.png

👍 

Organised structure

👍 

Categories that suit users mental models

👍 

No repeated category headings

Search Results and Filters: Re-Design

Group 5.png

👍 

Streamlined filters

👍 

Option to view without model

👍 

Clear  filtering options

Product Page: Re-Design

Frame 192.png

👍 

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

Screenshot 2021-08-07 at 12.46.23.png

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

Frame 132.png

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 

Screenshot 2021-08-06 at 16.50.17.png
Screenshot 2021-08-06 at 15.01.32.png

NON-TEXT CONTENT

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose

Frame 195.png
Frame 195.png

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.

Frame 186-3.png
Frame 196-2.png

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.

Frame 201-3.png

next up

Screenshot 2021-08-01 at 19.36.57.png
BLUE SKY THINKING / PRODUCT DESIGN / RESEARCH

STRIVE app

STRIVE is an app that enables homeless people to use their strengths to help them integrate into their local community.