SD

Sheena Danso

Product Designer

SD

Sheena Danso

Product Designer

ECOMMERCE
ECOMMERCE
ECOMMERCE

Pretty Little Thing

Pretty Little Thing

*This project has no affiliation with PLT and was used in an educational setting for student work

*This project has no affiliation with PLT and was used in an educational setting for student work

ROLE

PRODUCT DESIGNER

ROLE

PRODUCT DESIGNER

ROLE

PRODUCT DESIGNER

TIMEFRAME

1 MONTH

TIMEFRAME

1 MONTH

TIMEFRAME

1 MONTH

Figma

InVision

SOFTWARE USED

Overview

Overview

The aim of this project was to enhance the user experience (UX) of the Pretty Little Thing website and mobile app in order to increase user engagement, improve conversion rates, and boost overall customer satisfaction. The project involved conducting user research, redesigning key elements of the user interface (UI), and implementing the new design.

Problem

Problem

PrettyLittleThing (PLT) is a UK-based fast-fashion retailer, aimed at 16-35 year-old women. PLT has rapidly grown into one of the biggest online womenswear brands, working strategically with celebrities and influencers.

While Pretty Little Thing emphasises a customer-centric approach, digital users, including many of my friends, have voiced concerns and encountered usability issues while navigating through Pretty Little Thing's website and app. This inspired me to assess the online platform of Pretty Little Thing and seek avenues for enhancing the website, all while staying true to their existing brand ethos and creative vision.

Objective

Objective

Identify pain points and usability issues in the current e-commerce website.

  • Develop a user-centric design that promotes easy navigation and a seamless shopping experience.

  • Enhance visual aesthetics and improve the overall appeal of the website.

  • Optimise the checkout process to reduce cart abandonment rates.

  • Increase customer trust and credibility through improved UI and visual consistency.

My Design Process
My Design Process
My Design Process
Step 1

Discover

Understand user needs and business goals through interviews, surveys, and competitor analysis.

Step 1

Discover

Understand user needs and business goals through interviews, surveys, and competitor analysis.

Step 1

Discover

Understand user needs and business goals through interviews, surveys, and competitor analysis.

Step 2

Define

Comprehends and interprets research findings to determine whether the correct problem is being addressed. Crafts the vision in alignment with this understanding.

Step 2

Define

Comprehends and interprets research findings to determine whether the correct problem is being addressed. Crafts the vision in alignment with this understanding.

Step 2

Define

Comprehends and interprets research findings to determine whether the correct problem is being addressed. Crafts the vision in alignment with this understanding.

Step 3

Ideate

Create low-fidelity sketches or digital prototypes to define the structure and layout of the interface.

Step 3

Ideate

Create low-fidelity sketches or digital prototypes to define the structure and layout of the interface.

Step 3

Ideate

Create low-fidelity sketches or digital prototypes to define the structure and layout of the interface.

Step 4

Prototyping

Develop interactive prototypes to test functionality, user flows, and gather feedback.

Step 4

Prototyping

Develop interactive prototypes to test functionality, user flows, and gather feedback.

Step 4

Prototyping

Develop interactive prototypes to test functionality, user flows, and gather feedback.

Step 5

Visual Design

Apply colors, typography, and imagery to create an aesthetically pleasing and cohesive interface.

Step 5

Visual Design

Apply colors, typography, and imagery to create an aesthetically pleasing and cohesive interface.

Step 5

Visual Design

Apply colors, typography, and imagery to create an aesthetically pleasing and cohesive interface.

Step 6

Iteration

Incorporate user feedback and refine the design iteratively to enhance user experience.

Step 6

Iteration

Incorporate user feedback and refine the design iteratively to enhance user experience.

Step 6

Iteration

Incorporate user feedback and refine the design iteratively to enhance user experience.

Discover

Discover

Before conducting research, I decided I needed to understand the e-commerce industry and the changes it has gone through in recent years.

Before conducting research, I decided I needed to understand the e-commerce industry and the changes it has gone through in recent years.

