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

View the the 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.

Link to 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.

Link to the competitive audit

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.

Link to the low-fidelity prototype

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.

Link to the first UX Research Study

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.

Link to the second UX Research Study

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.

Link to the high-fidelity prototype

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.

Thank you.

Page updated

Google Sites

Report abuse