Designing a Branching Survey




UX Lead

  • Staff Interaction Designer
  • Staff Software Engineer
  • Software Engineer

Google Health Studies is a platform that makes health research widely accessible by enabling organizations to conduct health research at drastically reduced costs. The Survey Builder lives within the Study Builder, which is a platform that enables researchers to build studies. Researchers utilize the Survey Builder to build the surveys within the studies.


The main challenge was creating the branching logic, which is the set of conditions that exist to determine which upcoming questions survey responders receive based on their responses to previous questions. This project was based on two pillars of the branching logic: 1) communicating the UX flow to the Eng team; and 2) designing a UI to clearly express the UX to the user (ie, the researcher creating the survey).

Mockup of the Study Builder

Survey Builder logic map

1. Survey Overview

The top section was originally laid out by my manager (the listed Staff Interaction Designer). What she designed looked similar to what you see now, but the Raymond touch is in the dynamic preview updates to the right of the mockup. In this section the user adds a title, how often the survey gets presented to participants of the study, and an estimated time for completion. You’ll notice that when the user (the researcher creating the survey) interacts with one of these text fields, the live preview at the right automatically updates to show where on the survey responder’s screen that the information will show up.

2. Changing the Question Type

3. Creating a Question Headline

4. Adding Conditions - US States

5. Error State - US States

6. Branching - Create a New Question

7. Change 2nd Question Type

8. Add Age Headline

9. Adding Conditions - Age

10. Error State - Age

11. Delete Question - Age

12. Duplicate and Delete

13. Duplicate and Add Branch