.Hi! :) I am Maryam
A UX designer with ten years of experience in visual art
.Hi! :) I am Maryam
A UX designer with ten years of experience in visual art
.Hi! :) I am Maryam
A UX designer with ten years of experience in visual art
A sustainable fashion website
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
About
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:
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.
"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.
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.
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
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.
.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
.png)
