Grow my list, sell more stuff

Mailchimp is a hometown hero here in Atlanta, they're also one of the world’s leading marketing automation and email marketing service providers. Always a champion for the underdog, Mailchimp wants to make life easier for small business owners by empowering them with the tools and inspiration to grow their business.

Landing Pages launched publicly for Mailchimp users last Fall and has since helped Mailchimp customers increase their list growth rates by 36%. Landing Pages is a landing page creation tool inside the MailChimp experience. It leverages patterns you've already learned as a Mailchimp user over to creating basic landing pages. It then takes it one step further by connecting the dots for you across e-commerce, email and ads. It's one key part of several other related product features, including Direct Mail and Shoppable Pages that I worked on as part of the R&D team. Additional product features have been released internally for beta testing and are slated for future release.

Our team worked along side the product team, with my efforts focused across research, concept iteration, and the communication of ideas at weekly meetings.

Objective

Design and build a landing page creation tool within the existing MailChimp application in a manner that is familiar, flexible and fast. The primary goals were to

  • Find ways to introduce an intent based approach to creation

  • Create a landing page from an email or Facebook campaign and vice versa

  • Explore template patterns that will help customers create well designed landing pages

Constraints: Mailchimp UX Patterns, Needs to be simple but flexible enough to fulfill various needs, needs to feel like an integrated part of the MailChimp experience, templates should be fairly intuitive and forgiving for users without design and/or tech savvy

Responsibilities

Competitive and comparative research, analysis + distillation of research, brand and contextual research, concept iteration, wireframes, prototyping, component and asset creation, digital prototypes, and communication of work and thought processes across teams.

Mailchimp handled road-mapping, testing, development, integration and implementation.


My Process

Persona

persona.png

discovery

My first step after understanding the larger objectives of the business was to understand the how users were used to creating email campaigns and ads within Mailchimp. I went through as a user and took screen grabs of each touch point that I went through, taking note of things that worked and things that stood in the way

Some potential pain points were

  • Too many choices in the templates department

  • Little help in the way of providing context for copy or design choices

  • Editor pane had granular choices better suited for more design and tech savvy customers

  • Little follow up or suggestion in the way of what happen after you publish


Common Use Case Scenarios

What are the possible scenarios that a user might end up on a landing page. Where are they coming from and what are some of the purposes it serves for the business owner?

  • Destination from and Ad or Email (Click through)

  • Purchase driven (Click Through)

  • Coupon Offer (Click Through/Lead Generation)

  • Sign up (Lead Generation)

  • Product Giveaway (Lead Generation)

  • Course Offering (Lead)


Competitive Research

After observing and experiencing the customer journey in MailChimp. It was time to become familiar with others in a similar space as well as exploring the tools out there that are democratizing the experience of design and marketing for their customers. Below are a few of the platforms that I researched and played around with as well as some of the distinguishing features of each.

patterns

The experiences I had encountered across these platforms allowed me see things more abstractly as patterns. Viewing things from this perspective would come to inform the possible directions we could take with the design of the builder.

Initial Concepts

Where could we go?

Based off the research and patterns I observed, there were a few routes that I think we could have gone, the concepts were created according to how far away they were from the current MailChimp experience. The first is fairly radical, the second concept is somewhere in between, and the 3rd concept is more or less an enhanced and much more focused experience that is also the closest to how email building is structured. On the R+D team, while there is a brief established, there's also a responsibility to push the product forward, so I always end up doing concepts that represent what is feasible within time but also what is possible in time. 

Concept 1 : Top Nav with replaceable blocks

Top Navigation most divergent from current MC pattern, but similar to a previous application we created for MailChimp in pattern. Click through slideshow below.

 

Features

  • Top Navigation

  • Edit by section

  • Section guidelines

  • Direct selection

  • Pre-composed layout “Blocks”

  • Drag and drop capability

  • Mobile views

  • Undo

  • Ability to switch Intent, Layout, Fonts, Colors, Patterns

 

Concept 2: Left navigation with widgets

