top of page
Inspiring Sustainable Fashion: Eco-Stylist
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.
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?
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.
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
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.
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
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.
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.
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