top of page
logo 2.png
Anchor 1

A sustainable fashion website

highlight image 7.png
iphone figma design.png

Problem

Making a user-friendly and minimal fashion design. It should let the users know why they need to pay the high price for the products 

Solution 

The visual design should reflect the high quality and sustainability of the products. It should also give the users enough information about why the products are worth buying.

Role

UX/UI Designer, Interaction designer, Motion designer (in a team of two designers)

Duration

3 weeks

Deliverable

User researcher,Interaction designer,Photo editor, UI designer
Design process sample.png
About 
logo 2.png
As a student at UX Land, I was assigned to design a sustainable fashion website.
Fashion is the third biggest industry in the world and has a major impact on the environment. Nowadays, there is more tendency among many people to use more natural with less footprint on the environment. So, my goal was to create a friendly and encouraging design for those users.
 
 
Challenge
Fast fashion products are cheaper and can sell faster compared with the same sustainable clothes. How to nudge the users into buying such products was the most important challenge in this project.
My first step to solve the problem was doing wide research about suitability in the fashion world and finding their users, lifestyle, goals, and values. I found four facts that shape the core of sustainable fashion products:
 
 
green background 4.png
recyShipping.png
EthicalFactories.png
Package 2.png
1

Natural material

2

Carbon neutral shipping

3

Ethical factory

4

Recyclable packaging

Because of these reasons, some people have chosen to use sustainable products, and I need to make designs for those users.
Persona
To help communicate information about the users that I collected during research, I created a persona. 
painting 9 ok.png
"I miss my childhood time in the nature. Now, everywhere is surrounded by the building and noises of cars".

Flora, 35 years old
Lives in San Francisco
Works in a tech company

GOALS & NEEDS:

She loves spending time in nature. She looks for cloths made from natural material and less harmful for the environment

CHALLENGES:

* Doesn't have much time to go shopping and need to find her clothes easily on the website

* She Needs to learn more about the products and the materials before shopping

* She would like to have some ideas for setting her clothes

​

HOW WE HELP:

* Providing necessary information about the product

* Minimal design with the organic color theme

* Smooth and easy shopping process

* Recommendation and new offer

Sketch
To make my storyboard and empathize with the users I made some sketches. As a visual thinker, it helps me to connect with my users and understand their feelings deeper.
 
painting 1.jpg
painting 3.jpg
painting 6.jpg
painting 4.jpg
painting 5.jpg
painting 8.jpg
painting 7.jpg
Moodboard
Based on our research, we should find inspiring images, words, and colors. We were looking for images that reminded nature materials.
moodboard3 1.png
UI Kit
Our goal for making the UI kit was to design a website with a clean minimal, and informative shopping system. Blew are the logo designs and UI kit.
 
 
logo design process 2.png
UI kit.png
UI kit.png
UI kit.png
Iteration 
I conducted a usability test with six users asking them to shop for a hat. I observed their behavior and interviewed them after the task. The below change is the result of the tests
Frame 112 (1).png

Because of importance of the "About Us", it is placed on the left side of the navbar.

 "New Release" section appeases  immediately after the hero image to give more accessibility

The arrow icon helps the users to go top easily without scrolling.

Some users would like to continue shopping so, in the final step of shopping the bottom takes them to the page they did the last shopping. 

During the usability test, I found many users go to the next step with the default size. The new design does not activate the "Next" bottom until they select the size. It helps prevent errors.

High Fidelity Wireframe
Frame 1 (3).png
noun_cotton_304723.png
Final project
The Impact
The coming comment is the result of the last usability test with five users on the final project. 
It is minimal and the workflow is so clear.
I like the consistency of seeing a cotton flower at the top and then its repetitionin the footer.
The color palette shows sustainability feelings.
In the hero from the texts and navbar, it is clear that it is a fashion website.
I like the minimal design and layout. With the first look at the homepage, I got the sustainability spirit.
What I Learned
Balancing between shopping and informing materials on a website was very challenging and helped me learn a lot. I found how much usability tests can change my assumption about the efficiency or importance of the design. I also improved my ability to collaborate with different time zone people. If I had time, I would like to work more on the accessibility of the pages to present an inclusive and more friendly design for the users.
bottom of page