Get Inside Unbounce

Subscribe

Our Template Design Process at Unbounce

We’re always considering different ways to approach our template designs, and decided that our new partnership with Shutterstock was the perfect time to move in a photographic direction. The photography allowed us to aim for a more emotive experience. Something that would better showcase how you can make really beautiful pages in Unbounce. From a design standpoint it was something we were extremely excited about. Our design approach goes through five stages, in order to make us fast and efficient without sacrificing quality.

 

unbounce-themagnificentseven

Phase 1. Define

Industry

We knew instantly that we had to create templates for specific industries. Unbounce customers have specific needs when they execute their campaigns. Our goal was to cover as much ground as possible. Within Unbounce we could analyze the data that would give us insights into the most popular industries of our customers. Our customer success department was very helpful in identifying customer feedback that we have gotten regarding templates. Once we looked at all the data and customer feedback we decided to focus on the top seven customer industries that use Unbounce.

Content Requirements

All the information that we gathered resulted in a template matrix that broke down each industry based on use cases. By reviewing hundreds of landing pages including ones designed by our customers, we were able to define the content requirements for each industry vertical. In order to establish the artistic benchmark we reviewed current design trends. The content requirements we gathered shaped what we would design for. The final result was the breakdown you see below.

 

unbounce-templates-industry-matrix

 

Phase 2. Ideate

The Component Based System

Traditionally at this stage we would take all of the data we gathered along with our content requirements and start creating wireframes. Wireframes would inform the structure of future design. However, in this instance our timeline was very tight, so we had no time to go through countless wireframes and mock-ups to achieve our goal of seven magnificent templates. In the past we would find ourselves iterating through 50 versions of a template until we got the desired result. After these frustrating experiences we came up with a plan to avoid this rabbit hole, while still being able to ideate.

 

unbounce-component-based-system

We decided to create a component based system, adhering to our grid system, and containing elements that could be used during design production to speed up the process significantly. So we created a master document, with components that are universally shared across all landing pages. Elements such as: Headers, Features, Buttons, Forms, Testimonials, Benefits and Statements.

The master contained multiple designs of each component using different shape languages such as circles, squares, rounded corners and so forth. This would pave the way towards paper prototyping our industry templates. We could create basic template prototypes that would inform the structure and future design of each template.

The upfront time we spent on creating the component based system would save us plenty of time during the latter stages of high-fidelity design. Best of all, we could put a rough page together in minutes, using the printed components.

 

unbounce-paper-prototypes

Phase 3. Select

Design Cohesion

During our initial content requirements phase we looked through hundreds of landing pages within the industry verticals. We identified common visual patterns that would inform the future art direction of each template. We wanted to brand each template like it was a real place. A place that existed in everyday life.

The art direction for each industry vertical was defined by the creation of an identity accompanied by a colour palette and typography choices.

 

unbounce-color&typography

Phase 4. Make

Composition & Conversion Centered Design

Its time to create the templates. This is where the component based system is very useful. With the already established art direction, all we have to do is create a cohesive landing page, that adheres to its shape language. Quick adjustments can be made on the fly regarding composition and modify any components that require it or create custom components that are necessary for the industry vertical.

As mentioned before, this saved us plenty of time and limited the amount of revisions and versions of a particular template. Once we felt satisfied with the composition of a template it was time to address its conversion capability. Everyone of our templates, has to go through the Conversion Centered Design (CCD) checklist. We traditionally create a side by side comparison for each template, when going through the checklist. This practice allows us to clearly see the shortcomings of the original composition and the improvements generated by the Conversion Centered Design checklist.

 

