top of page
logo 2.png
Anchor 1

A sustainable fashion website

GG.png
SUMMARY

Problem

Making a user-friendly and minimal fashion design that lets 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

Three weeks

Deliverable

User researcher, Interaction designer,Photo editor, UI designer

DESIGN PROCESS
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 toward 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
1

Natural material

recyShipping.png
2

Carbon neutral shipping

EthicalFactories.png
3

Ethical factory

Package 2.png
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 an 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
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 minimal design and layout. With the first look at the homepage, I got the sustainability spirit.
In the hero from the texts and navbar, it is clear that it is a fashion website.
I like the consistency of seeing a cotton flower at the top and then its repetition in the footer.
The color palette shows sustainability feelings.
TAKEAWAY

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