Mengmeng Yao | Digital Designer
An E-commerce website redesign for a smooth shopping experience
Project Context
Eco-stylist strives to be the ultimate resource that offering a comprehensive guide for individuals seeking ethically crafted and fashionable clothing, with the overarching goal of enhancing awareness about sustainability. Unfortunately, the current website is highly impractical and poses significant challenges for users attempting to access information. With a thorough redesign of the information archetecture, I substantially improved the website's usability and established a clear roadmap for the business's future development.
Timeframe
2 weeks
My Role
Solo UX/UI designer, consultant
Skills
Comparative/competitive research, wireframe, usability testing, UI and branding design
Impact Measurement Highlight
Define the Problem
About Eco-Stylist
Eco-stylist is an organization that aims at provide people with a go-to guide for finding ethically made, stylish clothing. Using their own sustainable criteria, Eco-Stylist vets brands for consumers by researching their transparency, labor practices, and the sustainability of their products and practices, and publishes the brands’ rating and products on their website to make the the process of buying sustainable clothing as simple as possible.
View the current website HERE
Heuristic Analyse
I went through multiple heuristic evaluation on this website with the LEMERS principles in mind and find many usability issues on the site. Here are some of them that I found to be very severe.
Treejack Testing
To better assess the website’s navigation system, I built the sitemap and did a tree jack testing with 17 people. The tasks for this test are developed on the 5 primary interactions the users may have with the website.
Task-01
Find where you can buy a dress for your mom
Task-02
Find the sustainable rating of the woman's footwear brand called "Panafrica".
Task-03
Find the rating criteria information on the website.
Task-04
Find the rating criteria information on the website.
Task-05
Find the supporting information for starting your own sustainable fashion brand.
86.7%
of the participants
find the navigation system difficult to use
Comparative/Competitive Analysis
However, I found great opportunities in my comparative/competitive analysis. At first I was confused who should I compare ecostylist with. It doesn’t looks like a E-commerce business since I have never seen an e-commerce website that strives to drive users away. All E-commerce business I know they work very hard to attract users to their platform. The function of brand rating and certification makes it looks like a NGO website, but I see few NGO websites that has the prospect of a e-commerce platform like ecostylist. What’s more, ecostylist also shows an early form of 2B business in their brand resources content, which is not common in neither NGO websites nor e-commerce platforms.
Eco-stylist v.s. E-commerce
Eco-stylist v.s. NGOs
Missing account management, no checkout function
Missing campaigns, activities, no donation pages
The Future of 
Eco-Stylist
What if we can make Eco-stylist a one-stop shop like Nordstrom for all sustainable fashion products but also set benchmark in fashion industry and provide consultant services to fashion businesses that guide them to be more sustainable.
One-stop shop for sustainable fashion products
E-commerce platform
Set benchmark and standard for sustainable fashion brands
Brand rating system
2B consultant service to
fashion brands
Brand resources
Design Goals
Solution and Validation
01
A Complete and Smooth
E-commerce Service
Initially, it is imperative to ensure that Eco-stylist incorporates essential e-commerce functionalities such as a shopping cart, payment processing, and account management. Additionally, the Eco-stylist should adhere to established e-commerce best practices, encompassing features like multiple calls-to-action (CTAs), accessible search bars, and user-friendly filters.
02
Navigation Redesign
The original brand list page has categories and products listed together. Using menu bar, category list page, product list page,I create 3 layers of information structure to help users better locate the information they need.
I also redesigned the top horizontal menu for the website to include 1/. more Information layers into the Ethical Brands section and Shop section, 2/. Direct CTAs for some common tasks and promoted contents. For example, in the Ethical Brand menu tab, users who want to check the rating standard don’t need to click into any sub page to get there because the button is already in the tab. Users who want to check a specific brand’s sustainability can directly use the search bar on the tab to search for the brand.
Just like the shop categories, I created more layers in the information architecture for the rated brand list by adding a category page for these brands instead of directly dumping all brands in one page. Instead of a folded section on the brand listing page, I place the filters just on the side and search bar on top for better accessibility, which will better assist in helping users navigate to the contents they need.
03
Improved Layout for Other Pages
Eco-stylist currently doesn’t have a lot of content on their brand resources page, I create this layout based on a future vision developed on their potentials. Also I redesigned the wireframe for their blog listing page, in which I rearranged the categories on top for a better accessibility.
04
Usability Test
I conducted 7 usability testing to test the e-commerce flow and redesigned navigation system. The 7 participants didn’t take the former Treejack testing, and they were tested with the exact same tasks I used for tree jack testing.
The usability test reveals that 100% of the participants indicate the redesigned navigation system is intuitive to use and easy to navigate through. Compared with the treejack testing, the success rate of all the 5 tasks are improved significantlly.
Brand Identity and Visual Design
To briefly touch the solution for branding, I put together a concept design for 3 ecostylist’s webpages. I use similar layout and the green branding color to connect them together, I used some curved shape (in buttons) and nature elements to make it looks more organic. I chose a serif font for the headlines to brings out an elegant feeling. By implementing the same color, font, and graphic element to the website, social media, and even some printing materials will help a lot in establish the brand identity of eco-stylist and raise the public’s awareness of the brand.
