​COMMITTOGREEN.COM RE-DESIGN OF EXISTING ENVIRONMENTAL WEBSITE

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.

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.

MY ROLEThe 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

evaluation

Since this was an existing site, we started our process with its heuristic evaluation and user testing. We streamlined the testing process by devising 5 concrete tasks in order to see if they are possible and easy to accomplish. We asked our users to to the following:

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.

Most users were either not able to complete the task or took a very long time to do so, which informed us that the site required major re-design. Heuristic evaluation of the site showed that the original website had most of the needed information, however it was not organized in the user-friendly manner.

research

After realizing that the site needed major do-over, we started on our research. We needed to find out if people compost or not, why they do or don't, and what are the pain points in the process. Overwhelmingly the data showed that people would compost if the process was made easy. We used online surveys, interviews and affinity mapping to gather and process information.

We researched competitive marketplace 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 these concepts.

ideating

At this point we needed to come up with ideas on site's improvement. Looking at the problem from the user's point of view, we summarized process' pain points into the following problem statement:

​"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."

While the original CommitToGreen site had most of the valuable information, it was not easily accessible to the users. We re-organized data to be easily discoverable. 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. ​

INITIAL MAIN NAV IDEA

ABOUTGET INFORMEDGET INSPIREDCOMPOSTING LOCATIONS​SHOP

This idea did not test well with users, they were confused by what 'get inspired' or 'get informed' meant.

NEXT IDEA

ABOUTLEARNTAKE PARTBUY BAGS​

​

This one was much clearer

FINAL MAIN NAV SOLUTION

BUY BAGSWHERE TO COMPOST ABOUTTAKE PART​LEARN

In this final one, we put "BUY BAGS" first as a primary call to action and added "WHERE TO COMPOST" to the main menu since it's a very important action and should be explicit.

This is the final site map witch reflect our site information architecture.

iterative design process

Along with re-designing the navigation of the site we went through the process of re-designing its pages.

The main page gradually went from depicting hard to understand image and very general statement to demonstrating an actual well designed product and conveying the main idea.

BEFORE

AFTER

The other pages fell into two categories: e-commerce and informational. Since the site was not meant to be 'discoverable' but informative, we decided to give the informational pages a simple clean looking and easily expandable template. That way the user can easily modify and expand new content.

BEFORE

AFTER

user testing

As we iterated on our design ideas, we continuously user-tested them. ​Testing was set up in the following fashion: each user was asked to complete4 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. ​We are proud to say that we achieved the 100% task completion from our users.

Below is a comparison chart between the original site and our final prototype.

Each test was either audio or video recorded, and the completion of each task was recorded. Below is a sample video of user testing session:

We presented the client with detailed report of out research findings, user testing results, including videos of people going through tasks, site map, user flows for each task, annotated wireframes and working prototype.

Here is what the client had to say:

Thanks again you guys, I love how everything is making sense now!

conclusion

Our client had multiple goals of selling the product, engaging community, providing information, and educating about composting. We identified primary tasks and conveyed to the client that the design should reflect task prioritization. Selling the product as the main task would solve for our client's other problems by bringing revenue. We analyzed the pain points and addressed them, making new site easy to use. We made sure that every pain point was removed by validating through continuous user testing.

Even though there are no technical challenges with the site, we put together a very detailed package with site map, user flows and annotated wireframes to take the guesswork out of the process for the engineers. In addition to that we provided our client with 'next step' ideas, such as adding 'my account' feature, 'blog feature, promoting composting through featuring participating businesses, making site responsive, expanding presence from local to national.