x

Contact Me

/001

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Eco-Stylist

Tools: Balsamiq, Axure
Deliverable: A medium fidelity clickable web application in Axure

Team Members
  • Talia Bowles - Interaction Designer
  • Jackie Jay - Product Manager
  • Brock Davis - UX Researcher
Skills Used
  • User Research
  • Information Architecture
  • Sketching
  • Prototyping
  • Visual Design
  • Product Design
  • Interaction Deisgn
Stakeholders
  • Eco-Stylist
*Jump to demo

Eco-Stylist is a men's clothing discovery platform that recommends sustainable and ethical clothing brands.

"Just launched with the goal of connecting people to ethical, stylish clothing options, Eco-Stylist is looking to bring personalization to their marketplace and find ways to add value to their customers’ experience."

01. Problem

The users needed the following issues addressed:

02. Research

I researched the current state of the Eco-Stylist website and came to the conclusion that Eco-Stylist is a men's clothing discovery platform that recommends sustainable and ethical clothing brands.

I also needed to hear directly from the users to gather information about how they discover new brands and their current experience using Eco-Stylist.

Screener Survey

/Research

Potential interviewees were screened with a survey to make sure they fit the target user:

Interviews

/Research

Interviews were conducted to find answers to the following questions:

Affinity Map Key Insights

/Research

  1. Users assumed Eco-Stylist was an e-commerce platform
  2. Users mainly discover brands through social media and recommendations from friends and family
  3. Users are worried about loosing their individuality when working with a stylist

Proto-persona

/Research

This placeholder persona was created through talking to the users to help my team stay aligned on exactly whose problems we were solving.

03. Initial Design

Original Homepage

/Initial Design

Users were generally confused about Eco-Stylist's purpose. They assumed that is was an e-commerce site, rather than a discovery platform.

I decided to focus on redesigning the homepage and here is why:

Here are other solutions I considered and why they were not pursued:

Paper Sketching

/Initial Design

04. Build

Initial Wireframes

/Build

05. Test

User Testing Round 1

/Test

Using Usertesting.com, I asked 3 users to complete the following tasks:

  1. Explore the homepage
  2. Discover how Eco-Stylist adds new brands to their site
  3. Find out how you would get stylist recommendations

Insights

/Test

Here is what I learned from the user tests:

  1. Users were still generally confused about Eco-Stylist's purpose, they expected the site to be an e-commerce platform.
  2. Users were confused by the site's information architecture and were unable to find information about how Eco-Stylist add brands to their site.
  3. Users were able to find the stylist information, but still struggled to see the value of working with a stylist.

06. Pivot

The prototype needed to leave no question on the user’s mind as to what they were supposed to do the moment they arrived on the landing page.

Solution

/Pivot

Tinder for fashion.

There are two apps with a similar idea: Mada and The Yes. Both apps provide features to curate clothes, but neither feature men’s clothing or eco-conscious brands.

Here is how the new solution addresses the problems identified in the fist user tests:

  1. The familiarity of a swiping feature would immediately engage users. The mood board and bookmarks that come from engaging with the swiping features demonstrates the purpose is to give recommendations, not sell directly on the site.
  2. Simplifying the site's information architecture to create clear hierarchy will make the site's navigation more intuitive.
  3. Introducing users to the idea of receiving clothing recommendations through the swiping feature would introduce them the value of hiring a stylist.

07. Design

Final Sketches

/Design

08. Build

A/B Testing

/Build

Information Architecture

/Build

The information architecture of the site was reduced from about 24 to 11 main pages. (See Appendix)

09. Test

User Testing Round 2

/Test

In this round of testing, I asked the users to:

  1. Interact with the swiping feature on the homepage
  2. Discover how Eco-Stylist adds new brands to their site
  3. Explore how you would work with a stylist

Insights

/Test

Here is what I learned from the user tests:

  1. Users were no longer confused about the purpose of Eco-Stylist. They recognized that Eco-Stylist's purpose was to provide recommendations because items could be bookmarked. A design affordance that represents saving, not buying.
  2. Users found Eco-Stylist's resources quicker with the new navigation.
  3. Users were more interested in exploring the rest of Eco-Stylist's services because of the immediate engagement they experience with the swiping feature.

Most importantly, the adoption of the swiping feature from a different industry meant users did not have to learn a new skill or system to get the most out of Eco-Stylist.

10. Deploy

User Flow Demonstrations

/Deploy

For full demo, see appendix.

Click to view more ↴

11. Next Steps

  1. Add a “go back” feature to provide reversing abilities in the swipe feature.
  2. Develop a mobile version because more and more men are shopping on their phones.

12. Appendix

Old Information Architecture

/Appendix

New Information Architecture

/Appendix

Full Prototype Demo

/Appendix

*Back to top