THE ULTIMATE GUIDE TO: Designing Personalized Experiences For Your...

THE PERSONALIZATION SUMMIT 2017

Designing Personalized Experiences For Your Brand

THE ULTIMATE GUIDE TO:

Ashton Landry & Amie Levasseur

http://www.evergage.com/

2


Designing Personalized Experiences For Your Brand

Have you ever seen or created a personalization campaign that didn’t fit with its brand?

Effective design in personalization not only elevates your campaign’s visual aesthetic but also enhances the user experience, helping you drive conversions, improve engagement and grow loyalty.

We’ve created a three-part process that will enable you to work closely with your team to develop a cohesive vision, taking your personalization campaigns to the next level from concept to completion!

CollaborationThe initial planning phase begins with Collaboration.

We recommend setting up an initial kick-off meeting

with key team members to review your personalization

goals and map out a plan. We have included a sample

set of items below to review along with a team chart

so you’ll know who to collaborate with during the

process. Additionally, we’ve included a sample outline

of personalization specifications for your reference and

inspiration.

PLANNING FOR PERSONALIZATION: CHECKLIST

Access to your current brand styles/guidelines

Access to your website styles (colors, fonts, buttons)

Photography and imagery styles

Target launch date

Review campaign message types

01Personalization Roles

Other

Campaign Building

Strategy User Experience

Executive Sponsorship

Project Management

Development

Web Design Content QA

3


We recommend that you work with your Personalization Team to create a reusable request form that includes

all the details needed to design a campaign. See an example below and customize this to your needs.

Project Name

Due Date Level of Effort Priority

Campaign Description and Purpose

Goal

Measure of Success

Target Page(s)

Location on Page

Device Types

Message Type

Headline Copy

Body Copy

CTA Copy

CTA Style

Alternate CTA Copy

CTA Style

Close Element Exclude / Include Style

Campaign Notes

Personalization Creative Brief

In-Page EditCalloutInfobarPop-up Inline Content

4


Copy

A Pop-up is a message that overlays

content on a website or app to

interrupt a user, sometimes with a

lightbox, and typically used to drive

a critical action or relevant content.

02It’s critical to copy and clone your brand’s existing styles to ensure that your personalization matches your

visual aesthetic. We recommend working off an existing guide if one is available. If you don’t have a company

style guide, you can collaborate with your team to create one.

Below we’ve outlined the different types of personalization experiences and provided examples so that you

can use this for inspiration for your own personalization style guide.

Personalization Message Types and Examples

POP-UPS

An Infobar is a message contained

in a persistent but non-intrusive

header or footer bar, typically used

to communicate time-sensitive

information or critical notifications.

INFOBARS

5


A Callout is a message tied to small

sections of content, displayed on hover

or click, commonly used to highlight

features or secondary content on a

website or app.

An Inline Message is a personalized

block of dynamic content inserted

onto a website or app used to deliver

content based on a visitor’s behavior

or actions.

An In-Page Edit is an experience

created by replacing existing parts of

a web page, such as text or images,

with relevant and personalized content.

CALLOUTS

INLINE MESSAGES

IN-PAGE EDITS

6


Brand Styles ChecklistTYPOGRAPHY

Font Family Font Weight Alignment

Font Size Font Color Case: Caps/Title/Lower

Typography Tags (H1-H4 etc.) Line Height Other:_____________________

BACKGROUND

Border Color Corner Rounding Background Color

Border Thickness Background Color Background Size

Other:

BUTTONS: CLOSE BUTTON STYLE

Location: Icon: ‘X’ Text: ‘X’

BUTTONS: PRIMARY AND SECONDARY

Special Icons Text Alignment Background Color

Type Case Corner Rounding

7


ConsistencyWhile building beautiful designs that fit your brand aesthetic is critical to the success of your personalization program,

a more subtle visual element is consistency. It’s a good idea to have standards in place for message sizes, layouts,

placements, color choices and so on, to create an experience that feels thoughtful and seamless.

03

Full Width

Half Width

Thirds

Quarters

We will use this information to

establish standard sizes for each

type of personalized message in the

next section.

Understanding Your Grid System

Standardizing Sizes

Your website grid, whether a standard 960/1200 system or a non-standard system, will provide you with many insights

into how best to standardize your personalized experiences. Study how your grid works at popular browser sizes

and take note of the various widths you are seeing. You can use this information to create standards for sizing in your

personalization campaigns. As you evaluate your grid system, note some of the basic widths below.

Planning standard sizes is easier

if you base it on your grid system.

Here are our recommendations for

each type of experience.

