Case Study: Quick Add Button

The problem

During user interviews I discovered a discrepancy between how our users conceive of our app and how it’s structured. Time and time again during interviews I would hear users describe coming to the app to “Add surveys” and often being confused about how to do that.

The problem was that we were not providing a clear path for users to achieve their goals. While they were thinking of “Surveys” we were thinking of “Contacts”. In our system before you can add a survey you must have a contact for that survey to be sent to. Our app geography reflects this. If you want to add a survey, first you needed to go to the contacts page, click new contact, add their info, and then add a survey. This was accurate to our data’s structure but unintuitive to our members who signed up with GuildQuality to send surveys, not to add contacts.

Here is our dashboard before the quick add button. Where would you go to add a survey? Probably not the contacts page.

old dashboard.jpg

Exploring the issue with personas

The most common persona of a GuildQuality user, and the one most likely to be affected by the problem described above, is that of office administrator for a small home builder or remodelling company. This person is often part of a small team and wears a lot of hats. They skew older and sometimes are not deeply familiar with technology. Often managing the company’s GuildQuality account is an additional responsibility given to them on top of their normal duties. They are not deeply familiar with GuildQuality, or all the features of our app. Instead, they have been tasked to upload surveys and that’s what they log on to do. The problem above is a result of a disconnect between our product’s geography and their expectations.

The solution

After speaking with stakeholders and engineers it was clear that we needed a solution that would help users reach their goals without drastically changing our product. With that and our persona in mind, I explored several options and settled on implementing a new “Quick add” button into our app’s navigation. Because it’s on the navigation, it is accessible from any context and lets users cut through the app’s geography to easily add content. Any content can be added from the quick add menu, but its main component is labeled “Add survey” to match our users’ expectation. If the user clicks add survey, they are taken to the new contact page where they are eased along by a prompt explaining the survey/contact relationship.

Quickaddbutton.jpg
new contact.jpg

To build consistency we incorporated the styles of the quick add button into our design system. Now all the buttons used for adding content share a similar visual style: rounded edges and a blue gradient. These styles are reserved exclusively for adding content and help communicate function to the user.

Another example of an add element:

other add element.jpg

Measuring success

Did the quick add button help our users? We tracked the clicks on all elements in our app and I am happy to report the quick add button has been a quantitative success. Today it is the single most clicked-on element in the entire app and by far the most common way that users enter the flow to add a survey.