Solaraid

As a Product Designer and Front End Developer at Fat Beehive, I was tasked with modernizing SolarAid’s outdated website to reflect their innovative social enterprise model. The challenge was to create a fresh, bold design that would appeal to both their traditional supporters and a new audience of “Early Adopters” – younger, tech-savvy individuals who are globally engaged and solutions-oriented.

Brand Evolution

One of the main frustrations SolarAid faced was their restrictive color palette of orange and yellow, which they felt wasn’t bold enough for their work. To address this I worked with the Creative Director on a brand refresh for SolarAid. We introduced a vibrant fuchsia and emphasized the contrast between black and yellow, symbolizing light overcoming darkness. We also refreshed their typography, pairing Graph FF Condensed for headlines with Klima for body text, both created by Matthew Hinders-Anderson and available free for charities.

Innovative Design Process

To differentiate SolarAid’s website from typical charity sites, we conducted a series of ideation sprints. These sessions helped us generate and iterate ideas quickly, focusing on three main challenges: creating a “wow” moment for users, showcasing the impact of solar light, and enhancing SolarAid’s campaign capabilities.

Key Features and Solutions

The ideation process led to several innovative solutions. First, I designed and built a unique interactive photo filter using vanilla JavaScript. This filter allows users to experience the transformative power of light by revealing hidden images with a cursor-controlled light source, simulating the use of a solar light.

To demonstrate impact, we developed a narrative-driven “impact calculator”. This tool allows users to input a donation amount and see its direct effects, presented in a engaging, story-like format. The numbers update in real-time as users adjust their donation, creating a dynamic and personalized experience.

Lastly, to support SolarAid’s growth strategy, I designed a flexible “campaign pagebuilder”. This tool enables SolarAid to create customized campaign pages by combining and ordering various components. These pages feature scroll-triggered animations that reveal the campaign narrative as users explore, culminating in a call-to-action showcasing the unique photo filter.

Outcome and Impact

The redesigned website successfully sets SolarAid apart from other charities in their sector. It presents a bold new vision for what a charity website can be, pushing boundaries in both aesthetics and functionality. The flexible campaign tools give SolarAid the ability to create targeted, impactful campaigns, whether integrated into their site or used as standalone pages for email marketing.

This project demonstrates the power of user-centered design in transforming a charity’s digital presence. By focusing on the needs and preferences of both existing and potential supporters, we created a website that not only looks modern and engaging but also effectively communicates SolarAid’s mission and impact. The result is a digital platform that enhances SolarAid’s ability to connect with donors, showcase their work, and ultimately, further their important mission of providing solar energy solutions to those in need. We were also nominated for a Drum Award in 2020 for this project.