A UX Case Study | Eco-Stylist Website Redesign — Design Like You Give a Damn
Eco-friendly brands have been on the rise in the past few years all with the goal to make the world a better place. The top-ranked clothing brands focus on sourcing sustainable recycled or organic materials, fair labor practices enforced by manufacturers, and transparency of this information to the public. Eco-Stylist steps in to bring all of these impactful brands to be available on a single website. Eco-Stylist takes it a step further by creating its own rating system to rank these eco-friendly brands by its thorough criteria with the goal to educate its target audience while making eco-friendly shopping easy.
Introduction:
My three-person design team had been tasked with the below prompts.
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.
- Customers want to share their preferences and style so that they can receive personalized style and product recommendations
- Volunteers can add recommendations so that they can help showcase featured products
- Customers want to look through curated content so that they can discover new products
- Customers want numerous ways to sort through a catalog so that they can find a specific item
Role in Project:
Project Lead — Created a timeline and served as the main point of contact to the research lead and interaction lead via Zoom and Slack.
Timeline:
Tools Used:
- Design Process — Define, Discover, Develop, Deliver
- Miro
- Zoom for User Interviews and Usability Testing
- Axure RP
DISCOVER
With an existing website from Eco-Stylist.com, my team dove in to see how it operated. We wanted to look and feel the message or call-to-action the website asked of us as users. So we conducted a heuristics evaluation and usability test.
After our evaluation, we uncovered a few major pain points.
- Lack of inclusivity. “Shop Mens” located on the navigation bar implies there might be a “Shop Womens”. There is not.
- Lacking ease of access to clear information on their rating system and defining the problem why we should “give a damn”.
- Lack of profile creation. Unable to cater to user’s style personalization or collect data of user’s likes to curate a catalog.
- Lack of review collection by its users. We felt the best way to build trust is within a community that can share information and provides unbiased reviews.
Survey Screener & User Interviews
We knew we wanted to conduct interviews with whom we considered the possible target audience for Eco-Stylist. In the screener, we asked multiple-choice questions about clothing brand preferences, preferred shopping methods, awareness of sustainable and ethical practices in the clothing industry, and the level of importance of features when making a purchasing decision such as quality, texture, fit, feel, price, etc. Below is what we found from the surveys and interviews:
Competitive Analysis
Our research lead conducted a competitive analysis. We searched for other companies that catered to a similar audience to Eco-Stylist. Due to time constraints, we compared Eco-Stylist to Frank and Oak and wearwell.
DEFINE
With our interviews completed, we proceeded to synthesize the information to define our problem statement. We started with affinity mapping.
By grouping reoccurring themes in user pain points, we were able to uncover real problems that our users face. Several trends began to surface.
- Our users had little to no awareness of sustainability in the clothing industry. It's a topic they have heard about but not something they researched heavily. Many expressed that if this information was more easily available, it would be an influential purchasing factor.
- One of the biggest pain points was a lack of confidence in size/fit when purchasing clothing online. Many felt the need to buy 2 different sizes to save time. This painfully adds additional steps to the buying process. The user has to return the unwanted size which is paid return-shipping by the manufacturer.
- Due to COVID-19, many shoppers feel obligated to shop online. With online shopping, our users appreciated it when visuals of the article of clothing were displayed from many angles and on models with varying body-types. If the user could better see the texture of the clothing, the easier they could imagine what it would be like to wear it.
- Considered the most sustainable option for shopping for clothing is buying recycled or used. It is 100% sustainable and possibly the most affordable way for users to help by breathing new life into old clothes.
From our interviews and affinity map, we created a persona.
With our persona, Austin, and major quotes in mind, we were able to identify our problem statement.
Problem Statement:
Consumers need a way to easily
educate themselves about responsibly
sourced clothing and purchase this
clothing online with confidence.
DEVELOP
As a team, we briefly discussed some concepts on how we may solve this problem. Once we narrowed down what data should be collected during user profile creation, we were able to visualize our ideas by doing a design studio. After we specified how our redesigned website would work, we were able to create our storyboard.
For Eco-Stylist to provide personalization of clothing recommendations and best fit/size suggestions, the user needs to be able to input that information like measurements and style preferences to be stored on their personal profile. Another way to build on the benefits of profile creation is an ability to review size/fit based on each user’s measurements. This would allow for a unique way for users to sort reviews based on other users with similar body-types.
Once we hashed out our revisions on paper, we finalized our user flow and site map.
User Flow
Site Map
Prototype
Our interaction lead took charge in Axure to build the foundation for our redesign website for Eco-Stylist. Below is our landing page redesign. The navigation bar shows inclusivity with the inclusion of women. There are two distinct groupings for categories. Women, Men, Worn Wear, and Sale are grouped to indicate shopping. Our Story and Blog is clearly indicated in green font and contains information about Eco-Stylist. In the center of the page, we have our hero’s section with two call-to-action buttons. The button on the left is for ease of access to information about Eco-Stylist’s mission and core values. The button to the right is to quickly shop our Eco-Stylist selected brands.
The next major feature we implemented is the onboarding for profile creation. As a team, we determined that a user’s measurements, body-type, fit preference, and style were valuable data that needed to be collected for our perfect fit/size system to work. We take a user’s inputted data to make size suggestions based on a brand’s sizing chart and our own customer reviews. The user no longer has to decipher those pesky sizing charts when shopping for unfamiliar brands. Our website redesign is programmed to do that for you.
To show how this works, we have an item for sale that the user is interested in. It is an Oxford cotton A-line Shirtdress. To the right of the dress image, the user will be able to view the same dress on different models with different body-types. With the user logged in, she can click on “Recommended Best Fit” to find out what size will fit her best based on her preferences.
To provide users with a curated selection of clothing personalized to their style, we added a heart icon on the bottom left corner of the dress image. When a user ‘likes’ an item, it is inputted as data for the website to find similar items to make suggestions. It can even be used to notify users when that item goes on sale. After a purchase is made, the user can leave a review about the item which will also display her body-type and measurements for others with similar body-types to use that information.
With the first iteration of our medium-fidelity prototype complete, we conducted a usability test with 5 participants.
Below are the following revisions we made:
DELIVER
Conclusion
By implementing the features for data collection in a user’s profile, Eco-Stylist will see a community of users build rapport with the brand but most importantly with one another. Education is readily available on why users should “give a damn” and confidence is established for users to buy knowing clothing from brands they have never tried on before will fit.
