This Guide looks at how to help people move closer to deciding whether to do something. It focuses on simple text based interactions: what appears on the user's next page changes based on their choices on the previous one. The Guide shows you how to prototype possible solutions. It is based how Now Foster created a set of interactive web pages to help people decide if they want to become foster carers. You could do similar for anything your beneficiaries need help to prepare for.
- Key software:
- any Content Management System (CMS), Google Forms, Google Calendar
- How they set it up:
- Developers built or adapted it for us
- Setup costs:
- Staff time, for design, content creation and testing. Development costs.
- Ongoing costs:
- Staff time for ongoing content and testing work. Occasional developer support.
- Guide in use since:
- March 2023
Steps to creating a set of interactive web pages
This Guide could be useful for any website or service that aims to take people from being unsure or uninformed about something to readiness to take a step to get involved. It may be particularly helpful if:
- there is a lot of complex information that people need to process first, and/or
- that next step is to call and speak to someone, or set up an appointment.
You need some evidence to decide. This could come from:
Sector knowledge - that people take a lot of time browsing information before they reach out for support.
Website analytics - showing visitors returning to your site's information pages, but not taking up any of its offered interactions (for example, clicking a button to send you an email or request a call).
User research - showing that people who did take up an offer spent longer than they wanted finding information or making a decision.
Now Foster knew two key things from their wider experience of the fostering sector:
1. It can be several years from people first considering fostering to deciding to apply.
2. There are lots of myths about foster care that need breaking down or dispelling.
They wanted a better solution than providing lots of information pages to read.
You may already have a lot of organisational knowledge about the action you hope people will take, and the fears and barriers that get in the way.
You should check with:
Your frontline workers - especially workers who meet people when they first take that action.
Sector reports or blogs and case studies from organisations doing similar work.
Any peer support workers or volunteers your organisation has who can remember what the experience was like for them.
People with lived experience.
Create a map of what you know, and how certain you are about these things. One method is to use an assumptions board or knowledge board. To try this, use this guide from CAST.
Now Foster's strategic planning process was already focused on people's barriers to fostering. They wanted to take a different approach to foster care that would tackle a range of issues observed in traditional fostering agencies. They wanted the interactive web pages to address these same barriers and issues.
This included:
Making sure people know they can be a foster carer while working
Clarifying that people can be single or LGBTQ+ and still foster
Educating people about what fostering adds to their life
Showing the different types of fostering and what each entails
Deconstructing some of the myths about fostering teenagers
Giving people a sense of the issues in the foster care system.
Building and testing prototypes can help you work out if and how much interactive web pages can help. One of the best ways to prototype at this early stage is to sketch out on paper the types of choices and responses you think you might offer.
Think about asking yes/no questions or asking people to choose interests from a tick box list. Think about what you will show them next based on their choices.
Then you can either:
Ask people to “use” the paper prototype as if it was a screen, talking you through what they would press and what they expect. (This is easier face to face, but with a bit of practice and an external web cam pointed at the prototype it can be done remotely).
Create a short video of the paper prototype being used. Show this to people over a video call and get their reactions.
You can also use these testing sessions to ask interview questions that explore some of your other assumptions. This can help you plan any future rounds of testing.
Now Foster started with a paper prototype and Zoom testing sessions. Their service designer led these.
They focused on the different types of content the interactive web pages could display. They looked at different section headers including:
- Statistics
- Myths
- Information.
This allowed them to prioritise which sections to put into the tool.
The paper prototype sessions also gave Now Foster confidence that interactive web pages would be used and would help move people closer to deciding that fostering could be for them. They saw people begin to imagine themselves as foster carers, even when using the paper prototype.
Before you build these types of web pages for real, it’s a good idea to test a clickable prototype.
You could do this using:
A tool designed for this purpose - such as Sketch, Figma or Adobe XD.
A survey or form builder - such as Typeform or Google Forms (this may limit the types of information you can display in response to interactions)
A “quick and dirty” alpha build - a simple software solution created by a developer.
For more about usability testing use Nielsen Norman's 101 guide.
Now Foster’s in house service designers built their prototypes in Figma. They did two testing phases.
Phase 1: testing interactions
They used the standard usability testing method of letting people use the prototype and asking them to speak out loud what they were doing and thinking. They asked people to say what they thought would happen before pressing each button or link.
The results of these tests made them decide to abandon a plan to provide information over video. Testers experienced the switch from using the web pages, to stopping to watch a video, then going back to the pages as a jarring experience.
Through testing they also got a sense of how long people were prepared to spend using a set of interactive web pages.
Phase 2: testing content and language
They carried this phase out after creating content (see Step 5, below). They showed people content in the prototype and asked them how it made them feel and what they thought it meant. For example as an organisation they thought that “respite care” sounded too serious and off-putting as well as stigmatising. Their solution of using the phrase “family breaks” tested well.
For more about content testing Catalyst explain a simple way to check your online guides and information pages are useful.
From your initial assumptions and tests you should know:
Fears and barriers that need to be addressed
Types of answers and information that people need help with.
When writing you should use best practice in accessibility and readability:
Short sentences, direct language and no jargon
Short paragraphs and bullet points
Offer a limited number of choices
You will need a subject matter expert. You may decide to involve a content design expert who specialises in how people process information they find on the internet.
The service design team at Now Foster also led the content design. They worked with subject matter experts. Together they wrote 2 versions of each piece of content then decided which ones to include in tests.
They also created paragraphs of different lengths, so that they could test how much information people were able to take in.
They tested people's sensitivity to different content. People with lived experience of being in foster care fed back on it. Then they tested it with people interested in becoming foster carers.
Need to know more about good content design? Start with Catalyst’s collection of short video guides.
You could build a set of interactive web pages without collecting or storing any data. This might be the best option, particularly if sensitive data is involved.
You may feel pressure from your organisation to collect emails from people using the interactive web pages, for contacting in the future. You will need to think about whether this could be a useful service to the people using the pages.
If you decide to collect emails, you may also want to store people’s responses to questions in a way that they can be identified. This could be particularly helpful if the next step is a call or an appointment with a worker. This could save people from having to repeat verbally what they already entered.
Once you decide what data would be useful to collect or keep, you need to think about your data protection and security responsibilities.
Now Foster decided they did not want to ask people to provide an email address before interacting with the pages. They thought this would be too much of a barrier. It might reduce usage.
However they did want to offer:
The opportunity for people to leave an email address. And they wanted to ask for consent to send them follow up information.
The opportunity for people to book a call after using the interactive web pages. They wanted the workers making those calls to have access to the choices and information people had provided. They decided to offer an opt out to this rather than an opt in. By choosing to book a call to talk about fostering, people had given a legitimate reason to use the data, so consent wasn’t a legal requirement. The opt out was a courtesy.
You will need to think about 3 aspects of how your set of web pages work:
The user interface - how people interact with them
The data collection - how you store answers and any other data
How page content and the sections they live in are updated - can you edit them yourselves, without developer support?
There are different ways to approach this.
If you aren’t sure how useful the pages will be used you might have a version built quickly. This version would not collect personal data. You might not be able to edit it much. But you could run it for 3 months and track usage.
If you are more confident in the pages' core value you will need more flexibility. Prioritise a solution you can edit without developer support so you can test different content versions. Discuss any need to collect data with your developer, whilst considering privacy and security needs too.
Now Foster believe in building the smallest possible solution first and then testing it.
They worked with Interrobang! They already had a relationship with these developers and knew that they would understand their belief and approach. They discussed their need for flexibility and Interrobang! recommended a solution.
Interrobang! proposed a solution where:
Now Foster could customise content, questions and number of sections through their existing CMS (Contentful)
Interrobang! would connect the web pages to Google Sheets via an API so that certain captured data could be shared with workers running calls, and used for analytics
They built it using React and Next.js programming tools.
Data is collected using Google Sheets, API connections and Google Forms (for any data that doesn't need sharing with a worker). It allows the organisation to get the data it needs, and check it is useful. A future version might include a bespoke database for data capture and transfer into the organisation’s systems. But Now Foster will only invest in this integration if they have good evidence that the pages make a difference.
To make improvements you need the right data. Decide on your success metrics. Do you care most about how many people start using the tool? Or how far they progress through it? Or which questions they spend most time on?
You might also be interested in what you can learn from the pages about wider attitudes to your service.
You should set up your analytics so that you track those things you are most interested in.
You can also run observed usability tests on the live pages.
Analytics
Now Foster use their analytics to learn about people’s interest in fostering, so they can improve their overall service.
They are most interested in:
Demand - what types of fostering are people showing interest in
Location - where people are from
Type of fostering - Who and how people want to foster
They also track things like when do people drop off using the pages. This can help them improve the content and the interactions.
Usability tests
In June 2023 they ran some more usability tests. They discovered that people were disappointed that the pages didn’t talk about how foster carers get paid. In response they created a new content section that let people know how fostering is paid.
They also tested more features for people to request a call, email them, or save their place to come back to later. While they found that people rarely used these, people repeatedly said that having the option to stop made them feel happy and confident about carrying on. So the feature has a purpose, even though its not the intended one.
Further information
- If you’d like to talk to someone about this Guide, contact Jan Blum at [email protected]
- Now Foster used the steps in this Guide to create their fostering readiness checker.
- For step-by-step help with testing web pages with your users try Catalyst's 8 step guide.
- To find a developer with experience and a desire to work with non-profit organisations try Dovetail.
- If you’re interested in fostering you can contact Now Foster.
Was this Guide useful?
Let us know.