CONCEPT PROJECT
Eco-Stylist
E-commerce Website Redesign
WHO?
Eco-Stylist.com — a website that helps educate users on sustainable fashion, find eco-friendly brands, and use the services of a professional stylist.
WHAT?
Evaluate Eco-Stylist.com, make research-backed suggestions for improving usability, and deliver a mid-fidelity prototype.
WHEN?
Two-week engagement with a due date by 09/29/2021
MY ROLE: UX Designer, Researcher
TEAM SIZE: Solo
TOOLS: Figma, FigJam, Otter.ai, Google Slides
PROJECT STAGES
I followed four stages of a Double Diamond design model for this project:
Discovery – Definition – Development – Delivery.
I mapped out my research strategy and came up with a list of research methods I aimed to utilize with each step of the process.
DISCOVERY
Heuristic Evaluation
Competitive Analysis
Usability Testing
DEFINITION
User Persona
User Journey Map
Problem Statement
DEVELOPMENT
Open and Closed Card Sort
DELIVERY
Usability Testing
STEP 1: DISCOVERY
Time management is critical, especially when working solo. Therefore, while recruiting participants for usability testing, I wanted to jump-start my research with Heuristic Evaluation and Competitive Analysis since those methods do not require outside assistance.
Heuristic Evaluation
Through Heuristic Evaluation, I wanted to discover and identify usability problems and how they might impact user experience.
I've utilized LEMErS framework to check Eco-Stylist.com against these Heuristics: Learnability, Efficiency, Memorability, Error Management, and Satisfaction.
Findings
The unconventional language used for UI elements (e.g., CTA "Give a Damn") decreases learnability
Missing elements that are essential for an e-commerce site (e.g., filtering by size, saving items for later, leaving product reviews) impact efficiency and satisfaction
The unclear process of booking an appointment with a stylist decreases efficiency and leaves users dissatisfied
Competitive Analysis
With Competitive Analysis, I wanted to understand what features are commonly used in e-commerce websites and what (if any) features are missing from Eco-Stylist that might affect user experience.
I compared the features of Eco-Stylist.com to 3 other sites of a similar nature: Wearwell, StichFix, and Harebell. The common theme of all of them was sustainability, eco-friendly clothing, and personal styling services.
Competitive analysis showed what common features were missing from Eco-Stylist.com
Findings
Can’t make a direct purchase
Can’t filter by size
Can’t save an item for later
Can’t leave an item review
No Shopping Cart
No Login
Being an online shopper myself, I can attest that features missing from Eco-Stylist are standard and expected. They play an essential part in the overall shopping experience.
But that's my personal opinion. What did other users think? It was time for some usability testing.
Usability Testing
I recruited three participants and asked them to complete six tasks designed around three major topics: learning more about sustainability, completing a purchase of an item, and booking a professional stylist.
Eco-Stylist test plan
Findings
Users wanted more clarity on the mission and offerings of Eco-Stylist
Users were overwhelmed with the amount of information on the Homepage
Users were disappointed by the inability to make a direct purchase
Users were frustrated with the inventory discrepancy between Eco-Stylist and a third party site
Users were confused with the overall navigation of the site, finding it cumbersome
STEP 2: DEFINITION
In this step, I synthesized data collected through primary and secondary research.
User Persona
Eco-Stylist has a lot to offer: from educational articles on sustainability and brand rating to apparel shopping and personal stylist services.
Based on that information, I've identified two potential types of Users: “Suave” Shane (primary proto-persona) and “Green” Emily (secondary proto-persona).
Primary proto–persona “Suave” Shane
Secondary proto-persona “Green” Emily
Having proto–personas helped me keep users' goals and needs in mind and create a better solution that overcomes their challenges.
User Journey Map
The usability testing uncovered some friction points in the process of making a purchase through the website. Shane's Journey Map illustrates that very well.
Shane’s Journey Map shows steps of a process that could be improved
The map indicates what part of a user's journey is dissatisfying or frustrating and needs optimization. In this case, it is:
limited assortment
missing filters that are standard for the e-commerce industry (color and size)
inability to add an item to the cart
being redirected to a third-party site to learn that the item is no longer available
As a result, Shane's overall experience is negative.
She spent time on the website but could not accomplish her goal of purchasing a sweater.
Problem Statement
Users need a clearer and more intuitive way of navigating Eco-Stylist.com
so they can easily achieve their goals
By redesigning the navigation and information architecture of Eco-Stylist.com, the usability of the site and the overall satisfaction of its users can be significantly improved.
STEP 3: DEVELOPMENT
The goal of this project was not to design the site from scratch but rather to optimize its existing state.
Open and Closed Card Sort
I've conducted three open and one closed card sorts. This research method helped me propose a new site structure that was in line with user expectations.
Sitemap of Eco-Stylist: before
Sitemap of Eco-Stylist: after
Based on the card sort findings, I made the following changes to the sitemap:
"About Us" — was shortened to 3 components. The "our team" tab was divided into "who we are" and "what we do" where users can learn about the mission of the company as well as the system behind sustainable brands' ratings
The "transparency" tab was removed since users did not understand what it meant
The "sustainability" tab was added to the global navigation. This helps users easily get information about eco-friendly fashion and ways of sustainable living
The "our partners" tab now provides information on all sustainable brands that are listed on the site
The "shop" tab had the following modifications: "sales" tab was relocated under "men" and "women"; "unisex" tab was removed; "shopping guide" and "gift card" were added
The "styling" tab was renamed to "book a stylist" to clarify the possible action
STEP 4: DELIVERY
Below are examples of mid-fidelity wireframes of re-designed and optimized pages of Eco-Stylist.
Re-designed Homepage is informative, functional, yet clear and intuitive
Re-designed Product Listing Page: added filters reduce search results and optimize shopping experience
Re-designed Product Details Page: added product video and customers reviews brings easy to purchasing decision
Re-designed page for choosing a stylist: users can learn more about each stylist and see samples of their work
NEXT STEPS & SUGGESTIONS
Due to time constraints, I couldn't perform a usability test on a mid-fidelity prototype. So as a next step, I would do that first.
Also, here are a few suggestions for Eco-Stylsy.com:
Clarify the audience for the site and services
Prioritizing the store, the styling feature or the sustainability information
Add information to provide transparency around brand ratings and sustainability certification