The problem

A few years ago we launched a new version of our surveying platform and discovered that some users had confusion around sending surveys.

Our system required users to select a survey from a dropdown, pick a date to schedule it, and then hit a blue “Start survey” button to confirm. However, some users stalled out at the start button. After adding their surveys and selecting the date, they assumed everything was ready to go and navigated away from the page, leaving their survey unsent.

According to our data this happened to a relatively small amount of users, but enough that we heard complaints. As a core piece of the app’s function, we really wanted the experience to be smooth and intuitive. So we set out to do better.

Our old UI with a survey ready to go but unsent:

Identifying the issues

To learn more about the problem I interviewed several members who had been confused and spoke with internal stakeholders on our member success team. After compiling their feedback and reflecting I was able to boil down the problem into a few core issues.

1. Inconsistency. We had two different ways to save data on the page, one for the page as a whole and a different one in the context of surveys, making it harder for users to learn the function.

2. Weak hierarchy. Starting a survey is the most important action users can take in the app, but the start button was subtle enough that users were missing it.

3. A complete lack of pizzazz. Sending a survey is the core function of our app and comes at the end of a significant flow. It should feel like an accomplishment and leave no doubt of success.

Finding a solution

After identifying the issues, I began looking for inspiration and experimenting with designs that could help solve the confusion. After a little back and forth with stakeholders and engineers, we settled on a set of updates that would hopefully be both simple to implement and create a more intuitive experience for our users.

First, we unified the page’s two save functions into a single fixed save bar that appears whenever changes of any kind are made on the page. This new save bar acts as a confirmation for all changes and specifically references any new surveys to make it clear that they will be scheduled on save.

Then we added an alert element that appears when a user tries to navigate away from the page without saving and confirming their survey schedule. The alert asks them to explicitly discard their changes before they can move on.

Finally we added a success animation to make it abundantly clear to users they have sent a survey successfully and to celebrate the completion of the task.

Resolution

Taken together, these changes helped our UI to be much more explicit and made it very difficult for users to set up surveys without directly confirming them one way or another. We have had little confusion since and have incorporated this save pattern into our design system throughout the app.