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.

  1. 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.

  1. 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

  1. Clarify the organization’s purpose upon first impression to promote interest, trust, and clarity

  2. Restructure the bits of navigation that were confusing to users and add more prominent calls to action

  3. 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.

  1. Add breadcrumbs to help users know where they are within the site

  2. Refine the donation page. We provided a high fidelity mock up but were unable to make changes to this page due to account ownership.

  3. 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.