Middle way between existing patterns in competitive space and current Mailchimp patterns. Click through the slideshow below and see features list..

Features

  • Left Side Navigation

  • Edit by section

  • Section guidelines

  • Direct selection

  • Pre-composed layout “Blocks”

  • Drag and drop capability

  • Mobile views

  • Undo

  • Ability to switch Intent, Layout, Fonts, Colors, Patterns

 

Concept 3 : Right Nav with granular controls
Closest version to current MailChimp patterns. Click through the  slideshow below and see features list..

Features

  • Right Navigation, draggable list items

  • Edit by section

  • Section guidelines

  • Direct selection

  • Pre-composed layout “Blocks”

  • Drag and drop capability

  • Mobile views

  • Undo

  • Ability to switch Intent, Layout, Fonts, Colors, Patterns

Concept 3 with a revisions was roughly the direction that we ended up moving towards.

Templating

Below were the initial templates I drafted based on the three initial intents: Educate, Sell A Product, Lead Generation. At this point it was more a less an exercise to see what kinds of combinations could be created based off the intents and more about what components they could share across intents.

template-excercise.png

Finalized Component Library
This 20 piece component system was designed to work off of established text hierarchies and brand color applications. Areas marked in blue represent primary brand color application

A real use case…

Using Xenotees, a screen printing design shop based in Philly, I wanted to add context to these wires to get a sense of how brand application would be applied and how the templates took to the look and feel of a potential customer.

Sell templates
Showcase or promote goods/services

Signups/Giveaways
1 page lead gens, giveaways, promos

 

Event Templates
Promote an event or send a follow up 

 

Educate Templates
Feature more information about a product or service

The Solution

An intent based approach to creation...
The final version of Landing pages represents a leaner more focused version of the current MailChimp editor; everything from how they select their a template, customize settings and preview their design has been re-thought and simplified.

Customers start their journey by selecting an intent, there are total of 3: Sell Something, Promote an Event, or Educate, but they no longer are sorting through hundreds of pre-designed templates or wires. During the research phase I had listed and researched common reasons why one might need a landing page, these buckets were wide enough to cover most of those use cases.

Thereafter, I went through various design iterations, I had a goal to create a system that would relieve the user of having to decide from a bunch of templates or feeling as thought hey had to create their own from drag n' drop elements. I wanted to create components that were simple and flexible across intents.

Less things to choose, means a simplified decision making process. It also means greater odds of producing a well designed landing page. The design also accommodates customers who may not necessarily have a "brand" and supplements this by having a logotype of their business name and smartly applied style rules. Text relationships and brand color application rules are built in as defaults so all the user needs to do is make a few choices and edit copy.

While in the template, they can preview variants of block components easily by hovering over the component they want to change and clicking through variants on the toolbar. The effect is similar to the old paper game wherein 3 images are drawn on three separate pieces of paper and then cut in thirds to configure a new image. This ways the user is able to see variants live without ever having to "switch" the template.

Additionally, customers have the ability to toggle on and off components in the editor pane. We realized that customers may not necessarily have or need all of the components that come with a "Sell" or "Educate" template so we've made it easy for them to toggle on or off components.

What about customization?
Customers can upload their logo, change primary brand colors and/or fonts and but the rules in place for templates would determine where and how that gets applied. Once choices are made on color and type, the areas (marked blue in the system) will be where primary color selections would be applied. Additionally, each intent driven template has placeholder copy that serves to educate users on copy and what kind of content belongs where.

The Journey...

  • User Logs into to MailChimp

  • Selects Create Landing Page

  • Identifies their intent

  • Previews layouts

  • Select layouts

  • Customizes theme

  • Edits content

  • Previews and publishes


View prototype on Marvel

 

Related Projects

Landing pages was one small portion of a greater effort to create a larger omnichannel so that Mailchimp customers could have a way to track and grow their list. Small business owners are busy people, by providing all the tools they need under one umbrella, Mailchimp makes it easy for businesses to create, market, and measure their progress. Checkout the other features that I worked on…