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 that 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 UX student at UX Land, I was tasked with designing a sustainable fashion website that addresses the impact of fashion on the environment. With a growing trend towards eco-friendly fashion, my objective was to create a user-friendly and inviting design that appeals to conscious consumers
Challenge
Fast fashion products are often cheaper and more accessible to consumers, which can make it challenging to convince them to invest in more sustainable clothing options. In order to tackle this issue, my first step was conducting extensive research on sustainability in the fashion industry, as well as the users who prioritize sustainability in their lifestyle choices. Through this research, I discovered four key factors 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

Due to the negative impact of fast fashion on the environment and society, an increasing number of people are seeking sustainable fashion alternatives. As a designer, my goal is to create an appealing and user-friendly website for these users.
Persona
To help communicate the information I collected during research about users, I created a persona. My persona, named Flora, is a nature lover who is conscious of the impact of fashion on the environment. She looks for clothes made from natural materials that have a minimal impact on the environment.
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 better empathize with my users and understand their feelings, I created sketches to develop my storyboard. Being a visual thinker, this approach allowed me to make deeper connections with my users and gain a better understanding of their needs.
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 sought to use inspiring images, words, and colors that aligned with our sustainability goals. Specifically, we were looking for images that evoked natural materials and landscapes.
moodboard3 1.png
UI Kit
Our goal for creating the UI kit was to develop a website with a clean, minimal, and informative shopping system that aligned with the sustainable fashion industry. Below are the logo designs and UI kit that we have created to bring our vision to life
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 on the website. I observed their behavior and interviewed them afterward. Based on the feedback I received, I made changes to the website to improve the user experience.

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 increase accessibility

The arrow icon provides an easy way for users to return to the top of the page without manually scrolling.

To accommodate users who want to continue shopping, we added a button in the final step of the checkout process that takes them back to the page they were on before starting the checkout process.

During the usability test, I observed that many users proceeded to the next step without selecting their preferred size, causing errors and confusion. As a result, I updated the design so that the "Next" button is only activated after the user selects their size, preventing any potential errors and ensuring a smoother shopping experience.

High Fidelity Wireframe
Frame 1 (3).png
noun_cotton_304723.png
Final project
The Impact
The following comment is based on the feedback received from the last usability test, which involved five users testing 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
During the project, I faced the challenge of balancing informative and shopping materials on the website. Conducting usability tests helped me understand the importance and efficiency of certain design elements. Additionally, collaborating with people across different time zones improved my communication skills. While I would have liked to focus more on accessibility to create a more inclusive design, I learned a lot from this experience.
bottom of page