Re-discovering Eco-Stylist
Project
Eco-Stylist
Time Duration
2 Weeks
Team
Sara Holt: Project Lead
Sadia Bibi: Research Lead
Orion Elverum: Interaction Lead
Project Details
Eco-Stylist is a website that was created to provide eco-friendly and sustainable clothing options for men through brand research and styling services.
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 encompassing a way for users to personalize their style preferences, buy entire outfits, and also check out multiple items in one purchase on site would take Eco-Stylist to the next level by increasing their traffic and sales and eco-friendly conversation!
The Challenge: New Feature Mid-Fidelity Design
Eco-Stylist was born to responsibly help reduce the ignored pollutants that are not so slowly harming our world- and of course to show that all of this can be achieved while still dressing to the “T.”
When Eco-Stylist reached out asking for not only a new design, but also new features to make their mission more effective and their site more user-friendly, our team jumped at the challenge!
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 and start conversation. So, we set out to discover these key features and push their business to the next level.
The Process
1
Defining the Need
Heuristics Evaluation Discovery
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:
1. You cannot purchase items onsite
2. There are way too many page links
3. You are not able to purchase every piece on the featured outfit
4. The are way too many paragraphs to read through
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:
1. Find out what consumers are looking for in terms of personalized eco-friendly online clothes shopping
2. Discover if consumers would find it helpful to have a lookbook of outfits that are put together from their personal style preferences
3. Determine if consumers want (and how important it is for them) to have a common checkout payment portal
Screener Survey
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 18 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
After we collected our willing participants, we jumped into interviewing them to discover their insights, opinions, and gather their feedback.
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 feel about personal styling services, what key features they look 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.
We gathered the answers from our interviews to create an affinity map to better understand what the interviewees in whole were looking for.
2
Understanding the Users
Insights
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. We were really excited to see that our participants were very open to shopping at eco-friendly clothing stores if these needs were met…
Our Persona
So 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.
Our 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.
Our Solution
So, with our problem at hand, we set out to make a 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.
3
Ideation
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:
- Oboarding experience
- Shopping and checkout flow
- Style quiz feature
Sketches
Using the user flow, we began to roughly sketch out designs that could help solve our problem individually in increments of five minutes. We then presented our designs to each other and combined the best elements from our sketches to create the initial design of each process.
Wireframes
Many many sketches later, we moved into Miro to wireframe out our ideas. We normally use Balsamiq, but we really wanted to work together in real time since we all had slightly different opinions on the layout. Working together all at once actually helped us talk and frame out our ideas a whole lot better!
Initial Mid-Fidelity Prototype
After we had our wireframes sketched out on Miro, we then transferred our designs to Axure to began adding interaction to our frames for usability testing.
These are a few of our first initial pages. We walked our participants through the onboarding process, the “find your look” quiz, shopping for a sweater, discovering the style packages that were offered, and filtering sustainable brands. (We would soon discover, from our users, some adjustments to make that would change the look of these first designs.)
Usability Testing
After creating a clickable prototype for user testing, we walked our eight additional participants through some specific processes to get their opinions, insights, and overall feedback. The processes were:
1. The onboarding process
2. The “Find your Look” quiz
3. Shopping for a sweater
4. Finding the style packages
5. Filtering sustainable brands
From these test, we gleaned the following:
These are a few of our first initial pages. We walked our participants through the onboarding process, the “find your look” quiz, shopping for a sweater, discovering the style packages that were offered, and filtering sustainable brands. (We would soon discover, from our users, some adjustments to make that would change the look of these first designs.)
After completing the usability tests, we set out to make our buttons bigger and more consistent in style, remove confusing icons that were not essential, change the theme color, redesign the menu, and re-word a few key headings/buttons.
A few quick changes later, suggested by our participants, really helped make this website more user-friendly and aesthetically pleasing.
4
Final Design Solution
After gathering more insight on how to make these designs better, we continued using Axure to solidify our mid-fidelity designs. This is what we designed!
Design Library
Although Eco-Stylist was just looking for a mid-fidelity prototype showcasing function and new features, I sketched up a simple design idea if they wanted another perspective 🙂
Colors
Idea for a High-Fidelity Design
All images are from Unsplash.com: Magnet.me; Dami Adebayo; Majid Akbari; Rajesh Rajput; Ali Kazal; Adeolu Eletu
5
Next Steps and 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 is 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
- Adding 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
Next Project:
Want to Connect?
Please feel free to reach out!