Designing Personalized Experiences For Your Brand

Transcription

1 THE ULTIMATE GUIDE TO: Designing Personalized Experiences For Your Brand Ashton Landry & Amie Levasseur THE PERSONALIZATION SUMMIT 2017

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! 01 Collaboration The 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. Personalization Roles Executive Sponsorship Project Management Development PLANNING FOR PERSONALIZATION: CHECKLIST Access to your current brand styles/guidelines Campaign Building Strategy User Experience Access to your website styles (colors, fonts, buttons) Photography and imagery styles Target launch date Review campaign message types Web Design Content QA Other 2

3 Personalization Creative Brief 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 Pop-up Infobar Callout Inline Content In-Page Edit Headline Copy Body Copy CTA Copy CTA Style Alternate CTA Copy CTA Style Close Element Exclude / Include Style Campaign Notes 3

4 02 Copy It 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 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. INFOBARS 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. 4

5 CALLOUTS 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. INLINE MESSAGES 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. IN-PAGE EDITS 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. 5

6 Brand Styles Checklist TYPOGRAPHY 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 6

7 03 Consistency While 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. Understanding Your Grid System 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. 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. Standardizing Sizes Planning standard sizes is easier if you base it on your grid system. Here are our recommendations for each type of experience. LARGE MAX 1/2 SITE CONTENT AREA 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. MEDIUM MAX 1/3 SITE CONTENT AREA 3 : 2 ASPECT RATIO 7

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. 100% SITE WIDTH MIN 40PX MAX 90 PX CALLOUTS MAX 1/2 SITE CONTENT AREA 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 LARGE 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. MEDIUM SMALL MAX 1/4 SITE CONTENT AREA 3 : 2 ASPECT RATIO BUTTON HEIGHT 8

9 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. FULL WIDTH 2 : 1 ASPECT RATIO 2 : 2 ASPECT RATIO 1 : 1 ASPECT RATIO 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. FULL WIDTH MATCH AN EXISTING GRID LAYOUT 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. 9

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 X X Full Background Sample Header Sample Header Detailed information, Form Field, or Form Field Form Field Sample Header X Sample Header That is Longer Sample Detailed Information That is Longer X Sample Header Form Field Form Field X 10

11 INFOBARS Center your content and plan on the sides expanding for larger browser windows. Sample Header Sample Detailed Information X If text is all on one line, consider adding an extra space or two to differentiate the Header from the details. Don't be afraid to use a transparent PNG and go off the edge of the top or bottom of the infobar. Sample Header Sample Detailed Information No Thanks For larger infobars, try to not exceed 2 lines of text. If you do, your infobar is probably too tall. Sample Header That is Longer Sample Detailed Information That is Longer CLOSE CALLOUTS Sample Header Detailed Information Detailed Information Detailed Information Sample Header Sample Detailed Information That is Longer Sample Detailed Information That is Longer Sample Detailed Information That is Longer Detailed Information Sample Information 11

12 INLINE MESSAGES Section Header Video Title or Product Name that is Longer Title or Product Name that is Longer Title or Product Name that is Longer Title or Product Name that is Longer IN PAGE EDITS 12