Pull & Bear
Pull & Bear
Pull & Bear
Exploring the user journey of the Pull & Bear website to identify user pain points, and implement refinements to improve overall user experience and customer retention.
Role
Role
Sole UX/UI Designer
Sole UX/UI Designer
Sole UX/UI Designer
Time
Time
3 Weeks
3 Weeks
3 Weeks
Tool
Tool
Figma
Google Forms
Figma
Google Forms
Figma
Google Forms
Problem
Problem
Problem
Pull & Bear's current website navigation confuses users, forcing them to waste time searching for the desired product. This frustration leads to site abandonment, ultimately negatively impacting the overall user experience and customer retention.
Pull & Bear's current website navigation confuses users, forcing them to waste time searching for the desired product. This frustration leads to site abandonment, ultimately negatively impacting the overall user experience and customer retention.
Pull & Bear's current website navigation confuses users, forcing them to waste time searching for the desired product. This frustration leads to site abandonment, ultimately negatively impacting the overall user experience and customer retention.
Solution
Solution
Solution
To improve users' experience, is to create a simple user journey, remove clutter, and offer straightforward navigation. This will make it easier for users to find what they want and complete purchases seamlessly. These improvements will lead to an increase in customer satisfaction, reduced site abandonment, and a boost in customer retention and online sales growth for Pull & Bear.
To improve users' experience, is to create a simple user journey, remove clutter, and offer straightforward navigation. This will make it easier for users to find what they want and complete purchases seamlessly. These improvements will lead to an increase in customer satisfaction, reduced site abandonment, and a boost in customer retention and online sales growth for Pull & Bear.
To improve users' experience, I aim to create a simple user journey, removing clutter and offering straightforward navigation. This will make it easier for users to find what they are looking for and complete purchases seamlessly. This will lead to customer retention and an increase in online sales enhancing the business's success.
Overview
Overview
Overview
The pandemic accelerated online shopping to new heights, and demand shows no signs of slowing down. Consumers expect a seamless digital experience when shopping online. To ensure online sales growth, e-commerce sites should create seamless user journeys to reduce user frustration and website abandonment, which can lead to a drop in sales and customer retention. For brands like Pull & Bear, a trend-driven fashion brand primarily relying on online sales to reach its younger audience, optimising the user journey is critical.
The pandemic accelerated online shopping to new heights, and demand shows no signs of slowing down. Consumers expect a seamless digital experience when shopping online. To ensure online sales growth, e-commerce sites should create seamless user journeys to reduce user frustration and website abandonment, which can lead to a drop in sales and customer retention. For brands like Pull & Bear, a trend-driven fashion brand primarily relying on online sales to reach its younger audience, optimising the user journey is critical.
The pandemic accelerated online shopping to new heights, and demand shows no signs of slowing down. Consumers expect a seamless digital experience when shopping online. To ensure online sales growth, e-commerce sites should create seamless user journeys to reduce user frustration and website abandonment, which can lead to a drop in sales and customer retention. For brands like Pull & Bear, a trend-driven fashion brand primarily relying on online sales to reach its younger audience, optimising the user journey is critical.
Empathy
Empathy
Pull & Bear
Pull & Bear
Pull & Bear is a global fashion brand with stores in over 80 countries. It offers affordable, trendy clothing for men and women. It is part of the Inditex group and is known for its casual styles inspired by international fashion trends. I chose Pull & Bear for this case study because, it has a limited store presence relying on its website to reach its target audience and capture online sales. This project delves into Pull & Bear's website experience, a crucial touchpoint for Gen Z's online shopping habits. By analysing user journeys and pain points, I aim to identify opportunities for improvement that enhance the overall user experience and boost customer retention.
Pull & Bear is a global fashion brand with stores in over 80 countries. It offers affordable, trendy clothing for men and women. It is part of the Inditex group and is known for its casual styles inspired by international fashion trends. I chose Pull & Bear for this case study because, it has a limited store presence relying on its website to reach its target audience and capture online sales. This project delves into Pull & Bear's website experience, a crucial touchpoint for Gen Z's online shopping habits. By analysing user journeys and pain points, I aim to identify opportunities for improvement that enhance the overall user experience and boost customer retention.
Pull & Bear is a global fashion brand with stores in over 80 countries. It offers affordable, trendy clothing for men and women. It is part of the Inditex group and is known for its casual styles inspired by international fashion trends. I chose Pull & Bear for this case study because, it has a limited store presence relying on its website to reach its target audience and capture online sales. This project delves into Pull & Bear's website experience, a crucial touchpoint for Gen Z's online shopping habits. By analysing user journeys and pain points, I aim to identify opportunities for improvement that enhance the overall user experience and boost customer retention.
Trust Pilot
Trust Pilot
To further understand more, I looked into the customer reviews provided on the Trustpilot website.
To further understand more, I looked into the customer reviews provided on the Trustpilot website.
To further understand more, I looked into the customer reviews provided on the Trustpilot website.
Key Findings:
Most customers expressed difficulty in seeking out customer service
Difficulty navigating the website
Difficulty making a return: users users express that the journey is complex and difficult to complete
Key Findings:
Most customers expressed difficulty in seeking out customer service
Difficulty navigating the website
Difficulty making a return: users users express that the journey is complex and difficult to complete.
Key Findings:
Most customers expressed difficulty in seeking out customer service
Difficulty navigating the website
Difficulty making a return: users users express that the journey is complex and difficult to complete
User Research
User Research
Competitive Analysis
Competitive Analysis
Conducting a competitive analysis will help to identify the strengths and weaknesses of my competitors. With this information, I'll be able to improve users' journeys and overall experience. I've chosen my competitors based on similar target audiences. I've chosen two direct competitors (Bershka and H&M) and one indirect competitor (ASOS).
Conducting a competitive analysis will help to identify the strengths and weaknesses of my competitors. With this information, I'll be able to improve users' journeys and overall experience. I've chosen my competitors based on similar target audiences. I've chosen two direct competitors (Bershka and H&M) and one indirect competitor (ASOS).
Conducting a competitive analysis will help to identify the strengths and weaknesses of my competitors. With this information, I'll be able to improve users' journeys and overall experience. I've chosen my competitors based on similar target audiences. I've chosen two direct competitors (Bershka and H&M) and one indirect competitor (ASOS).
Key Findings:
Inaccessible colour contrast from AA accessibility standards - makes it difficult for users to find what they're looking for
Not having a clear distinction of CTA - be difficult for users to understand what action to take next in their user journey
Presenting a clear layout structure - allows users to navigate smoothly.
Not having clear visible iconography - makes it difficult for users to find the information they're looking for
Key Findings:
Inaccessible colour contrast from AA accessibility standards - makes it difficult for users to find what they're looking for
Not having a clear distinction of CTA - be difficult for users to understand what action to take next in their user journey
Presenting a clear layout structure - allows users to navigate smoothly.
Not having clear visible iconography - makes it difficult for users to find the information they're looking for.
Key Findings:
Inaccessible colour contrast from AA accessibility standards - makes it difficult for users to find what they're looking for
Not having a clear distinction of CTA - be difficult for users to understand what action to take next in their user journey
Presenting a clear layout structure - allows users to navigate smoothly.
Not having clear visible iconography - makes it difficult for users to find the information they're looking for
Red Route Analysis
Red Route Analysis
Red Route Analysis allows pinpointing what features users consider important as part of the user journey when browsing through a website/app. After conducting my competitive analysis, I was able to identify important UX features that are common to use.
Red Route Analysis allows pinpointing what features users consider important as part of the user journey when browsing through a website/app. After conducting my competitive analysis, I was able to identify important UX features that are common to use.
Red Route Analysis allows pinpointing what features users consider important as part of the user journey when browsing through a website/app. After conducting my competitive analysis, I was able to identify important UX features that are common to use.
Survey
Survey
I conducted a UX survey to gain further understanding and information about users’ pain points when navigating through the Pull & Bear website, to gain a better understanding of users’ behaviour and attitude towards their frustration when shopping online. I used a mix of open and closed questions to focus on users' experiences browsing the site.
I conducted a UX survey to gain further understanding and information about users’ pain points when navigating through the Pull & Bear website, to gain a better understanding of users’ behaviour and attitude towards their frustration when shopping online. I used a mix of open and closed questions to focus on users' experiences browsing the site.
I conducted a UX survey to gain further understanding and information about users’ pain points when navigating through the Pull & Bear website, to gain a better understanding of users’ behaviour and attitude towards their frustration when shopping online. I used a mix of open and closed questions to focus on users' experiences browsing the site.
Key Findings:
Key Findings:
Key Findings:
Define
Define
User Personas
User Personas
I created two user personas based on my research, taking into account the two types of shoppers (in-store and online). This ensures that my design solution is user-focused and will help me in my ideation phase.
I created two user personas based on my research, taking into account the two types of shoppers (in-store and online). This ensures that my design solution is user-focused and will help me in my ideation phase.
I created two user personas based on my research, taking into account the two types of shoppers (in-store and online). This ensures that my design solution is user-focused and will help me in my ideation phase.
Ideation
Ideation
Mind Map
Mind Map
After my research, I’ve chosen to create a mind map to gather my thoughts and ideas ensuring that I tackle all pain points that I’ve gathered through my research.
After my research, I’ve chosen to create a mind map to gather my thoughts and ideas ensuring that I tackle all pain points that I’ve gathered through my research.
After my research, I’ve chosen to create a mind map to gather my thoughts and ideas ensuring that I tackle all pain points that I’ve gathered through my research.
Crazy 8
Crazy 8
The crazy eight technique was used as a method in my ideation phase to gather potential ideas for my redesigning of the homepage, category page and checkout page.
The crazy eight technique was used as a method in my ideation phase to gather potential ideas for my redesigning of the homepage, category page and checkout page.
The crazy eight technique was used as a method in my ideation phase to gather potential ideas for my redesigning of the homepage, category page and checkout page.
Low Fidelity Wireframe
Low Fidelity Wireframe
I sketched out the overall layout structure of my design for the website. Here, I incorporated ideas gathered from mind mapping and crazy ideation as a starting point for my redesign ensuring I draw it back to my user research.
I sketched out the overall layout structure of my design for the website. Here, I incorporated ideas gathered from mind mapping and crazy ideation as a starting point for my redesign ensuring I draw it back to my user research.
I sketched out the overall layout structure of my design for the website. Here, I incorporated ideas gathered from mind mapping and crazy ideation as a starting point for my redesign ensuring I draw it back to my user research.
Mid Fidelity Wireframe
Mid Fidelity Wireframe
The mid-fidelity wireframes were created on Figma. I focused on the alignment and placement of my design, incorporating elements to give a clear representation of the feel and look of the design such as the position of the test box, image and iconography.
The mid-fidelity wireframes were created on Figma. I focused on the alignment and placement of my design, incorporating elements to give a clear representation of the feel and look of the design such as the position of the test box, image and iconography.
The mid-fidelity wireframes were created on Figma. I focused on the alignment and placement of my design, incorporating elements to give a clear representation of the feel and look of the design such as the position of the test box, image and iconography.
High Fidelity Wireframe
High Fidelity Wireframe
High Fidelity Wireframe
Design System
Design System
Design System
Accessibility
Accessibility
Throughout the design process, accessibility was at the forefront of my redesign:
Kept the same colour scheme with adjustments to some colours to align with WCAG 2.1 AA standards. To check, I used the contrast checker Figma plugin.
Provided a clear distinction between active and inactive CTA on the site
Adding dictation in the search bar to allow users to enter text by speaking into a microphone. This can be helpful to users with limited mobility.
Provided the option to change languages to the Pull & Bear site as it's a global brand that reaches a global audience of users who enjoy shopping with Pull & Bear.
Throughout the design process, accessibility was at the forefront of my redesign:
Kept the same colour scheme with adjustments to some colours to align with WCAG 2.1 AA standards. To check, I used the contrast checker Figma plugin.
Provided a clear distinction between active and inactive CTA on the site
Adding dictation in the search bar to allow users to enter text by speaking into a microphone. This can be helpful to users with limited mobility.
Provided the option to change languages to the Pull & Bear site as it's a global brand that reaches a global audience of users who enjoy shopping with Pull & Bear.
Test
Test
User Feedback
User Feedback
I presented my redesign during the wireframe stage of my design process to a user who is a lover of online shopping and who had participated in my survey. I intended to gather their thoughts on my redesign.
"The new layout makes it easier to navigate and find specific products"
I presented my redesign during the wireframe stage of my design process to a user who is a lover of online shopping and who had participated in my survey. I intended to gather their thoughts on my redesign.
"The new layout makes it easier to navigate and find specific products"
Reflection
Reflection
I thoroughly enjoyed delving deep into this design project and creating designs, especially with accessibility in mind. I was able to apply the knowledge such as UX laws and accessibility standards learnt from my product design course and apply it to my design. I understood that the design process was not perfect as I went through many changes along the way. In the end, I am happy with how the designs turned out as believe I fulfilled the needs of users and the objective of this project.
If I had more time and develop this project further, I would have liked to solve more problems such as the user journey in making returns and finding a better way to make it easier for users. In addition, I would have liked to have conducted further testing such as A/B testing where I would have liked to compare the performances to which design would perform better amongst users.
I thoroughly enjoyed delving deep into this design project and creating designs, especially with accessibility in mind. I was able to apply the knowledge such as UX laws and accessibility standards learnt from my product design course and apply it to my design. I understood that the design process was not perfect as I went through many changes along the way. In the end, I am happy with how the designs turned out as believe I fulfilled the needs of users and the objective of this project.
If I had more time and develop this project further, I would have liked to solve more problems such as the user journey in making returns and finding a better way to make it easier for users. In addition, I would have liked to have conducted further testing such as A/B testing where I would have liked to compare the performances to which design would perform better amongst users.
Have a project in mind?
Let's bring your design vision to life.
Have a project in mind?
Let's bring your design vision to life.