B2B marketing platform SnapApp had outgrown its builder interface, challenging its mission as an easy to use platform for the busy marketer.
A growing volume of internal feedback suggested problems with SnapApp’s “Builder” was hurting both sales and customer retention.
Customer Success claimed the Builder’s complexity contributed to lengthy on-boarding, continued reliance on support, and hesitance to create repeat engagements for many customers.
The Sales team reported prospects experienced difficulty learning to use their sandbox accounts.
We knew we needed to put ourselves in our user’s shoes before making big changes to such a significant piece of the product.
We followed a 4-step process of Empathize, Define, Design and Measure.
User data collected from multiple sources, including a customer survey, customer phone interviews and co-worker interviews allowed us to discover the root of the issues with the existing builder design.
Users found the Builder’s tab-based navigation to be confusing.
We discovered our user’s mental model for for their engagements was page-based. Given the Builder’s navigation was tab-based, they frequently got lost while navigating throughout their engagement during the build process.
Users struggled to learn the tool because editing conventions were inconsistent.
The Builder lacked a clear separation of tasks. The rules governing tool placement (adjusting global settings, adding content, configuring content, styling content etc.) were inconsistent. This made it difficult for users to learn to build engagements in a repeatable way.
Users were unsure of the differences between engagement types.
The possibilities and limitations of each engagement type (survey vs assessment for example) were unclear. This meant users frequently started their build from scratch after realizing the engagement type they selected didn’t offer the functionality they needed.
Given the above data, we set out to tackle the following challenges with this redesign.
1. Content Types
Redesign the Content Type selection UI to more clearly demonstrate the possibilities and limitations of each type to the user before they enter the builder.
Redesign the Builder’s primary navigation to match our user’s mental model of page-based building.
3. New Menu Structure
Establish a new menu structure that clearly separated the tasks of adding, configuring, and styling content, as well as adjusting global settings.
Redesign everything in such a way to be familiar to our target audience; Demand Gen and Content Marketers used to working with MS Office and G Suite.
Using Balsamiq Mockups and InVision, we completed 3 rounds of usability testing with co-workers and customers, refining the prototype and validating our thinking after each round. Final wireframes were created with Omnigraffle.
We redesigned the engagement-type selection interface, enabling users to interact with a demo of each type, demonstrating its features and possibilities.
We redesigned the builder’s navigation, ditching the tiered tab menu in favor of an all-new page manager, enabling the user to view and manage their pages from a single location.
New Menu Structure
We moved all global settings (any settings that made no visual change to the engagement) into a global “App Settings” menu, away from the canvas and visual editing tools.
We created a new “Content Bar”, placed directly above the canvas, featuring all content available to add to the engagement,
As the user focuses on the various elements of their app, the Content Bar switches to the “Formatting Bar”, containing all styling tools for the corresponding element.
Lastly, we created a “Config Menu”, housing all configuration tools for each element, which could be opened directly from the element itself.
Positive feedback from customers started trickling in almost immediately after launch.
Sales reported prospects were having an easier time using their sandbox accounts and were more quickly able to grasp the product's value.
CS reported new customers spent less time in onboarding, and required less hand-holding overall while learning to use the product.
A handful of trade show attendees made a point of stopping by our booth to compliment the new UI!