Customer: Fradely E-commerce

The Complete UX Process:

  • Interview with steakholders, analysis of the business goal.
  • Competitor analysis (Benchmark).
  • Problem definition.
  • User Research.
  • User Personas.
  • Customer Journey Map / User Flow.
  • Information Architecture.
  • Business Requirements Document.
  • Wireframing / Prototypes / User Interfaces / Mockups.
  • Final test.

Brief: The client requested to have “mobile friendly” website and app for their womenswear e-commerce. The customer also specified to sell to foreign customers, for the moment the website and the app will be in English only.

What have I done?: I designed the “mobile friendly” website and an app as required. First of all, I wanted to understand what the Client expected from this project, I did all the research related to the UX and e-commerce process and I informed the client of each step. Previous e-commerce experience taught me what “abandoned cart” means. To minimize this percentage, I focused a lot on usability. Only after passing the final check did we launch the project. In this study-case  I will present the case study of the project’s app.

UX / UI Designer, Interaction Designer e UX Researcher: Elif Salman

Fradely website


1-Interview with steakholders, analysis of the business goal:

We discussed the business objectives with the customer. We discussed the achievement of goals and fears of failure. Who is our target? In this phase I have tried to be as transparent as possible about the actual achievement of the proposed goal. Finally, we specified the timescales and budgets needed for the projects. The customer wants to achieve the  maximum sales goal.  I should focus on target and funnel, CTA and reduce abandoned cart for this project.

2-Competitor analysis (Benchmark):

We have to see what the competitors have done. I’ve researched many similar ecommerces, examining both the positives and the negatives. For now I present only one example relating to two competitors. Both competitors have a responsive website  and also have an app as our project.

3-Problem definition:

Once the target has been identified, the time has come to find solutions to real problems. The target are women aged 16-50+.

Problem 1: User searches for an app to buy clothes because they don’t have time to go to a physical store.
Goal 1: The app must be simple for all users, it must achieve its objectives with just a few steps, it must not abandon the cart, the payment process must be clear and simple.
Problem 2: The user is looking for a website to buy clothes but the refund and shipping process is not very clear.
Objective 2: The website must allow the user to have clear information for the shipping process and any refund before purchasing.

4-User Research:

We carried out a survey and interview with the aim of better understanding the opinion of users and the pain point to achieve the goal. Here we try to understand  whether the hypothesized solutions are valid. The survey and the interview were carried out both in English and in Italian. For this project we do both qualitative and quantitative research.

5-User Personas:

In the UX Design, the user always comes first. But to put user needs first, we need to know who we’re talking about. We have to build an identikit of ideal users. The elements I used for User Personas are:

  • First name
  • Photo
  • Short bio
  • Age and occupation
  • Goals
  • Frustrations

At this part, we focus again on problem definitions. Here we have also created an Empathy Map, we evaluate what the user says, does, thinks and feels. I will present two examples of  Jennifer e Francesca.


6-Customer Journey Map / User Flow:

I have studied all the possible actions that users can take to purchase the product. We talk about the actions, thoughts, feelings and opportunities for the user to improve during his journey, from the choice to the purchase of the identified product. Here we talk about the example of Jennifer.

7-Information Architecture:

I drew all the tree structure of the product. This way the project titles are clearer.

8-Business Requirements Document:

This phase is essential. We have to communicate to the client a report of competitors, user stories, flows, some visual inspirations. If desired, we can also present the client with a wireflow or prototype or as in this project, we can present this part for the next presentation. We must communicate the outputs clearly to the customer.

9-Wireframing / Prototype / User Interface / Mockup.

At first I designed the screens without the graphics, I created the Prototype and I conducted a test with 7 target users. After the test some changes were made to the project. Once the client also agreed on the project we created the mockup.

10-Final Test :

I designed one last Mockup with Figma to test the final version with users. Once the project has passed all the tests, finally we can launch our product!!! The project was a great success.