POP-UPS

Find a ratio that works for your

specific content needs. You might

use a 3:2 aspect ratio for large

pop-ups as shown here, while your

medium pop-up might work better at

a 3:1 aspect ratio. Try various content

layouts and see what works best.

LARGE

MEDIUM

MAX 1/2 SITE CONTENT AREA


3 : 2ASPECTRATIO

8


INFOBARS

Infobars stretch the entire length of a browser, beyond your website or app’s content area, so the key measure is height.

Infobar height should be somewhere between 40px and 90px. Any smaller will be difficult to read and not allow enough

padding for text, and any larger will start to take up too much valuable real estate.

CALLOUTS

Callouts are tied directly to site

content, such as an ‘i’ icon for more

information, and are generally

intended to provide supporting or

secondary content. It’s important to

note that typical callout sizes will be

in the small-to-medium range and

should have very simple content,

perhaps only text. Large callouts

can be used, but sparingly, and

shouldn’t be a wall of text. Large

callouts are ideal if you have both

image and text. Another important aspect of callouts are the interaction rules. You should determine if a callout is

accessed by hovering or clicking (or tapping for mobile). Additionally, callouts should not contain external links, such as

call-to-action buttons or text with hyperlinks. It should standalone as a tooltip would.

MAX90 PX

100% SITE WIDTH

MIN40PX

LARGE

MEDIUM



SMALL BUTTONHEIGHT

3 : 2ASPECTRATIO

9


A more traditional approach to inline messages is to match an existing grid layout on your site, such as blog content or a

product grid, and incorporate with the same header and content treatments.

INLINE MESSAGES

Inline messages are one of the most streamlined ways to add personalization to your website or app, so it’s critical to fit

it with your brand perfectly so it blends in. The easiest way to do this is to mimic areas of your site that already exist, or

create new sections just for personalization campaigns. Below is an example of a grid layout, which is on-trend right now.

IN-PAGE EDITS

For in-page edits, simply match the section of the website you are replacing. Important considerations for this

personalization type will be length of variable data, including text or numbers, and variable imagery that is in the same

aspect ratio to make building these messages simple.

MATCH ANEXISTINGGRID LAYOUT

FULL WIDTH

1 : 1ASPECTRATIO

2 : 2ASPECTRATIO

FULL WIDTH

2 : 1ASPECTRATIO

10


Creating a Template Library

One of the biggest challenges a UX designer faces is content organization. For personalized experiences, a good rule

of thumb is “simpler is better.” What’s the one thing you want the viewer of your campaign to do? Download an eBook?

Complete a shopping cart order? View a product? Whatever it is, pick that one thing and emphasize it! The rest of the

personalization content should be subtle. If there are too many options, or places to click, you could cause confusion and

prevent a visitor or user from taking this critical action. It’s ok to have a secondary action, such as “No Thanks” or “Go to

Another Page,” but the primary action you want them to take should shine the brightest.

Below are some sample templates to inspire your own library, along with helpful notes for getting the layouts just right.

POP-UPS

Full Background Image

Sample Header

CTA Button

X

Detailed information, Form Field, or Image

Image

Sample Header

CTA Button

X

Sample Header Thatis Longer

Sample Detailed InformationThat is Longer

CTA Button

X X

Sample Header

CTA Button

Form Field

Form Field

Image

Sample Header

CTA Button

X

Form Field

Form Field

11


For larger infobars, try to not exceed 2 lines of text. If you do, your infobar is probably too tall.

CALLOUTS

INFOBARS

Image

Detailed Information



Sample Header

Detailed InformationSample Detailed InformationThat is Longer SampleDetailed Information That isLonger Sample DetailedInformation That is Longer

Sample Header

Sample Information

CTA ButtonImage

Center your content and plan on the sides expanding for larger browser windows.

If text is all on one line, consider adding an extra space or twoto differentiate the Header from the details.

Sample Header Sample Detailed Information X

CTA ButtonImage

Sample Header Sample Detailed Information

Don't be afraid to use a transparent PNG and go off the edge of the top or bottom of the infobar.

No Thanks

ImageSample Header That is LongerSample Detailed Information That is Longer

CTA Button

CLOSE

12


IN PAGE EDITS

INLINE MESSAGES

Image

Title or ProductName that isLonger

CTA Button

Image


CTA Button

Image


CTA Button

Image


CTA Button

Section Header

Video

THE ULTIMATE GUIDE TO: Designing Personalized Experiences For Your...

Documents

Transcript of THE ULTIMATE GUIDE TO: Designing Personalized Experiences For Your...