How to tell an interactive story with a typeform
Abortion Support Network are a charity which provides travel information and sponsorship for those who need abortions, but can’t get them in their home countries. Part of their work is to spread awareness of just how complicated it can be to access this medical procedure if you don’t have much money and live somewhere with restrictive laws. To do that, they created an interactive story with a typeform based on case studies of real people they’ve supported.
It tells the story of Saoirse, a 28-year-old mother of two in Ireland, who becomes pregnant at a complicated point in her life. You must answer in Saoirse’s place, but every decision you make might lead to a different set of problems.
It’s a relatively simple typeform. The difficult part is in planning the Logic so that every possible answer leads to a relevant branch of the story. Here’s how they built it, so you can create something similar.
You will need:
- A Background image that fits the mood of your story (optional).
1. Add a background image
First off, time to make this feel like a story and not a survey. ASN worked with a graphic designer to create a background image relevant to the story: train tickets, a watch, some birth control pills.
To add in a background image, head over to the menu on the right, click on the Design tab and scroll down to Background image. You have the option here to upload a file, or choose pictures from our free database. Whichever image you choose will appear on every question, so you’ll only need one.
2. Customize your Welcome Screen
This is the first screen that “readers” of your story will see, and will usually be the preview image of your typeform when you embed it on web pages. ASN customized their Welcome Screen by adding an image of some typography and their chosen title. To do this, click on Question in the right side menu. Select Image or video and you’ll have the option to upload a file or find an image.
ASN also customized the button on their Welcome Screen. To do this, stay in the question tab and find Button. You’ll see a box where you can type in your chosen text.
3. Use a Statement question to set the scene
A Statement question is a text screen that doesn’t require an answer, perfect for describing the premise of your interactive story. To begin, ASN has outlined Saoirse’s situation using two of these. To add a statement question, go to the Content menu on the left, and click the plus sign. You’ll see the option to add a question, and can select Statement question.
4. Plan your branching logic
For elaborate branching stories like this one, it’s wise to map out the “plot” before launching into branching Logic. After all, look how complicated the final Logic Map for this typeform is!
This is optional, but it might save you from confusion down the line. Open a notes app for a few minutes and figure out all the twists and turns: “She has to choose between internet research and going to see a doctor. If she goes to the doctors, then she’ll have to go to Dublin for a further scan, then she’ll have to chose who will come with her...If she chooses internet research, then she’ll look up a number and be told they’re going to get back in contact with her in a week…”
5. Add a picture question
Now to start putting your elaborate plan into action. ASN used a picture question for the first choice the “reader” will have to make in Saoirse’s place. To do this, go to the Content menu on the left, click the plus sign, then select Picture choice. You can add images from Unsplash’s free picture gallery, free icons, or upload your own image. ASN chose to upload their own illustrations, which are in the same style as the background.
6. Add the questions that you’ll direct people to from here
In the case of ASN’s typeform, each possible answer will be followed by a Statement question that sets out a new problem, and then a Picture Choice question.
7. Add branching logic
Now it’s time to add Logic so that people who answer your typeform see different branches of the story depending on which option they choose. Go to the menu on the right, and select the Logic tab. There, select Branching and calculations. Go to your first picture question and choose Add condition. If the answer is, for instance, “Go see your GP” then add a “Jump to” to send them to the relevant part of your typeform. If the answer is, for instance, “Look up a number to call online” then add a “Jump to” to send them to the corresponding part of your typeform.
Make the body of your story by repeating this step as many times as you need to.
8. Add the option to interact outside of the typeform
Towards the end of this typeform, when the “reader” has been through several trials with Saoirse and is starting to understand her predicament, there’s the option to stay in touch with the charity. ASN added a multiple choice question which offers the choice to sign up to a mailing list or share the typeform. To do this, simply click the plus sign in the Content side bar and select Multiple choice question.
9. Collect respondent emails
Next, this typeform needs an email question, for everyone who selected “I’ll sign up to Abortion Support Network emails.” Here, ASN added a Question group, by clicking the plus sign on the Content sidebar and scrolling right to the bottom. To this group, they added two short answer questions and an Email question. Questions in a Question group are added the same way as normal questions: the only difference is that they look more organized from the survey-builder’s perspective, because you can tell at a glance that they’re part of the same section of the form.
Once you’ve got an email question, you can sync your results to a Mailchimp account to create a user-friendly mailing list.
10. Add Logic so that not everyone sees the email question
Now to make sure that only those who responded “I’ll sign up to Abortion Support Network emails” sees the email question group. Go to the sidebar on the right, select Logic, and choose Branching and Calculations. Then, set up a condition so that if someone selects “I’ll sign up…” then the form jumps to the first question of this question group. If someone selects “I’ll share this story”, add a condition so that the form jumps to the Ending instead.
11. Encourage people to share the typeform
ASN added Social share buttons to their Ending. To do that, go to the sidebar on the right, select the question tab, and toggle on Social share icons.
There you have it: a simple typeform can be used to tell a very complicated story, get people talking on social media, and collect email addresses - all at the same time.