A sustainable fashion website
Making a user-friendly and minimal fashion design that lets the users know why they need to pay the high price for the products.
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.
UX/UI Designer, Interaction designer, Motion designer (in a team of two designers)
User researcher, Interaction designer,Photo editor, UI designer
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
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:
Carbon neutral shipping
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.
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
* 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
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.
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.
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
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.
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
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.
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.