Before conducting research, I decided I needed to understand the e-commerce industry and the changes it has gone through in recent years.

From my research, I found that good UX is essential in e-commerce.

  • Think with Google found that 62% of users were less likely to purchase from a brand they've had a negative mobile experience.

  • In the UK, 67% of online purchases during the 3rd quarter of 2021 were made on smartphones- Statista.

  • 63% of mobile users abandoned a product or site at least once due to mobile usability issues- Baymard Institue.

Due to COVID-19, I found that several shoppers reported changing their habits due to the pandemic. However, convenience outranked COVID-19 as a critical factor, accounting for a part of online buying.

  • 34% of users shopped online as they were cautious of COVID-19

  • 64% of users shop online for convenience

Competitor Analysis

There is no competition in the accessibility aspects, but there is competition in the usability and aesthetics.

There is no competition in the accessibility aspects, but there is competition in the usability and aesthetics.

There is no competition in the accessibility aspects, but there is competition in the usability and aesthetics.

I conducted a competitor analysis on 3 direct and 2 indirect competitors to analyse their strengths and weaknesses and what features I could implement into the redesign to create a better experience for users.

I conducted a competitor analysis on 3 direct and 2 indirect competitors to analyse their strengths and weaknesses and what features I could implement into the redesign to create a better experience for users.

  • What are the other competitors doing?

  • What is their strength compared to PLT?

  • What is their weakness compared to PLT?

  • Which part should I look into and benchmark?

  • What are the other competitors doing?

  • What is their strength compared to PLT?

  • What is their weakness compared to PLT?

  • Which part should I look into and benchmark?

I found that PLT had some strong competitors, but there is still space and opportunities for the brand to stand out. Most competitors did not prioritise their users; instead, they focused on efficiency and did not utilise the features on their interfaces properly.

I found that PLT had some strong competitors, but there is still space and opportunities for the brand to stand out. Most competitors did not prioritise their users; instead, they focused on efficiency and did not utilise the features on their interfaces properly.

Define

Define

User Surveys

Majority of my respondents mentioned that they preferred shopping on mobile rather than desktop.

Majority of my respondents mentioned that they preferred shopping on mobile rather than desktop.

Majority of my respondents mentioned that they preferred shopping on mobile rather than desktop.

I wanted to gain more information about people's shopping habits and their shopping experiences. To gather this data, I conducted an online questionnaire to understand their wants, needs, and purchasing behaviours and identify any pain points they face online shopping.

I sent the survey to 50 people and asked them the questions below.

I wanted to gain more information about people's shopping habits and their shopping experiences. To gather this data, I conducted an online questionnaire to understand their wants, needs, and purchasing behaviours and identify any pain points they face online shopping.

I sent the survey to 50 people and asked them the questions below.

SURVEY QUESTIONS

  1. How often do you shop online?

  2. How do you feel about shopping online?

  3. Which device do you often use to shop online

  4. Why do you shop online?

  5. Which brand or website do you mostly shop from?

  6. Why do you like shopping with that brand?

  7. What features do you like when shopping online

  8. What features do you dislike when shopping online?

  9. How important is the product page to you when shopping online?

  10. How important is styling an item when shopping online?

SURVEY QUESTIONS

  1. How often do you shop online?

  2. How do you feel about shopping online?

  3. Which device do you often use to shop online

  4. Why do you shop online?

  5. Which brand or website do you mostly shop from?

  6. Why do you like shopping with that brand?

  7. What features do you like when shopping online

  8. What features do you dislike when shopping online?

  9. How important is the product page to you when shopping online?

  10. How important is styling an item when shopping online?

KEY FINDINGS

  • ✅ Majority of respondents shop online for ease, convenience, ease and efficiency


  • 📲Most respondents prefer shopping on mobile rather than desktop


  • 😵‍💫57% of respondents said they sometimes felt overwhelmed due to the amount of choice

  • 😩64% of users raised concerns about the lack of information on the product page when shopping online


  • 👍🏾87% of respondents like styling and product recommendations


  • ✖️57% of respondents do not find the “sort” filter effective

