Graphic Design, UI/UX Design & Wordpress development
Established in 2017, EDA believes that sustainable management can help with the rapid depletion of natural resources as one of the tools to deal with an ecological crisis. The company pushes that idea into the public by providing services like research and training to help people get involved in economic democracy and support it. Ester Digital worked on the website design and development and introduced a distinct brand identity for the organization to deliver that message impeccably.
The company’s website was clunky, unstructured, and was not reflecting the EDA’s wholesome idea. And our first task was to arrange all the data provided by the client into logical sections to ensure a clear information architecture for a better user experience.
With the project starting in February, we kept the process highly collaborative – the client provided an RFP that outlined their expectations. Based on that with several discovery calls and discussions, the design team created a roadmap with milestones and deadlines.
Since the website was dull, confusing, and failed to indicate the company’s essence, we needed to make the design brighter, memorable, and colorful to show how assertive and passionate EDA is.
Branding was not an initial request, but as the organization’s capabilities and activities have grown, it became vital to introduce a distinct brand identity. For that reason, we needed to update their color palette and graphics.
As for the development, we needed a flexible solution to house loads of content and integrations presented on the website. And our development team used PHP and employed an efficient combination of tools, such as WordPress + Elementor + Gravity Forms. We also eliminated the website’s integrations from external sources, removing unnecessary third-party links, linking them to a website’s infrastructure.
Thus, the Ester team provided a complete scope of work to this project, including design, development, and branding.
“Our current website has outlived its purpose. The organization has grown, our projects have evolved and expanded, and we have more to offer the public.”
– The EDA Team
When working on branding, we always look for something that can transmit the character of a company, showing its essence in a way that can immediately catch visitors’ attention. The EDA website needed a brand revamp, so we polished their logo and updated their color palette. Also, we chose brand typography that would accentuate the company’s messaging.
We haven’t created the logo from scratch but had to reassess its effectiveness. The lines in the logo have become clearer, unnecessary elements were excluded, and the shade of blue has become darker. That made the logo look more professional and exclusive.
The primary colors of the website were blue and coral. Both can be found in nature and evoke positive emotions while remaining neutral, calm, and reserved. A coral color is a fantastic option for creating accents equally well on dark and light backgrounds. Light green, light blue, and turquoise were chosen as additional accent colors, all of them also being somewhat nature-inspired.
Another excellent decision of the design team was to use color-coding on the website. Each color was aimed to showcase the organization’s activities and help to navigate and identify the sections.
We knew that the future website was going to be very content-heavy, so it was extremely important to plan out the solid groundwork for it. Ester’s UX team created a new sitemap and a set of wireframes for all pages.
The main page is the aorta of the website, producing the first impression and allowing users to learn about the areas of EDA activities and economic democracy in general. All key pages were placed in the header – while the footer contained direct links to all the pages and CTAs for donations and memberships and social media links. The website even featured an extensive glossary to help users to manage specific complex terminology.
Striving to strike a balance between exceptional visual and seamless user experience, we carefully arranged the content of the EDA’s website, creating a sitemap and responsive layouts, yet filling each page with impressive visuals.
With the content being the king of the platform, we did not utilize anything overpowering design-wise but focused on bringing a structure to the information body. We restructured the text into readable sections and subsections, each divided by an image, so the visitors could get the full disclosure on EDA and its activities without being overwhelmed.
Since the top of the page is the first thing visitors notice, we paid particular attention to the header and a hero image, adding topic-related animations and contrastive blue color. Everything from typography, icons, introductory video, and various visual accents served one purpose – bringing awareness to the EDA brand and passing their electrifying passion on to the users. As a final touch, our designers developed a system of delightful micro-interactions. And at the end of the project, all those elements turned into a detailed brand book.
We also improved the blog section, making it look more appealing and professional with structured content, filters, and easy navigation.
As EDA aims to provide users with a lot of helpful information in a convenient format at any time, creating EDA mobile layouts was crucial.
No matter how perfect the designed layouts and visuals are, the website can’t operate without a dedicated development team that sets the wheels in motion. As the project was extensive, Ester provided EDA with a service team working exclusively on the EDA website and meeting its requirements on technical issues and integrations.
EDA members can apply or renew their membership to participate in various elections and votes concerning EDA activities. At the start of the work, the client used an integration that did not allow for enough flexibility and led users to external platforms, which caused a lot of inconveniences. We implemented a special WordPress plugin that centralized this process.
The EDA website also accepts donations. We designed a separate donation page that is consistent with the overall look and integrated it with the payment system module to allow users to carry out the payment right on the website without addressing external platforms.
We also took care of all user actions that are now initiated solely on the EDA website. Previously, lots of activities like mailouts and data collection were carried out manually, thus not always correctly synchronized. By various integrations with such platforms as Little Green Light and Active Campaign, we brought every user action to a single point – the website.
Using Gravity Forms, our team managed to create loads of forms for various purposes from electing, surveying, donating, contacting anything you can think of. This plugin helped automate all business processes and flows and customize them to fit the overall style of the organization.
Besides general information, you can also find a table of bills on food, water, and energy in the US and sort them out by region or state. Our team integrated Billtrack 50 to help visitors see the details on the legislation of their bioregion.
Interactive Geographic Information System (GIS) maps are a QGIS powered tool that shows the carrying capacity (food, water, and energy resources) of the bioregion of choice. That also propels elected members to initiate a discussion or even a legislative action about sustainability with the local lawmakers.
Economic Democracy Advocates’ passion for sustainability and grassroots advocacy is now contagious – it’s impossible to leave their new website without being inspired to take action. Ester helped make the EDA website memorable, responsive, and highly functional. With lots of integrations, plugins, and features, it’s ready to educate and encourage people to become more self-reliant and active in ecology-related issues.