top of page
Website Redesign
3 Weeks
Richard Sarmiento
Shanel Vicente
My Role
Interaction Design Lead
High - Fidelity Mockups,  Prototype, Brand Guide

Redesigned Eco-Stylist website is aimed to make it easier for eco-conscious shoppers to shop stylish, responsibly sourced clothing based on their core values: Sustainability, Fair Labor and Transparency.

Banner Image_Wix.png

With the increasing awareness towards eco-friendly clothing, sustainable and ethical fashion has become a new trend in the last couple of years. It is the mainstream emergence of a longtime movement aimed at offsetting the impacts of the fashion industry on the planet and humanity. Eco-Stylist is one of its primary advocates. It is an existing startup that provides an online marketplace and styling guide for ethically and sustainably made clothing.

The Problem

Shoppers need a way to easily educate themselves about responsibly sourced clothing and purchase this clothing online with confidence.

Research Synthesis

Usability Evaluation

To better understand the user’s thought process and perspective, we conducted a usability evaluation to identify potential problems with the existing Eco-Stylist website, by looking at a combination of learnability, efficiency, memorability, error management, and satisfaction.

LEMEr's evaluation.jpg

After the evaluation, we found the following major problems listed below:

  • It is misleading to name the clothing collection division of the website as “Shop Men”, meanwhile also providing women’s clothing within it.

  • No account is created to save users’ preferences.

  • No customer review section is available to help users better understand the product.

User Interview

By conducting interviews with shoppers who have vast online shopping experience, we wanted to understand shoppers’ online shopping behavior patterns, their awareness of shopping for eco-friendly and ethical clothing, and their experience with sustainable and ethical clothing practices.


Through looking at shopper needs, pain points, and empathizing with their personas, we began to brainstorm several new features. We used affinity mapping to narrow down our list of feature ideas, and dot voted on them to narrow them down even more.

Affinity map.jpg

Through user interviews, several patterns began to emerge:

  • There is a trend of general concern for accurate sizing and fitting.

  • Shoppers don’t go out of their way to research clothing manufacturing ethics, but are open to learn and change their practice.

  • Reusing clothes is one of the greenest ways of being sustainable, which also makes this sustainable and ethical practice affordable and cost-effective.

Shockingly, but not surprisingly sizing and fitting turned out to be the overwhelming concern from the user interviews. Given the fact that online clothing retailers struggle with high return rates, which is about 20% of all purchases, sizing and fitting is an inherent problem for shoppers shopping online. Especially for retailers like Eco-Stylist, which provides a marketplace with a collection of different brands, one size does not fit all.

“The biggest thing is like not really knowing how something will fit or look like. Like I bought this black jacket online, and when I saw it, it was like, huh, it was running much smaller. So that is to me, like one of the big drawback is the accuracy.”

“Online shopping got high chance that does not fit and I had to go to the post office to return.”

Based on the user interviews, we developed two personas and a storyboard.

Competitive and Comparative Analysis

Competitive and Comparative Analysis was conducted with other online companies where shoppers can get responsibly sourced clothing options curated for their look.

Competitive analysis_1.jpg


Eco-Stylist’s website will help online shoppers find the perfect fit in a marketplace setting, allowing for extreme clothing personalization, and provide access to information on sustainable and ethical clothing as an educational platform open to the public.


We decided to prototype the following new features: Personal sizing and fitting evaluation, Personal style evaluation, Customer review with detailed questionnaire about sizing and other qualities, and Worn wear with story sharing.

User Flow

User Flow.jpg
Site map.jpg

Site Map


The landing page was created with an Education division and a Collection division, the two major focuses of the website. Before entering the Collection home page, a series of slides would pop out for Personal sizing and fitting evaluation and Personal style evaluation. The data collected from these slides would also help us better understand shoppers’ needs, and recommend products that they might like or might be perfect fit to their size and body type.

Landing Page.jpg

On the product page, we would recommend the best-fit size for that specific product, based on our evaluation and data collected from customer review. The product would be presented with models with different body types by simply clicking the body type icons. The Customer review section on this page would provide shoppers with access to detailed feedback and uploaded photos of other shoppers who already purchased this product.

product Page1.jpg

Another feature on the product page is the “like” button. Once shoppers “like” the product, this product would be automatically saved to the shoppers profile. The system would send emails to shoppers when it was on sale or other special discount.

Review page.jpg

User Testing

Next, we conducted moderated usability testing of the mid-fidelity prototype on the website, taking videos of their actual usage and having the users talk through the thought process as they use the prototype. According to the testing results, we revised features as below:

Home Page: Header Transparency


Home Page: Button Color


Profile Page: Add Style Photo


Product Page: Popup Window @ Checkout


Review Page: Redesign Rating System


Next Steps

  1. Sizing & fitting was a user need, but we could not create a compelling-enough prototype in the limited timeframe and user testing. It would be nice to be able to spend more time exploring this feature in depth.

  2. Work more intently with stakeholders to ensure that designs are cohesive with business strategy. We were too far along in the process to pivot upon discovery that we may not be in sync. Possibly consider facilitating site redirect, while still maintaining personalized features.

  3. Build out gender customization options for the purpose inclusivity, allowing users to have options curated for male, female, neutral/unisex attire, giving shoppers complete control of the personalization of their style.

Eco-Stylist Axure Prototype

Hero Image_new.png
Hero Image_new_1.jpg
bottom of page