As part of my work at Fat Beehive, I was asked to modernise the outdated SolarAid website with a new fresh and bold design that matched their innovative social enterprise model.

Visit site:

Solaraid wanted their new site to appeal to not just their traditional core audiences, but also a new audience of ‘Early Adopters’ that we helped them to define. This audience is younger, more tech savvy, more globally engaged, more solutions orientated, wanted bold and brave movement on issues, and has a stronger understanding of how they were part of and could help solve global problems.

This audience became a driving force in many of the design decisions that were made during the project, including the changes to the SolarAid brand.

One of the main frustrations that they were feeling was that their colour palette of orange and yellow was too restrictive, and was not bold enough for the work they were doing. To combat this we introduced a bright and attention grabbing fuchsia and made more use of the contrast between black and yellow, playing on the theme of light overcoming darkness.

We also introduced a new font pairing to work alongside these colours. Graph FF Condensed, a ‘A flat-sided, condensed display face, good for headlines and titles’ and Klima, a simple and versatile san-serif body font. Both are creations of the immensely talented Matthew Hinders-Anderson and available to use for free to charities and non-profits.

SolarAid wanted their new website to differ from normal charity websites, so in addition to our usual discovery process we undertook a series of ideation sprints. We used these to generate and iterate over ideas and direction for the site, and to work through individual ideas and issues quickly.

The three main challenges we were looking to solve through this ideation process were:

a) Finding a way to help the sites users understand and experience the ‘wow’ moment of flicking a switch and getting easy access to light for the first time

b) Showing the depth and breadth of the impact a Solar light can have on people and communities

c) Increasing SolarAids ability to run impactful campaigns as and when they need.

Out of this ideation process, we ended up with three solutions to these challenges.

Firstly, to allow users to share in the ‘wow’ moment, I designed and built a unique interactive photo filter that can be used anywhere on the site (shown in the images above). At first, images with this filter appear to be dark and barely visible. When a user hovers over the image, a torch like light source follows the cursor, revealing the image below. This was implemented with vanilla javascript, to minimise loading times and dependencies. It’s also built to be as light as possible, so that it can be used in many places across the site without impacting the overall user experience.

Secondly, we worked with SolarAid to create an ‘impact calculator’ that allows people to put in a suggested donation, and see directly what impact this will have. As we were concerned that this could be quite stat heavy I proposed a more narrative driven approach to the displaying the data, where the numbers would be part of a single paragraph that detailed SolarAids impact.

As the user types into the donation field, the numbers automatically update. This is combined with a donation CTA that takes them through to the donation form and automatically populates the donation amount from the calculator.

Lastly, as we knew that campaigns were an important part of SolarAids growth strategy I designed and implemented a flexible ‘campaign pagebuilder’ that would allow them to combine and order these campaign related components in any way that they chose.

These components then animate in as they scroll into the viewport, revealing the campaign narrative as the user moves down the page, and ending with a CTA that features the unique photo filter.

This campaign pagebuilder gives them the ability to create an infinite number of differing campaigns, that can either be linked to on their site, or kept as ‘orphan pages’ (outside of the navigational structure) and used as part of email campaigns to different segments of their audiences.

The work we did for SolarAid allows them to stand out against other competing charities in their sector and sets a bold new vision for the charity, pushing the boundaries of what a charity website should and could look like.

Back to everything? or Contact me?