Interviews

I interviewed 4 people to understand their purchasing behaviour and identify any pain points they face when shopping online

I interviewed 4 people to understand their purchasing behaviour and identify any pain points they face when shopping online

I interviewed 4 people to understand their purchasing behaviour and identify any pain points they face when shopping online

I conducted a virtual interview with 4 respondents aged 18-24, who are UK citizens and consider themselves ‘shopaholics’. Click here for my interview guide.

I conducted a virtual interview with 4 respondents aged 18-24, who are UK citizens and consider themselves ‘shopaholics’. Click here for my interview guide.

Objectives for 1:1 interviews

  • understand their shopping journey and why they shop online 

  • understand user's purchasing behaviours

  • Discover how users feel about online shopping

  • understand how the user's online shopping experience could be improved

Objectives for 1:1 interviews

  • understand their shopping journey and why they shop online 

  • understand user's purchasing behaviours

  • Discover how users feel about online shopping

  • understand how the user's online shopping experience could be improved

Main Insights

After the interviews were conducted, I organised the data collected into an affinity map. With each major insight by similarity and topic. The following themes emerged:

After the interviews were conducted, I organised the data collected into an affinity map. With each major insight by similarity and topic. The following themes emerged:

  • Difficulty navigating the help/support page: Participants expressed they did not find the page helpful and were left more confused when they attempted to use it. Participants mentioned they would rather use social media to receive help than use the PLT interface.


  • Viewing out-of-stock items: All participants expressed this frustration and felt it was a waste of their time to be viewing items they could not purchase.


  • Lack of information on product pages: Participants expressed there isn’t enough information or visuals on product pages to make a decision if they want to purchase a product or not.


  • Overwhelmed by the number of items when shopping online: All participants mentioned feeling overwhelmed when shopping due to scrolling through items for a long period of time and not being able to find specific items because a lot of items PLT sells are under similar names


  • Difficulty navigating the wishlist: Participants who regularly use the wishlist feature, expressed frustrations when navigating the page

How Might We Questions

Referencing the themes from the affinity map, I mapped out the user frustrations discovered from my research, which I rephrased into open “How might we” questions. This allowed me to come up with different solutions quickly. Below, I showed one of the tables I created. Click here to view the entire table.

Referencing the themes from the affinity map, I mapped out the user frustrations discovered from my research, which I rephrased into open “How might we” questions. This allowed me to come up with different solutions quickly. Below, I showed one of the tables I created. Click here to view the entire table.

Example of one of my HMW tables
Example of one of my HMW tables
Example of one of my HMW tables

Ideation

Mindmap

Based on previous research, I developed a mindmap that defined non-negotiable features to include in the final design.

Based on previous research, I developed a mindmap that defined non-negotiable features to include in the final design.

Based on previous research, I developed a mindmap that defined non-negotiable features to include in the final design.

Crazy 8'S and AB Testing

Time for the challenge- finding a way to make the online shopping experience easier and enjoyable for users

Time for the challenge- finding a way to make the online shopping experience easier and enjoyable for users

Time for the challenge- finding a way to make the online shopping experience easier and enjoyable for users

To generate innovative ideas, I challenged myself to crazy eights. I set a timer for 8 minutes and spent 1 minute creating different designs. Additionally, I used this method as a foundation for my wireframing process. After that, I ran A/B testing with the same participants from the interview on the top 3 designs, below is some of the feedback I received for the test.

To generate innovative ideas, I challenged myself to crazy eights. I set a timer for 8 minutes and spent 1 minute creating different designs. Additionally, I used this method as a foundation for my wireframing process. After that, I ran A/B testing with the same participants from the interview on the top 3 designs, below is some of the feedback I received for the test.

Mid-Fidelity Wireframes

I used Figma to create mid-fidelity wireframes, which allowed me to focus on element placement, various text variations, and influential iconography. I reduced material, eliminated duplication, and ensured usability for both current and ageing users by emphasising white space.

