Background

Established over 150 years ago, Barnardo’s is the UK’s largest children’s charity. The main website was to be redesigned as part of the charity’s digital transformation.

The website had not been updated in a number of years and new sections felt ‘bolted on’ – information was not easy to find, the design was inconsistent and it was not responsive. Ultimately, visitors had difficulties using the website and this was affecting the charity’s ability to raise funds and provide support.

Approach

The project was split into ‘Discovery’ and ‘Alpha’ phases. Empathy mapping workshops with Barnardo’s senior stakeholders helped us to identify the user groups for discovery. Discovery involved reaching diverse user groups to understand their user needs. Alpha was for designing priority areas of the website and user testing prototypes with real users.

Ethnographic research

Barnardo’s is well known for its high street charity stores. I visited two stores to carry out user research, however store visitors were reluctant to stop and talk. I informally interviewed store managers and volunteers, who gave me examples of frequently asked questions, from which I could derive store visitor user needs.

I attended the Barnardo’s reception for London Marathon finishers to carry out interviews with fundraisers. Realising that being interviewed is the last thing someone wants after a marathon, I was careful to build rapport and give congratulations before diving into questions.

Participant recruitment and telephone interviews

Barnardo’s users span the UK and visit the website for a variety of reasons. To capture a representative sample, I set up an Ethnio screener on the Barnardo’s website to recruit and schedule for interviews. I created a screener for different sections of the website, so I had an indication of the type of user before the interview.

I recruited fostering and adoption parents, fundraisers, volunteers, store donors, cash donors and charity commissioners for interviews. I wrote the screeners, managed the interview schedule, prepared scripts and carried out the telephone interviews.

Information architecture redesign

I lead the complete overhaul of the information architecture. Such a large variety of user goals presented a unique challenge. This was one of the most significant parts of the redesign project.

The Barnardo’s website contained masses of information, with over 185 types of content pages. The site had grown without forward planning for the information architecture and it had become a significant detriment to the user experience.

Card sorting was the first step to creating a more intuitive information architecture. Time did not permit card sorting with real users, so myself and others did independent card sorting. The activity lead to two options for the IA – one of which was mostly based on my card sort.

I set up tree testing to test the two options. I wrote hypotheses that characterised the two options and created an A/B tree test using Treejack by Optimal Workshop. I wrote variations of the tree testing script targeting specific user groups. To recruit users and direct them to a tailored tree test, I used a Typeform screener placed on the Barnardo’s website.

Analysing the tree test results based on ‘Pietrees’ and metrics, revealed that the information architecture based on my suggestion worked well. However, I was able to make further improvements from the analysis.

Design sprints

The Alpha phase ran in one week sprints. To kick off each sprint, I developed and lead a half day workshop based on selected activities from the Google Design Sprint. The workshop established the design direction for the sprint and the rest of the week was spent refining the design and creating prototypes.

The design sprints ran back to back and I lead the user testing of the prototype developed in the previous sprint. I wrote the test scripts and ran guerilla, remote and lab user tests – the flexibility in the approach to user testing allowed us to reach more potential users in a short timeframe.

I had the opportunity to user test with young people from the ages of 6 to 12. It was great to see how engaged they were and was an all round rewarding experience.

Working out loud: company wide engagement

The website redesign was a flagship project for Barnardo’s digital transformation and there were many stakeholders with strong opinions. I facilitated workshops with senior stakeholders, including Barnardo’s CEO. Company-wide engagement made the project transparent and ensured that anyone could follow it and contribute. I wrote weekly working out loud progress summaries and contributed to show and tell presentations.

The Barnardo’s digital team was involved throughout the process. In the Alpha phase they were part of the ideation workshops and design review sessions. This meant we could iterate on designs efficiently to produce a signed off and testable prototype within a week.

Deliverables

Discovery

I produced 12 personas from the research and made contributions to all 21 delivered. Most of Barnardo’s users have unique circumstances and stories. Nonetheless, some user groups would go through a similar engagement process. I produced 4 of a total 6 user journeys, to illustrate complex flows and highlight pain points, opportunities and digital touchpoints. I made a significant contribution to the comprehensive discovery report, which was the main deliverable of the phase.

Homepage redesign

The homepage was designed to communicate Barnardo’s mission, signpost individuals in need and build empathy to encourage contributions to Barnardo’s work. The design had to appeal to young people, older adults and professionals. It was kept clean and emotive, but with elements of ‘fun’, such as bright accent colours and imagery.

Donations redesign

Competitor analysis revealed that most charity websites could dramatically improve their donation flow. Ours was inspired by ecommerce checkouts for clarity and simplicity to maximise conversion.

An interesting debate for the donation process was whether or not to show examples of what money donated could be used for. If an example doesn’t resonate with the user, it could push them towards a lower donation. Although we A/B tested, the best way to maximise donations and get real life reactions and decisions would be with split testing on the live site.

Centres and services redesign

Barnardo’s operates centres that host various services, however users more strongly associated with the service on offer rather than the centre. We designed the conceptual model for the centre and service pages to fit a user’s mental model, not the operating model. That meant that relevant centre information was presented on the service page itself.

Fostering redesign

The fostering pages were designed to educate users on the Barnardo’s fostering process, but also sell Barnardo’s as a fostering agency. When I spoke to first time foster parents they said that their main concern was understanding eligibility, so I ensured that an easily understandable checklist helped users know if fostering was available to them. Foster parents who had fostered with different agencies were curious to find a better fostering provider. For this audience, I included a section marketing the benefits of fostering with Barnardo’s.

Thanks to comprehensive user research and iterative and collaborative design, the prototypes tested very positively. I’m confident that the deliverables will provide a strong foundation for the Beta and Launch phases.