Project Overview
Redesigning an international e-commerce site. Most of its target customers are willing to finish the order process with their smartphones.
My role
User Experience Designer
User Interface Designer
Responsibilities
Information Architecture - User Research - Wireframe - Low/High Prototype - Usability Test
Project duration
May to October 2021
Old design
The problem
Poor visual and interaction design;
No integration with modern technology;
The serious and dry tone of voice;
Weak UI/UX design;
Disorganized information architecture design;
Inefficient searching method;
Unnecessary personalization options;
No personalization option (screen mode, language, screen reader, etc.);
Non-responsive design;
Non-inclusive design;
Complex ordering process.
The project goal
Increase customer satisfaction by:
Improve user interface design
Redesign the architecture
Mobile-first design
Facilitate ordering process
Spread visual brand identity
Use a unique tone of voice
Easy size-choosing process
Reduce the risks of online shopping
Understanding the user
User interview
Empathy map
Persona
Problem statement
User journey map
User flow
Competitive audit
Understanding the user
User interview
Empathy map
Persona
Problem statement
User journey map
User flow
Competitive audit
User interview
To identify user pain points, the personal interview with six candidates was conducted by considering diverse parameters such as sex, age, education, location, etc.
Interview goals
Challenges
Understanding common challenges users face trying to order clothes online
Behaviours
Identifying common user behaviours and experiences with tasks that my product is trying to address.
Needs
Understand user's needs while shopping online
Frustrations
Identifying user frustrations with the process of finding and ordering clothes online.
Pain points
Size
Some users mentioned the high risks of receiving the wrong size after cloth-shopping online
Time
Working adults are too busy to spend time shopping in stores
Poor design
Platforms for ordering clothes online do not have a good design and are confusing
Risks
Platforms for ordering clothes are not equipped with assistive technology
Empathy map
All the interviews were recorded. Later by reviewing the interviews I was able to understand the users I am designing for, highlight their needs and identify user pain points and create the user's empathy maps.
A primary user group composed of workers who do not have time to shop in stores was identified through research.
This user group confirmed initial assumptions about LUXIRE, but research revealed that time was not the only factor limiting users from shopping in stores. Other users faced obligations, challenges or risks that made it difficult to order clothes online or shop in person.
Persona: Henri
Henri is a researcher who needs to receive clothing that fits him properly because he does not have time to return a package.
Henri's user journey map
Mapping Henri’s user journey maps revealed how efficient it would be for users to order clothes online via a dedicated e-commerce application.
Persona: Caterina
Caterina is a full-time employee who expects her needs to be anticipated by product providers. she needs to feel comfortable and experience worry-free shopping.
Caterina's user journey map
Mapping Caterina’s user journey map revealed how helpful it would be for users to access a dedicated e-commerce application.
User flow
Competitive audit
To recognize the direct and indirect competitors of the business competitive audit research was conducted.
Starting the design
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Paper wireframes
I prioritized a quick and easy ordering process to help users to save time.
Digital wireframes
As the initial design phase continued, I made sure to base the screen designs on findings and feedback from the user research.
Easy navigation was a key user need to consider in the designs in addition to equipping the application to work with assistive technologies.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of finding and ordering a fit so that the prototype could be used in a usability study with users.
Usability study
Research goals
Can users complete core tasks within the prototype of the app?
Is the app easy to use?
The reasons why customers use the app?
Methodology
Study type: Unmoderated usability study
Participants: 6 participants, Three males, Three females between the ages of 20 and 73
Locations: Remote (Belgium, Italy, France and Canada, Iran)
Length: 10 minutes per participant
Research questions
What insights can we gain from user flow for customers ordering and paying for an item?
How long does it take for a customer to reach the destination?
Do the visual elements in the app support the customers in navigating through the app?
Key Performance Indicators (KPIs)
Time on task
conversion rates
system usability scale (SUS)
First usability study
Users were asked to choose an item and find their size from the size chart and complete the order process.
Findings
less customization
Users need a clear design for the item page with fewer buttons
Easy size choosing
Users need a description of the size guide button's function
Followable size guide process
Users need a simple and followable size guide process
Shipment address
Users need to insert the shipment address
Second usability study
Users were asked to add an item to the basket, add a new card and finish the payment process.
Findings
Buttons functions
The function of "INSERT AN NEW CART" is not clear
Buttons visibilities
Users cannot find the " SIZE CHART" and "ADD TO BASKET"
Refining the design
Mockups
High-fidelity prototype
Accessibility
Mockups
Based on the usability study result I found out the landing page needs some modifications.
Before usability study
After usability study
Since the first usability study revealed frustration in finding "SIZE CHART" and "ADD TO BASKET". To streamline this issue, I revised the item page design and change the "SIZE CHART" button to "SMART SIZE" to clear its function.
Before usability study
After usability study
Early designs allowed for some customisation, but after the usability studies, I revised the design of SMART SIZE so that after answering some simple questions users can know their size.
Before usability study
After usability study
Before usability study
After usability study
Before usability study
After usability study
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for placing an order and checkout.
Accessibility considerations
Easy to search and find
Safe size finding
Clear and fast process
Going forwards
Takeaways
What I learnt
Takeaways
The new design improves user satisfaction by considering the user's needs. In this case study, users are able to choose their best size and check out quickly.
What I learnt
This project helped me to understand the UX process better by practising and testing with real users. I realized how my thoughts were different before listening to the users and how usability testing improves a design.