MY ROLE
The team consisted of 3 people. I was responsible for the following:
-
creating working prototype
-
heuristic evaluation of the original site
-
user testing of the original client's site
-
comparative feature analysis
-
building user flows
-
buiding site maps
-
creating annotated wireframes
-
conducting usability testing with other members of the team
Surveys and User Data Analysis
Research phase consisted of conducting user surveys, analyzing user data, conducting competitive analysis of the composing/recycling market place and comparative feature analysis of successful websites. User data from surveys was grouped and analyzed through affinity mapping. The questions were designed to see if peoples compost or not, why they do or don't, and what are the pain points in the process. Our data showed that people would do it if they had information on why it was important and if the process of composting was made easy.
Competitive/Comparative Analysis
We research the competitive market place to see who and how was in the business of selling compostable products. The main takeaway from it was that the space was not saturated, and our client's fast compostable well designed bags were quite unique.
For comparative feature analysis we looked at some of the most successful environmental websites and analyzed what make them work. The main takeaways were a very strong opening conveying the main idea, clear mission statement, explicit navigation, and easy to read page layout. Our client was presented with the samples demonstrating each of the concepts.
ITERATING
USABILITY TESTING
USER FLOWS
THE GOAL
CommitToGreen.com is a small company with huge ambition: to save the world through composting. On top of manufacturing and selling compostable bags, the company wants to became a portal for all-things-composting, i.e. the place where people can get informed and educated about composting and where people can get practical information on where, what and how to compost.
Our task was to improve the existing CommitToGreen website to provide for all those requirements.
RESEARCH: Surveys/Data Analysis/Site Audit/Comparative/Competitive Analysis/User Personas
We created a high fidelity prototype which demonstrates the intended functionality and look-and-feel of the new CommitToGreen site.
The prototype was built in Axure.
CLICK HERE TO SEE THE PROTOTYPE
USER FLOWS/SITE MAP/ANNOTATED WIREFRAMES
We created site map, user flows and annotated wireframes so that the user could give this to the engeneering teams.
SOLUTION
Site Audit
We started with heuristic evaluation and user testing of the existing site. To see if the site makes it possible for users to achieve the goals of what-how-where to compost and the actual process of buying compostable bags we asked our users to perform 5 basic operations:
* FIND OUT WHAT THIS SITE IS ABOUT
* FIND OUT WHAT COMPOSTING IS
* FIND COMPOSTING LOCATION NEAR YOU
* BUY 2 13 GALLON COMPOSTABLE TRASH LINERS
* BUY 100 COMMERCIAL LINERS WHOLESALE.
The fact that the tasks were either not accomplished or accomplished with difficulty informed us that it required major redesign.
Heuristic evaluation of the site showed that the original website had most of the needed information, however it was not organized in the user-freindly manner.
Building New Data Architecture
While the original CommitToGreen site had most of the valuable information, it was not easily accessible for the users. We re-organized data to be easily discoverable by the user. This process consisted of organizing content into pages and sub-pages and naming the pages in the most explicit way. This process took many iterations. This is our initial idea on setting up site’s structure with initial thoughts on navigation taxonomy.
Scenario/Storyboard
Searching for ideas always starts with looking at the problem from user's point of view. After research was done we could summarize users' pain points into the following problem statements: As an eco-friendly shopper, I want to purchase compostable bags so that I can use them for composting when I’m done using them. As a global citizen, I want to find out my options for composting so that I can be an active participant and make more eco-friendly decisions.
IDEATING
Armed with reseach results and initial ideas on how to architect the site we started sketching, wireframing, and testing with sketches and low fidelity prototype. Each iteraction was based on feedback from the users.
Taxonomy/Navigation Iterations
Deciding on correct taxonomy was a challenge. Here is how it evolved.
IDEA 1
ABOUT
GET INFORMED
GET INSPIRED
COMPOSTING LOCATIONS
SHOP
IDEA 2
ABOUT
GET INFORMED
GET INSPIRED
COMPOSTING LOCATIONS
GET PRODUCTS
IDEA 4 - FINAL
BUY BAGS
WHERE TO COMPOST
ABOUT
TAKE PART
LEARN
IDEA 3
ABOUT
LEARN
TAKE PART
BUY BAGS
Changed 'SHOP' to "GET PRODUCTS' for consistency
Put "BUY BAGS" first - primary call to action, added "WHERE TO COMPOST" to the main nav, it's that important.
Let go of the whole "GET ..." idea since it did not test well with the users,
Home Page and Learn Page Design Iterations
Watch the video below to see how the Home Page and the Learn Page progressed from the initial idea to the final statge through iterative processes. As mentione above, the navigation went through several iterations and layout ideas changed.
We were user testing throughout the project. Testing was set up in the following fashion: each user was asked to complete 4 to 5 tasks. Namely each user was supposed to find the list of compostable products, find out what composting is, find a nearest composting location and buy a compostable bag. Each test was either audio or video recorded, and the completion of each task was recorded. Each iteration and final prototype were tested. Below is a comparison chart between the original site and our final prototype.
We are proud to say that we achieved the 100% task completion from our users.
Please, watch a sample of one of our usability tests videos.
THE SOLUTION
We created a high fidelity prototype which demonstrates the intended functionality and look-and-feel of the new CommitToGreen site.
The prototype was built in Axure.
