Header with mockups. "Travelr: an app that makes travel planning easy."

Purpose

I often shop online for clothes. And while it is easier to buy clothes online I frequently find myself frustrated by the user flow. The lack of white space causes me to have visual discomfort. To solve this, I designed this mobile application.

Objective

Creating a fashion E-commerce website that allows users to shop from anywhere.

Challenge

To design a user experience that is easy to use, has a clear user flow, and does not cause visual discomfort to users due to lack of adequate white space.

Overview

The Closet is a fashion e-commerce mobile application that allows users to shop for their favourite brands from anywhere so that they can save their time and energy. It also lets users keep up with the latest fashion trends.

Role:

UX designer, UI designer.

Duration:

2 months.

Tools:

Figma, Microsoft Excel, Surveysparrow.com
See Prototype

Research

To begin this project I needed to understand my users. To get more insight on this I conducted a survey and gathered over 50 responses. The survey respondents reflected the demographics of the target users. 71% of them were employed and 21% were students. 59% of the respondents were male and 41% female resulting in a relatively even spread.

Some other findings were:

  • 61% of male respondents preferred online shopping while 58% of women preferred shopping in person.
  • Clothes are the most preferred category to shop from while jewellery and footwear are the least preferred.
  • 64% of female respondents spend less than Rs. 2000 in a month and 33% spend between Rs. 2000 - Rs. 5000 while 52% of male respondents spend less than Rs. 2000 in a month and 48% spend between Rs. 2000 - Rs. 5000.

The above data was used to develop two user personas to simulate the target users.

No items found.
User Persona PDF

Based on this data I also developed Affinity maps based on what the users liked, what challenges they faced and what suggestions they had to offer.

Ideation

Using all the data gathered, I listed out all the features and pages required for this mobile application and created the following Information Architecture.

Following the information architecture, a mid-fidelity prototype was created by first producing a low-fidelity paper wireframe and then a mid-fidelity digital wireframe.

No items found.
Medium-Fidelity Prototype

Prototype

After the completion of the medium fidelity prototype, I then established the style guide for this application.

Following the information architecture, a mid-fidelity prototype was created by first producing a low-fidelity paper wireframe and then a mid-fidelity digital wireframe.