How to tell an interactive story with a form

Abortion Support Network is a charity that 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 form 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 form. The difficult part is 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, and some birth control pills.

To add 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 form 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, Click + Add content and select Statement.

 

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 form 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 doctor, then she’ll have to go to Dublin for a further scan, then she’ll have to choose 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 choice question for the first choice the “reader” will have to make in Saoirse’s place. 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 form, 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 form 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 form. 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 form.

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 form

Towards the end of this form, 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 form with others.

9. Collect respondent emails

Next, this form needs an email question, for everyone who selected “I’ll sign up to Abortion Support Network emails.” Here, ASN added a Question group. 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 form

ASN added Social share buttons to their End Screen. 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 form can be used to tell a very complicated story, get people talking on social media, and collect email addresses—all at the same time.