Survey Builder

Web Application Feature Design

Designed a new feature within the MFour Studio web application that empowers users to build surveys on their own rather than relying on managed services. The feature aims to offload responsibility from the internal team and give users more autonomy.

Sales Leads

19%

App Engagement

22%

Internal Workload

-13%

Context

What is MFour Studio?

MFour Studio is a B2B consumer research platform where clients can discover and analyze consumer behavior data. The platform provides valuable insights into consumer trends and market opportunities. These insights and data are gathered from consumers through the Surveys On The Go app.

What is Survey Builder?

Another service MFour as a company offers is building and fielding surveys. Before this project, users would build and field surveys through managed services handled by the Sales/Operations team.

By adding Survey Builder, this allows users to build and field surveys on their own. By doing so, users can save time and money on survey creation and associated programming costs.

Problem

To build/launch a survey, users would have to go through a Managed Service, which meant working together with the Sales/Operations team. The process was inconvenient to users, required effort from our internal team, and took longer than necessary to get a survey out.

Solution

A new feature within MFour Studio called Survey Builder that allows users to build surveys on their own. Users will have the ability to create and launch surveys without reliance on managed services, while still utilizing advanced logic, capabilities, and customization.

Discovery Research

Competitor Analysis

A competitor analysis was conducted to take a look at the approach of various other web apps that have a similar survey-builder experience and features. The focus of this was to observe what these web apps did well and how we can build an experience that fits the survey services MFour provides.

Most apps follow a common format that sections contents into 2-3 columns. Left-side is usually for the list of questions, Middle is for editing or overview, and right-side is for additional options.

Standard user flow observed on other apps:
‍
Dashboard > Create New Survey > Select Question Types > Edit Questions > Preview Survey > Launch Survey.

Leveraging a Previously-Built Tool

The company tried releasing a similar tool many years ago called "DIY Surveys", but few clients used it and eventually became obsolete. To conserve engineering resources, the PM decided to reuse as much of this tool's existing code. This pre-existing DIY Surveys tool would serve as a starting reference as I design the new Survey Builder as a research tool within the MFour Studio platform.

Design

User Flow

After referencing flows from the DIY Surveys tool and those of other apps, I drafted a new user flow for how an existing user would build/launch surveys within the MFour Studio platform.

Lo-Fi Wireframes

After a few design explorations and iterations, below are the low-fidelity wireframes we settled on. Due to the PM's aim to conserve engineering resources, some components and layouts have been recycled from the previous DIY Surveys tool. (For example: drag/drop questions, column content, structure, etc.)

Testing

To test the overall flow of the design, we conducted moderated usability tests with 6 clients who have launched surveys through managed services in the past and were already familiar with the MFour Studio platform. Below are the findings and revisions that followed.

Findings

Revision/Changes

Users would like to see which phase of the building process they are in. For example, to indicate whether they are in Building, Testing, or Checkout phase.

Added a navigation within survey builder that indicates which phase of the process they are in and be able to navigate between phases.

Users were confused about the drag and drop question interaction, which was reused from the company’s pre-existing ‘DIY Surveys’ tool.

Replaced the drag & drop interaction with a question selection menu.

Final Designs

1. Survey Builder Dashboard

Survey Builder will be a new feature within the existing MFour Studio, categorized as a research tool. The new feature will be accessible through the main navigation bar on the left.

2. Create New Survey

Users start by inputting the survey name & sample size. Afterwards, users can select a demographic audience template or put together a custom audience. In addition, Pro/Premium users can opt-in to target validated consumers that share location/web data.

3. Building & Adding Questions

Based on the user testing feedback, the team permitted some revisions that diverted from the existing DIY Surveys tool. Now, rather than drag/drop, users click on “Add Questions” to select a question type. I added a right-side panel that updates as the user builds, providing info on pricing/feasibility.

4. Preview & Launching Survey

To gives users confidence in how their survey would appear to panelists, I included a Preview stage right before payment and launch. The preview shows an emulator of Surveys On The Go, the mobile app where panelists take the surveys. After previewing, users will input the fielding dates and launch their survey.

Results

After the feature's release, we measured success metrics to evaluate goal achievement. The results below affirm a positive impact on user autonomy and user engagement on the platform.

Sales Leads increased

19%

by empowering users to build/launch surveys on their own, making it easier and more accessible.

Session Frequency increased

22%

by adding the new feature and enabling a workflow that allows for convenience, ease of use, and efficiency.

Workload Hours decreased

13%

by reducing the managed services workload from the Sales/Operations.