These are just a few of the key screens:

I used Figma to create mid-fidelity wireframes, which allowed me to focus on element placement, various text variations, and influential iconography. I reduced material, eliminated duplication, and ensured usability for both current and ageing users by emphasising white space.

These are just a few of the key screens:

Testing + Improvements

I tested five participants’ ability to use the prototype design

I tested five participants’ ability to use the prototype design

I tested five participants’ ability to use the prototype design

I created a test strategy and script for the usability testing of the prototype designs with 5 participants. The tasks were mainly associated with functionality and navigation from the homepage to different pages.

I created a test strategy and script for the usability testing of the prototype designs with 5 participants. The tasks were mainly associated with functionality and navigation from the homepage to different pages.

Changes Made:

  • Allow users to change the layout of pages

  • Removed the “Find Stores’ button

  • Added a ‘Quick Buy’ Feature

  • Added a "Body Fit' Category on the homepage

Changes Made:

  • Allow users to change the layout of pages

  • Removed the “Find Stores’ button

  • Added a ‘Quick Buy’ Feature

  • Added a "Body Fit' Category on the homepage

Final Design







The Style Guide

Accessibility

During the design process, I took steps to ensure my design was accessible. I consistently referred back to the WCAG 2.1 guidelines and utilised the A11y - Color Contrast checker to guarantee that all elements on the mobile app were easily readable. There were times when the text was not compliant, so I had to change some elements to ensure the results were AAA-compliant. To accommodate users relying on screen readers, I thoughtfully designed the buttons with a focus state. Additionally, I prioritised images over excessive text to enhance overall readability.


To further enhance accessibility in my design, there were a couple of additional features I could have incorporated. For instance, I could have included a microphone feature that allows users to utilise voice input in the search bar. Moreover, I considered designing a dark mode version for both the app and website, which can be easier on the eyes of specific users.

During the design process, I took steps to ensure my design was accessible. I consistently referred back to the WCAG 2.1 guidelines and utilised the A11y - Color Contrast checker to guarantee that all elements on the mobile app were easily readable. There were times when the text was not compliant, so I had to change some elements to ensure the results were AAA-compliant. To accommodate users relying on screen readers, I thoughtfully designed the buttons with a focus state. Additionally, I prioritised images over excessive text to enhance overall readability.


To further enhance accessibility in my design, there were a couple of additional features I could have incorporated. For instance, I could have included a microphone feature that allows users to utilise voice input in the search bar. Moreover, I considered designing a dark mode version for both the app and website, which can be easier on the eyes of specific users.




Design Principles

Jakob's Law:

Implementing Jakob's law allowed me to implement improvements that create familiarity for users whilst navigating the websites, as the user flow is similar to competitor sites. Analysing competitors' sites helped me to understand what features users value. According to the user interview results, users value a drop-down menu and filters to sort through products, hence why these features were implemented in the design.

Hicks Law:

Implementing Hick's Law allowed me to reduce decision-making time by minimising choices across the page. On the homepage, shortcuts to each product category were added to create progressive onboarding to minimise cognitive load for new users.

Miller's Law:

Implementing Miller's Law allowed me to organise content into smaller chunks, which is beneficial for the users as it allows them to process, memorise and understand information quickly. I have organised content on product pages into smaller chunks (reviews, product information) to correspond to this law.

Reflection

Reflection

The entire process, from start to finish, was thoroughly enjoyable. Witnessing the amount of thought and care that goes into UX/UI design is truly unique.

Throughout this case study, I've gained valuable insights and am proud of the overall quality of my designs. I successfully created solutions that addressed the user's problem while staying true to PLT's core brand identity.

Looking back, if given more time, I would love to delve deeper into this brief. Implementing A/B testing and usability testing to gather user feedback would be immensely beneficial in understanding how specific elements of the user experience influence behaviour. Additionally, conducting face-to-face interviews would provide valuable data for further development.

John Smith

UX UI Designer

Copy email to clipboard