Eco.Logic Website Redesign
Eco.Logic is an amazing environmental action organization that inspires engagement through creative and education initiatives. Unfortunately, before my team redesigned their website users weren’t sure what Eco.Logic’s mission was or how to get involved.
In our audit, we discovered that we needed to tell the organization’s story and provide clear calls to action by restructuring the layout and navigation. Our redesign showcases a mature and inspiring climate action organization. As a result we increased user satisfaction by 72%.
Our design team was dynamic. We each contributed to developing our test plan and SOW, sketching, wireframing, and building our site pages within Squarespace. While we each had assigned roles we all contributed to every part of the project. I led the research:
Selected research methods and planned the timeline
Delegated tasks, conducted research, and synthesized the data
Presented research findings to our client, Eco.Logic
Team and Role
Problem Identification Research
The Need For a More Established Story
During the research process, we discovered that we needed to make Eco.Logic’s goals, mission, and story more clear. Today the organization is still shaping their identity by figuring out their niche programming and target audience. As a result, the original site showcased a variety of offerings but lacked a unified message.
The organization is experimenting with programming to learn what engages users. One board member noted,
“We’re trying out different programs and seeing what sticks“
2. Their users are “everyone” because part of their mission is that everyone should be engaged. The founder shared,
“Everyone has a part to play in the environmental movement. There’s something for everyone”
3. Users had an unclear understanding of the organization
During usability testing the majority of users could not correctly identify the organization’s overall mission
Many users thought the organization was for environmental art. The first image and text shown below were part of a rotation one the homepage. However, because the text and image were what users saw first they assumed it was the organization’s main focus.
“I assume it’s about environmental art but I’m not really sure what the organization is about.”
Users Had Trouble Finding What They Wanted
The main goal of Eco.Logic is to inspire individuals to take action. The organization has tons of thoughtful offerings from education and art initiatives to opportunities to donate. Therefore, during research we wanted to learn how easy it was for users to find ways to get involved.
We found that users had a hard time locating the “Act” button within the global navigation
2. Pages were hidden in different parts of the site. When users did find listings for ways to get involved they weren’t always sure what to do next or found that the initiatives no longer occurred. One user said,
“I see that there are ways to take action but I’m not sure what to do now that I’m here.”
3. Users wanted more information about where their money was going before donating. They hadn’t built enough trust navigating the rest of the site and missed the information stated on Eco.Logic’s original site due to competing visuals.
“I don’t know. I just don’t see why. They just ask you to donate. I don’t want to donate money without more information.“
Redesign Goals Based on Research Findings
Clarify the organization’s purpose upon first impression to promote interest, trust, and clarity
Restructure the bits of navigation that were confusing to users and add more prominent calls to action
Honor the spirit of the organization by promoting the content that users connected with on the original site
Researching a Solution
Card Sorting for Global Navigation Insights
Our goal was to make the navigation more intuitive by reducing user cognitive load. We increased usability by reducing the number of options in the global navigation, featuring important items, and following user preferences.
Eco.Logic had 33 items in their original global navigation. We asked users to sort the items into categories so we could see how they organically grouped them in an open card sort activity. We took the results and came up with 3 final categories based on their groupings: Take Action, Our Work, About Us
We validated those results with a closed cart sort. Users were given the three categories and asked to group the 33 items under the categories.
Results Analysis
Data confirmed the categories were intuitive and predictable
We were surprised that 50% of users group Art Initiatives under Our Work
We made the decision to group Art Initiatives under Take Action due to the nature of the content and to keep it consistent with Education Initiatives
We walked away with the final navigation terms of
Take action
Our Work
About
Our final global navigation included our research-based terms, a logo that emphasized the brand name, and a more prominent donation button.
Homepage Layout Comparative Analysis
We studied the features that similar organizations had on their sites with a focus on structure and layout. This helped us prioritize where and how to place Eco.Logic’s language to provide a clear first impression of the organization.
We selected an excerpt from the mission statement and placed it prominently on the homepage (based on comparative analysis research) in order to give users a more clear first impression of Eco.Logic
We emphasized things like the organization’s name and donate button by increasing size and adding eye catching color
A Programs Page with Clear Calls to Action
Originally the site had several locations for programs. Users found them in the global navigation, under Act, and under the About section under Initiatives.
Users didn’t know that they could click on the photos on the original Programs page
Many users expressed frustration and were unable to find the information they needed to engage with the initiatives
We added buttons for users to learn more
Every design decision was made with our goal in mind to restructure Eco.Logic’s website navigation to provide more concise clarity to users about who the organization is and how potential activists can engage in initiatives and programming.
Our goal was to restructure Eco.Logic’s website navigation to provide more clarity to users about the organization and how potential activists can engage in initiatives. And incorporate Eco.Logic’s goals. Usability tests on the new design revealed 72% growth in user satisfaction and navigation success.
Users immediately identified the organization's mission and purpose.
Users found opportunities for action and engagement with ease in the new design
Users learned about donations and sponsorships in the new design
“They are getting people involved in environmental action and they're trying to do it through many different ways...like through education and the arts.”
Users located ways to get involved immediately without click errors and without expressing frustration.
Every user except one felt that they had enough information to move forward with the giving process confidently.
Testing Our Design - Usability Research Results
Research Based Revisions to Our Design
Scroll View Adjustment
Some users didn’t realize the page scrolled.
We adjusted the spacing between the introduction banner and content of each page to help users understand they could scroll by revealing words from the next section.
Header Reorganization
Some users said that they were drawn into the pictures rather than the information about the programs.
We reorganized our program cards to emphasize the title rather than the image for ease of understanding.
Final Design
Our team implemented the final designs in Squarespace. You can view a sampling of designs below or visit Eco.Logic. This case study is a sampling of the work and not an exhaustive description of our design approach. For more detailed information about the project please get in touch at catimburgia@gmail.com.
Home Page
Arts Initiatives
About
Next Steps
While we would have loved to do more we were limited by time constraints and the functionality within Squarespace without a coder. We recommend the following next steps.
Add breadcrumbs to help users know where they are within the site
Refine the donation page. We provided a high fidelity mock up but were unable to make changes to this page due to account ownership.
Continue to test the website
Reflections
Working with Eco.Logic on their website was a dream project. We made measurable design improvements for an organization committed to improving environmental action.
Our team wasn’t always on the same page about designs because we didn’t sketch and share first.
We skipped the best practice of sketching and sharing out with the team for each page design. Because we had the style guide and discussed our ideas we thought we were had the same idea.
We ended up needing to spend extra time in Squarespace to correct and align or designs which took more time.
Sketching and sharing frequently is key to making sure a team stays on the same page and works efficiently in the long run. I wished that we had done it differently by sketching on paper or brainstorming wireframes in Figma first.