Eco-Stylist
Eco-Stylist is a website that was created to provide eco-friendly and sustainable clothing options for men through brand research and styling services. We helped make a bigger splash for this company by adding key features that users couldn’t live without!
Project Brief
Time Duration
2 Weeks
Project Type
Ecommerce Marketplace
My Team
My role- Project and UI Lead
Sadia Bibi- Research Lead
Orion Elverum- Interaction Lead
Where Ethics, Fashion, and a Marketplace Meet
To make a bigger splash in men’s eco-friendly clothing, Eco-Stylist was looking for a complete website redesign. That is where we came in! Our goal was to build an entirely new website for Eco-Stylist that included new features while still sticking to their business model.
We discovered that their database, brands, and of course mission was vast and impactful, but it was missing a few key features that would increase traffic, multiply conversion, and start conversation. So, we set out to discover these key features and push their business to the next level.
Goals
Customize the shopping experience
Add a Checkout marketplace feature
Give the website a fresh, new look
Steps
Defining the Need
1
Heuristics Evaluation
After each member of the team had a chance to go through the website, we all came together and compared our notes. Our likes, dislikes, frustrations, etc. were vast, but what rang true for all of us were these main concerns:
You cannot purchase items onsite
There is no customization feature
You are not able to purchase every piece on the featured outfit
The are way too many outbound links on the website
This heuristics evaluation led us to believe that there was a need for a website redesign and also for new features that would make this site more user-friendly and effective.
Research Plan
After we conducted a heuristics evaluation on the website, we were then better able to write out a research plan to create objectives, formulate questions, and schedule our interviews. Our main objectives were to:
Find out what consumers are looking for in terms of personalized eco-friendly online clothes shopping
Discover if consumers would find it helpful to have a lookbook of outfits that are put together from their personal style preferences
Determine if consumers want (and how important it is for them) to have a common checkout payment portal
Screener Surveys
We set out to answer the questions to these objectives by creating a screening survey to find interview participants that met our specific criteria.
We used Google Forms to create this 8-question survey. We focused our questions around online shopping habits, if they purchased men’s clothing and their opinion on how important eco-friendly clothing was to them. The surveys were on Facebook, Slack, and LinkedIn. We were able to find 11 willing participants that met our basic criteria:
1. Shopped and purchased clothing online at least once
2. Shopped and purchased men’s clothing at least once
Initial Interviews
We initially interviewed 11 participants asking them questions based on the objectives we outlined in the research plan. These questions helped answer if a personalized quiz would be helpful to them, what kind of questions they would want us to ask, how they felt about personal styling services, what key features they looked for on an e-commerce website, their thoughts and opinions of the current eco-stylist shopping experience, and the importance of research for each clothing brand.
Understanding the Users
2
After collecting and organizing the insights, feedback, and opinions we received, we began to synthesize the information and discovered that the participants, in general, were looking for pretty key things that were missing from the current website.
Insights
Users want an easy checkout process that stays onsite
Users would love to have a lookbook with curated outfits just for them
Users are looking for a customized experience, especially when shopping for ethical clothing
Credible research and accurate labeling is very important when purchasing ethical clothing
“I want to know all of the details about the clothing I am buying.”
“I don’t like leaving a website to make my purchases.”
Our Persona
With all of these clear needs of our participants in mind, we then set out to create a persona.
In a nut-shell, John Abraham is a marketing manager who finds it difficult to easily shop for eco-friendly clothing that is open and transparent, has customized style features and packages, and has an easy checkout process.
So, we took on the challenge of redesigning Eco-Stylist to better fit the needs of John Abraham.
The Problem
From the data and insights collected from our interviews, we found that:
Users need a website that allows them to search and purchase eco-friendly clothing tailored to their style preferences with an easy checkout process so that they are able to easily put together outfits, have peace of mind that they are eco-friendly certified, and experience a smooth checkout process.
The Solution
If consumers had access to a website that researched and certified eco-friendly clothing, offered a way to tailor and purchase clothing options for their specific style preferences, and also have a “one-stop-shop” checkout process, it would make the shopping process easier, more convenient, and overall more satisfying.
Ideation
3
User Flow
We began our ideation phase by listing out the key processes and features that we wanted to implement in our designs. We started by creating a user flow for a few of the main features. These included the:
- On boarding experience
- Shopping and checkout flow
- Style quiz feature
Wireframes and User Testing
Many sketches later, we began to map our our wireframes in Axure to create a clickable prototype to conduct usability tests with. We walked 8 participants through the on-boarding process, style quiz, shopping flow, styling services, and searching sustainable brands. Our users had a lot of feedback for us- and as always- it was extremely valuable. Below are the key insights that we pulled out from our collected data.
Intuitive navigation
Expected features
Easy search and filters
Loved the personalized style quiz and Lookbook
Simple browse and checkout
Bigger Elements
Confused about the bell and heart icon
Change the dark brown color
The menu is hard to read
The wording isn’t very clear
Design Solution
4
Axure Prototype
From our usability tests, we were better able to iterate our designs for a more user-friendly, and also in this case, more aesthetically pleasing mid-fidelity design.
Style Guide for High-Fidelity Designs
The high-fidelity designs below showcase the features that we improved upon or created (with the company’s constraints) that helped us meet our goals of creating a personalized shopping experience that had an onsite checkout feature while being displayed in a more aesthetically pleasing way.
Home Page
The homepage walks the users through the features of the personalized style quiz and services, the Lookbook, and shopping. The homepage also holds the mission of Eco-Stylist and their partners.
Find your Style
This is the short personal style quiz that generates looks for the Lookbook and also provides recommendations based on your taste and what you are browsing for.
Shop Men’s
This page showcases the clothing of over 50 sustainable brands in a digestible way.
The Cart
This is a simple, but familiar cart displaying the items you’ve added to purchase. Our users found this feature to be the most important addition.
Learnings and Next Steps
5
Learnings
The final project for Eco-Stylist encompassed a way for users to personalize their style preferences, buy entire outfits, and also check out multiple items in one purchase on site. Adding/enhancing these key features helped make the shopping process easier and more delightful! We learned that customers are very interested in short and concise research, personalization, and convenience when shopping for eco-friendly clothing.
As a team, we learned that communication and iteration are key! We also learned to put in the work upfront and the designs will follow right behind 
Next Steps
- Continue building out the entire website
- Add more content and features to the pages
- Continue to run more usability tests
- Continue UI to create a high-fidelity prototype for all pages
- Launch and reiterate designs and features as necessary