edit.png

B2B marketing platform SnapApp had outgrown its builder interface, challenging its mission as an easy to use platform for the busy marketer.

 
 
 

Introduction

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.

 
SnapApp’s old builder UI.

SnapApp’s old builder UI.

 
 
 

My Process

We followed a 4-step process of Empathize, Define, Design and Measure.

 
 
You can read more about my process  here .

You can read more about my process here.

 
 
 
 

Empathize

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.

 
 
icon_navigate.png
 

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.

 
 
 
icon_edit.png
 

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.

 
 
 
icon_type.png
 

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.

 
 
 
 

Define

Given the above data, we set out to tackle the following challenges with this redesign.

 
 
define1.png

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.

define2.png

2. Navigation

Redesign the Builder’s primary navigation to match our user’s mental model of page-based building.

 
 
 
define3.png

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.

4. Familiarity

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.

 
 
 
 

Design

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.

 
Round 1.

Round 1.

Round 2.

Round 2.

 
 

Content Types

We redesigned the engagement-type selection interface, enabling users to interact with a demo of each type, demonstrating its features and possibilities.

 
 
selecttype.png
 
 

Navigation

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.

 
 
settings.png
 
 

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.

 
 
configuration.png
 
 
 

Measure

Positive feedback from customers started trickling in almost immediately after launch.

 

Sandbox Success

Sales reported prospects were having an easier time using their sandbox accounts and were more quickly able to grasp the product's value.


Faster Onboarding

CS reported new customers spent less time in onboarding, and required less hand-holding overall while learning to use the product.


Tradeshow Love

A handful of trade show attendees made a point of stopping by our booth to compliment the new UI!