In 2016, Friends of the Earth set out a new strategy and a redesign of their website was commissioned to reflect that. As part of their five step changes the new site needed to enhance campaign impact, provide a great supporter experience, have a disruptive approach, empower communities and networks and build a more diverse network of people. The KPI’s were to increase the number of people taking action and the number of donations through the website.
I held card sorting workshops with the teams within the organisation to better understand their needs and to engage them in the process. From here I developed a sitemap and within that a campaign sitemap template, that could be applied to all future campaigns. I tested this using Treejack and iterated until I was confident we had solid structure. Alongside this I developed a suite of key personas to use throughout the UX process.
Again I engaged the campaign teams in user journey workshops mapping the user journeys on the current site, highlighting key pain points and areas of insight. The campaign teams are heavily involved in content production so it was essential to include them in the process. From here I developed optimised user journeys. I also conducted an initial set of user tests on the existing website to set as a benchmark for future testing.
Considering the size of the website and the need as an organisation to be reactionary the team approached the project by taking one campaign and treating it as a template for all future campaigns. I created interactive wireframes, with 3 responsive breakpoints. I designed a set of “cards” for that website, that could cope with different content needs that could be combined in different ways to build pages according to campaign needs. I then conducted user testing using What Users Do and first click testing with Chalkmark and presented to the stakeholders and the organisation for feedback. This was an iterative data driven process.
When the wireframes were signed off, I designed key pages, along with a style guide which could then be applied by the dev team to the comprehensive set of wireframes. I provided a set of complimentary colour palettes that could be applied to different campaigns so that they each had their own unique identity while existing within a cohesive overarching identity.
When the pages went live, we set up Crazy Egg to get real user data and along with this we developed a user testing strategy for the team, so that they could continue to learn from data and apply these learnings to the site. The new design will be applied to the rest of the website in stages.
This example online petition shows how we iterated based on test findings while taking into consideration the organisation's goals.