Conversion Centered Design Checklist

  1. Elements: Are there the following: USP, hero shot, benefits, social proof, CTA
  2. CCD Encapsulation: Is there a noticeable container that houses the form (if it has one)?
  3. CCD Directional cues: Is there at least one graphical element that directs attention to the CTA?
  4. CCD Contrast: Does the CTA jump out by virtue of being in stark colour contrast to the rest of the page?
  5. CCD Whitespace 1: Is there a clear and breathable path from the headline to the CTA?
  6. CCD Whitespace 2: Is the CTA (button or form area) separated from the rest of the page by a surrounding area of white space?
  7. CCD Try before you buy: Is there a way of demonstrating a preview? (Not always applicable – but should be considered). Previews can include: PDF, HTML chapter, slideshare embed, video, set of images.
  8. CCD Social proof: Are there social proof elements on the page?
  9. Congruent Design for Social proof: Do the social proof elements connect to and enhance the other page elements? In other words, are there proof elements positioned in proximity to important page elements, rather than just in their own section?
  10. Information hierarchy: Is your eye naturally drawn to the headline first, and then to the CTA?
  11. Photography: Does the photography emote the goal of the page? Success, happiness, professionalism… If there is a photo of a person, are they looking either directly at you or at the CTA?
  12. Attention Ratio: Is it very clear that there is only 1 interactive element on the page? (Note: it’s okay to have your CTA repeated throughout the page – it just has do the same thing in every instance).
  13. Purpose: Can I look at the page and understand what the goal of the page is?

 

unbounce-compositionvsccd

In Case It Looks Easy

Oli jumping in now

Denis and I battled and bended, our ideas and resolve, to breaking point several times, because template design is so much harder than you think. We drove each other crazy. And I take full responsibility for that.

It should do this, it shouldn’t do that. Why?

And then, based on the inspiration I gained from reading The Checklist Manifesto << read it, it’s effing amazing…

We got together and created the CCD checklist above, which allowed us to let go of the back and forth and just start applying rules.

It changed EVERYTHING.

Design is a funny thing. It can be the most frustrating thing in the world, and then when it works, it’s the most beautiful thing in the world.

So. Creative block figured out. We were still faced with a looming deadline (super important because it hinged on the Shutterstock partnership announcement).

But all we had left to do was get the designs into the Unbounce system, ready for customers to use.

Pause.

We had a *sense* of how complex this might be, but until you write things like this down, you really have no clue.

The panoramic photo below is a shot of our 20ft whiteboard with every checklist item for each of the templates.

Not gonna lie. This saved our asses. It acted as the ultimate production/QA mind slap.

Every checkmark gave a feeling of relief and achievement. And believe me, when there are 154 squares that need to be filled in, each one feels amazing.

unbounce-production-checklist

This level of visibility was the ultimate creative catalyst. Watching Denis on fire is a #smilealot thing. Checklist items filling themselves in. Tipping point reached.

Back to Denis…

Phase 5. Analyze

Within Unbounce we are able to track template adoption rates. It gives us a great indicator into the popularity of any given template over time. Within the first week we can already tell which templates are rising in popularity.

1. Lockwood – 166 landing pages.

2. York – 160 landing pages.

3. Henton College – 147 landing pages.

4. Yuli – 140 landing pages.

Addressing under-performing templates is just as important. Customer surveys and interviews can identify problem areas or establish new requirements for the next set of templates.

Repeat
Our goal is to make the experience of using templates easier for our customers, and provide them with a useful library for their marketing campaigns. As designers, we have to provide better template solutions every time we repeat the process. At Unbounce, we can continually strive to improve our template offering.

A Little bit of <3

unbounce-designprocess-thumbnail
Once in a while you get caught up in deadlines and you forget to follow the process. This poster slaps me right in the face every day and reminds me that design is not rainbows and unicorns. Maybe you want a reminder hanging over your desk too?

You can download a 11X17 pdf with full bleeds and print it for yourself.  Just a little gift from us at Unbounce to you.

Cheers,
Denis Suhopoljac
Art Director

P.S. We Are Hiring!

If you are a designer and you enjoyed reading about our process, come and join our team.

The Unbounce Creative team is looking for a digital designer. A creative role that focuses on crafting compelling interactive experiences, with an occasional pivot towards motion design. We are looking for a designer that loves to tell a story in the digital world.

>> Apply Here