
A sustainable fashion website


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

About

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:




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.

"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.







Moodboard
Based on our research, we should find inspiring images, words, and colors. We were looking for images that reminded nature materials.

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.




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
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
.png)
