top of page

Inspiring Sustainable Fashion: Eco-Stylist 

zappos-vegan-retail-design-1536x614.jpeg

My Role

UX Designer

Timeframe

2 weeks

Tools

Figma

Team

Individual

Overview📚

Context

Eco-Stylist is a sustainable fashion website that promotes transparent, environmentally sustainable and ethical clothing brands. Eco-Stylist has asked for help in redesigning it’s platform. In order to address the issues and pain points associated with the website, further research is needed to narrow our focus and build out design deliverables in Figma to pass on to another designer.

Problem

The shopping experience on Eco-Stylist is time consuming and not convenient. Customers have to spend extra time to find an item on Eco-Stylist to get directed to an external site to view more information and purchase the product. How might we make changes to the website in order to facilitate a more time efficient and convenient shopping experience?

Solution

If we add a “add to cart function” and summarize the product details on Eco-Stylist, then customers could purchase ethical clothing directly on Eco-Stylist because customers want a fast and convenient shopping experience.

The Process

ecostylistprocess.png

Discovery🔎

Discovery🔎

Research Goals

  • Surface concerns, errors or issues through a usability heuristics evaluation

  • Identify standard features, best practices, and opportunities to differentiate or innovate through a competitive analysis and SWOT analysis

  • Narrow focus to help build a seamless customer experience through a journey map

Strategy💡

Strategy💡

Journey Map

Based on the research, ​I created a journey map to visually illustrate a customer’s processes, needs, and perceptions across their interactions on the current Eco-Stylist website to highlight changes that need to be made.

research03.png

Research Key Findings

Based on my research findings, I decided to make the following changes to the website:

  • Add more product details including photos, details and care, brand sustainability, reviews, ratings, and the environmental impact to better summarize information on Eco-Stylist and guide users towards a well informed, ethical purchase

  • Add free styling suggestions to gain trust from users and establish credibility for their one-on-one styling sessions

  • Add a “add to cart” function in order to cut down the time needed to make the purchase

  • Redesign and rearrange buttons and icons to make the website more consistent

  • Add back buttons to account for user errors

Sketches

Using the iteration suggestions I created after research, I sketched out my mobile and desktop wireframes on paper in order to communicate my ideas visually before designing on Figma.

desktop_sketch.png
mobile_sketch.png

Execution💻

Execution💻

Redesign

On Figma, I created a design system to be able to use together to build grayscale wireframes. Additionally, I added annotations that speak content and interactions as needed to facilitate tasks and deliver on the value of the product.

ECO_MOBILE.PNG.png
ECO_DESKTOP.PNG.png

Conclusion😊

Conclusion😊

This project forced me to pay attention to modularity, affordances, and accessibility to create structure for my layouts. Although it was challenging redesigning wireframes optimized for both desktop and mobile, creating a design system was helpful in terms of providing organization. Possible next steps include further collaboration with the designer, high fidelity prototypes, and usability testing.

bottom of page