Over time, LocBox went from supporting a few simple marketing campaigns to 8 highly customizable campaigns for small business owners to run. The new complexity of LocBox campaigns led to increasing functionality being tacked onto a system that could no longer support it in a clear, user-friendly way. When users added information to their campaigns it was often without context in an overloaded sidebar. The sidebar was disorganized and it was unclear which sections were required or important until an users got an error. As we worked to make the product self-serve, updating Creator was an essential piece of the puzzle.
Our redesigned campaign creator needed to better handle building each of our 8 campaign types that would be friendly for both our power users and our less savvy customers. To do this, it was important to choose a flexible, contextual data entry method and more meaningful group the different types of information needed for each campaign. We also wanted to make sure our creator would support a variety of creation use cases, with a special emphasis on making it easy for users to re-enter or pass off the creation process seamlessly.
Ideation & Prototyping, User Testing, Visual Design, UI, Interaction Design
UNDERSTANDING THE ORIGINAL DESIGN
LocBox's campaign creator supports 8 different campaign types and, depending on the campaign, 2-6 distribution channels. Creator is split into three sections - Design, Distribute, and Review.
In the design section, users construct the landing page for their campaign by giving the campaign a title, a description, and usually an image. If the campaign is a discounted service offering, they choose their purchase options. If it's a coupon, they add the coupon details. In the original creator, all content is accessed and added in the sidebar. This worked when campaigns were simple. However, as campaigns became more complex and more customizable, the sidebar became unwieldy. Content often lost its context or there were several sidebar tabs to add information to the same section, or information that really didn't relate to the landing page at all. The interactions were often clunky and confusing. There was no indication of progress made - how much was left, what step was next, or whether all required sections were complete.
While functionally the Distribute page did everything it was meant to do, the on/off paradigm for our delivery channels was inaccurate and the accordion structure was clunky. Even if a user never included a particular distribution channel, it always took up distracting screen real estate. The accordion structure only opens a channel's details when it's on and closes only when it's turned off. This leads to a high potential for mistakes in both channel and turning on/off the wrong channels.
Lastly, Creator's review page was difficult to scan for important information due to poor information design and overall lack of helpful information. Once a campaign was scheduled, you could only see the date it would launch. Once it was active, that only thing you could find on this page was a message saying that the campaign was, in fact, active.
Since we don’t have a campaign summary that includes basic information like the purchase options, coupon description, or email subject line, this page had a lot of potential to serve that purpose.
Brainstorming & Ideation
To begin, I gathered feedback from our users and began thinking through the ideal flow. There’s a lot of different types of information and a lot of ways to package the process, so I explored a few different flows and architectures.
Once I settled on a flow I found promising, I created low fidelity prototypes to think through the creation process. After I settled on v1, I began creating a prototype to walk through with our users.
Wireframing & Feedback, Round 1
The first prototype introduced a change in sequence: Delivery channel settings, Content, Review. This version also had a live preview not only for our landing pages, but for the entry email and confirmation emails we send to consumers, and other pieces of collateral. I maintained a sidebar for navigation to switch between views, instead of each piece of the landing page. I also separated Distribution settings (i.e. what customer lists should be used on the email channel) from Distribution Content (i.e. Email Subject Line & CTA Button Text).
Upon sharing this design with users, I received the following feedback:
- Audience settings and content should remain combined
- Even though channels had limited content to edit, having them in the sidebar was too intimidating
- Inline editing might not provide enough guidance to our users
- Several suggestions of introducing a wizard version of creator for our less savvy customers
Wireframing & Feedback, Round 2
In this version I tested a new “Add channel” functionality, added a”branding section”, and simplified side navigation, in addition to the changes in version one.
I received a lot of helpful feedback:
- Channel settings and content should remain combined
- Might be unclear if a channel is added and/or that more than one channel can be added
- Branding as the first decision is difficult - assumption as that most users do this later
- On/Off for many channels is a false binary - since other than Ads & the plugin, most channels send once or twice, rather than being “on” so Add/Remove might be a better mental model
Wireframing & Feedback, Round 3
This version introduced a wizard approach where users don’t see the Landing Page preview until content is complete or they choose to exit the wizard. Power users found this approach clunky and slow, while for novice users it reduced confusion and distraction. To address this divide, we considered building with having a two-path tool, which enabled power users to use an inline editor and less savvy users to use the wizard. Unfortunately, we decided that building a wizard on top of an inline would require too much expensive engineering time so we should concentrate on a hybrid solution.
Wireframing & Feedback, Round 4
For our final test prototype, I built a version that tried to marry the inline and wizard approaches. To do this, the UI had the same entry points to edit each section as inline editing, but opened into a modal, instead of opening an inline editor. This would reduce the technical implementation concerns, since most of our sections are not straightforward inline editing (nor are their inputs particularly small or simple). Once a modal is open, users can navigate between sections or save and close the modal.
The final concept retained the three step process, but as a simple update we renamed the sections from Design/Distribute/Review to the friendlier and more understandable Content/Audience/Review. We also moved the scheduling portion to the top nav, since it’s a top level campaign setting, rather than strictly tied to the audience.
Design Section: Each section of the landing page corresponds to a modal which contains all inputs required for that section. Users can either enter and exit each section, or navigate between each section once a modal is open. While we’ve retained the live preview, we decided to start from a state that better indicates which section still require the users attention, rather than provided what looks like it could be a finished campaign.
Each section of the landing page is edited in a modal, which in some cases combined several of the original creator tabs together, depending on which section of the LP they appear/pertain to. When relevant, customers can see the information they enter as it appears on the Landing Page. For example, once Purchase Options are added the appear in the correct layout/size and in order, which makes them easier to review.
Audience Section: Through our testing, analysis of customer accounts, and observation of users, we realized most customers do not use all of our available audience channels in each campaign. We wanted to take this into account and give our customers only the information they needed to achieve their campaign creator goals.
Depending on the campaign, there are 5-6 distribution channels (or audiences) available. The original design showed all available channels all the time in an accordion style list. To help our users focus on the channels they were actually using, I designed a new flow for adding audiences, which only surfaced the required UI elements of each audience after it was explicitly added.
Some of our audiences required a lot of inputs before they’re ready to launch, which means that in the past the Audience page has been unwieldy and long. The re-design of our creator introduces two states for audiences - editing mode and collapsed mode. The collapsed mode serves as a way to shorten the page, but still retains information about the main content for reference. Collapsing each section upon save also allows our users to feel productive and keep track of their progress.
When we first added Facebook Ads as a channel, there were three available target audiences. However, as we continued our work on the feature, more ad audiences we introduced. With a checkbox to add an audience and another to filter that audience further, our UI was suddenly cluttered with 16 checkboxes. As we re-designed Creator, we took this opportunity to clean up this crucial section of the Facebook Ads UI.
After watching users go through the campaign creation process on Inspectlet (one of the many softwares available to record user sessions), we learned that many users create their campaigns over hours and even days, rather than all at once. Our new review page is beefed up to show the most relevant campaign data to jog our customers’ memories before they schedule or launch a campaign, rather than forcing them to revisit each section of creator.
Since we know that for many SMBs marketing can be a chore, we tried to brainstorm ways to add some joy to our interface. One of the ways we’re hoping to achieve this was by adding more congratulatory images once a campaign has been scheduled or launched.
After spending the past year improving almost every other part of LocBox’s marketing app, Creator was the last huge chunk missing. Our entire team was excited, but apprehensive, going into such a large endeavor. We are almost completely through the first portion of the project, after which there will be one type of campaign that can be created with the new creator. I’m excited to test this with our users and see if there any incremental adjustments to be made as we release each successive campaign type.
Working with my front-end engineers on this project was really helpful. I was incredibly grateful to have a team that could not only walk be through the pros and cons of different saving paradigms, but also the effect each could have on our user experience. Unfortunately, our new creator never made it to market, which is a huge disappointment as I was looking forward to the incremental improvements we would inevitably make as we refined the product.