Stylish Logo

App & Responsive Website

E-Commerce Clothes & Accessories Online Store

UX Research | Wireframes | User Testing | High-Fidelity Prototype

Overview

Stylish is an E-commerce online clothes and accessories store, which comes on two platforms - for mobile as a dedicated app and a responsive website. The store offers you many different styles of clothing for both men and women.

Duration & Role

January 2022 - February 2022

UI/UX & Product Designer, in charge of UX Research, paper and digital wireframes, low-fidelity prototype, user testing and high-fidelity prototype.

Problem

People who buy clothes and accessories online face difficulties while trying to do that from a desktop because most of the competitors have a lack of experience in their desktop version of a product. Also, one of the problems is that it’s too hard for users to find all-in-one clothing store.

Stylish - The Problem
Stylish - The Solution

Solution

Design an app which will be responsive and dedicated mobile app for all the users. In addition, design a responsive website which allows desktop users to use the product easily.

Design Process

Empathize - Define - Ideate - Test - Prototype

Empathize IconDefine IconIdeate IconTest IconPrototype Icon
Stylish - Responsive web and mobile design

Empathize

User Research | User Persona | User Story | User Journey Map

Research

Qualitative Research

I conducted a UX research based on real potential users. I recruited 5 participants - 3 women and 2 men between 18 to 45 years old. Each session took 5-10 minutes and included these questions:

1. Which platforms do you use to buy clothes and accessories online? Which device do you use to order?
2. What is the first thing do you want to see when you enter a shopping platform?
3. How would you describe your shopping habits? Do you have an idea ofwhat you want or do you prefer explore new trends?
4. How do you pick your general style in clothing stores online?
5. How do you sure that the product you picked is fit for you the best when you buy online?
6. How do you feel when the item you want just sold out?

Research Findings

4/5

Most of the participants said that they prefer to have the categories as one of the first things they see in a store.

5/5

All participants admitted that they go in online clothing stores to see explore trends and not only when they need it.

5/5

All participants choose items to shop according to reviews, popularity and people's experience with a product.

Asos & Shein Logos

Shein and Asos are currently the participants' favorite online clothing store.

User Personas

Stylish - Persona Amy

Amy is a Devops engineer in a big high-tech company. She is married and have a new baby. Amy is addicted to shopping online, she always finds something to buy. She wants to have more items for her newborn baby and she also wants to keep her style fresh and fits to the new trends. Amy want to have the option to find anything at the easiest way and she uses only her mobile phone for shopping.

Stylish - Persona Eran

Eran is a 21 years old Bartender. He works a lot and one of his hobbies is buying clothes on the internet. He usually brings his laptop anywhere so he can study. He wants to have the perfect platform to explore new trends from his own laptop. He is frustrated from all the platforms he currently uses and wants to have the one that can set his style automatically.

User Stories

Stylish - User story Eran
Stylish - User story Amy

User Journey Maps

Stylish - User journey map Amy
Stylish - User journey map Eran
Stylish - Responsive web and mobile design

Define

Problem Statement

Stylish - Problem statement Eran
Stylish - Problem statement Amy

Ideate

Paper Wireframes | Digital Wireframes | Low-Fidelity Prototype

Paper Wireframes

I sketched these samples of wireframes in order to understand the structure of the product I am willing to design. Creating wireframes helps us coming up with new solutions.

Stylish - Website Paper wireframes

Digital Wireframes (Low-Fidelity Prototype)

After I skecthed my ideas on paper, I can now move on and digitalize it. This is the first structure of the product I designed.

Stylish - Website Low-Fidelity PrototypeStylish - App Low-Fidelity Prototype

Test

Unmoderated Usability Study

Stylish - User testing

Study Overview

I conducted one round of an unmoderated usability study, in Israel, remotely. I recruited 3 women and 2 men between the ages 18 to 60 in order to understand their online shopping habits. Each session took 10-15 minutes and each participant been asked to perform several tasks like add items to the cart, change the payment method, navigate through the app and more. This study performed on the low-fidelity prototype, which gave us some insights to follow for the high-fidelity prototype.

Stylish - Responsive web and mobile design

Study Insights

Navigation Icon

Based on the pattern that some users couldn't understand where to navigate through all the pages of the app, an insight is that we should add texts under the icons of the navigation menu.

Payment Icon

Based on the pattern that users need to be able to change their payment method, an insight is we should create a new screen for the product which allows the user manage his payment methods.

Delete Icon

Based on the pattern that some users couldn't understand how to take out an item from the cart, an insight is that we should add a trash icon which allows it to the user.

Prototype

High-Fidelity Prototype | Visual Design | Interaction Design

Stylish - Responsive web and mobile designStylish - Responsive web and mobile designStylish - Responsive web and mobile designStylish - Responsive web designStylish - Responsive web and mobile design