Eco.Logic is a new environmental non-profit that aims to grow its community and take on larger initiatives. To support their endeavors we redesigned their website, which involved implementing a new site architecture, visual hierarchy, and crafting a compelling story.
Potential environmental activists currently have trouble understanding Eco.Logic’s mission and climate engagement opportunities because the navigation design makes it difficult to understand. How might we make Eco.logic's website easier for users to navigate while meeting the goals of the stakeholders?
.png)
We took the 33 items from the old site navigation and put them through both an open card sort, closed card sort, and tree jack test.
The results of these sorts led to the emergence of 3 to 4 different main categories.
These insights gave us a starting point for our new design
To access information on events and programs, users had to click through multiple menus and pages to reach their goal
Without a unifying message, the mission and goals of the organization are difficult to understand leading to confusion
Without clear organization the homepage content becomes overwhelming and discourages users from wanting to know more
.png)
In order to move forward as an organization, Eco.Logic needs to showcase the impact of its current and past achievements
Many users were unsure of what their money would be contributing to if they were to sponsor Eco.Logic, and thus unwilling to do so
Accessing information on upcoming events and participation opportunities is essential to acquiring new members
.png)
.png)
.png)
Addressing the issue of too many clicks and navigation difficulties within user testing, we conducted an open and closed card sort with 33 items that led to 3 major categories.
After completing the card sort, we had the foundation for a new site map. Each category has a clear label or call to action, and each program can be found under a corresponding category.
This allows users to find the programs and initiatives they are interested in, without having to waste time or become frustrated.
While there was an abundance of engaging and informative content within the site, it was difficult to access because of hard to read text or text heavy layouts.
By implementing consistent visual hierarchy across the site, information becomes much easier to access, and Eco.Logic's events and achievements can be show cased more effectively.
While Eco.Logic's mission was found on their home page in their previous design, many users did not go past the hero section due to the auto rotating carousel. To solve this problem, Eco.Logic's mission is now the first thing potential climate activists see when they land on the home page.
Additional contextual copy was added around the site, and specifically in the donation and sponsorship section, to give visitors a chance to understand Eco.Logic's purpose and what they hope to achieve with donated funds.
.png)
We tested the usability of Eco.Logic's website before and after the redesign. Users were asked to navigate to specific areas of the website such as events, identify the purpose of the organization, and to state whether or not they would feel comfortable donating to or sponsoring the organization with the provided information.
.png)
The impact of the redesign was a clear success, as users in the second round of testing were all each able to identify the mission of Eco.Logic, could navigate to specific areas with ease, and felt there was enough contextual information to support potentially sponsoring or donating to Eco.Logic.
Through conducting interviews & usability tests we were to identify and highlight the most important information, ensuring that key messages and calls-to-action are prominent and easily accessible. This allowed me to learn how to create a streamlined website structure, reduce clutter, and eliminate unnecessary complexity.
