EMAIL BRAND GUIDELINES - Interstate Batteries

EMAIL BRAND GUIDELINES

TONE Keep copy concise and to the point. Use facts, not assertions. Use active voice. Imagine you're writing a note to a good friend and all you have is the back of a business card: Every word counts. Headlines should be short and impactful. Be clever if you can, but don't go overboard. Friendly Confidence. Caring, likeable and trustworthy with a whatever-it-takes attitude Friendly and positive language with conversational tone Mix in some personality Can make someone laugh or smile Don’t overdo the humor if it distracts from the intended message 2

FIRST IMPRESSION COPY Appearing before a subscriber opens From name – should always be Interstate Batteries when speaking to subscribers outside the enterprise. Subject lines – keep short but coherent and descriptive. Do not be misleading in any way. Mobile character limit is 45 characters. Desktop limit is 55 characters. Preview text – Can be a continuation of the subject line but should also be able to stand on its own. Make it a concise sentence that explains what the email is about. 3

CONTENT Focus your message. Some of the most effective emails have one clear message. If you have multiple messages, try breaking them up into a series of emails. Prioritize content from top to bottom. Most people spend less than 15 seconds reading marketing emails, so keep it short and sweet. Use headings and bulleted lists to divide content into sections that are easy to understand. This helps scanners and skimmers. Link to your page on your website or another site where subscribers can learn more using a CTA when you have a lot of information to convey. Clearly define sections by using dividers or borders when your email features distinct types of content. Add background colors to the header and footer to visually separate them from the body content. 4

GRAPHICAL VS. HTML TEXT Strive for a good balance of text-to-image ratio. 80:20 is best practice 80% being text and 20% images. An image-heavy email will increase the chances of being flagged as spam. Most email clients block images by default. Incorporate text that summarizes the main message point. Some text, especially the main call to action, should be viewable upon opening the email even if the images are shut off. TEXT-IMAGE RATIO IN EMAILS 20% Images 80% Text 5

FONT Arial when using HTML, Avenier can be used in imagery only 25px – for headlines (bolded) 17px – subheads 15px – paragraph 17px – button text, limit of 25 characters. 6

LOGO Make sure the reader knows who the sender is by putting the Interstate logo on the top left. Do not use duplicate logos. The logo only needs to be in the email once. Logo should center in mobile view. 7

IMAGES There should be a hero image when applicable and supporting images where it makes sense. Images should not contain a lot of text. Any text should only be on the hero used for a headline or campaign tagline. Animated GIFs – Use these sparingly, when there is something special in your email you want subscribers to pay special attention to. Subscribers will ignore emails if GIFs are used too often. GIFs are most effective when it has a purpose to help you meet emails goals. Interstate logo: 70% of 222px width. Co-branded logos: 10px in between the Interstate logo and co-brand. Logo should be in proportion to the Interstate logo. Hero images: 700px x 250px Supporting images - Single column: 700px x 100px - 1/3 column: 200px x 200px - 2 columns: 341px x 189px - 3 columns: 300px x 300px 8

IMAGES Resolutions File type: Save images as a .jpeg, .png or .gif format before using it in your code. Color profile: Images need to be in RGB color values not CMYK color values. CMYK color values are for print and won't render correctly online. DPI: Set images to maximum quality with a resolution of 72 dpi. For the best experience on a retina display: Double the size of your image. For instance, if you have a 700px wide header graphic, upload a 1400px version. File size: GIFs should be under 199 kb. All other images should be 50 kb or less. 9

CTA – CALL TO ACTION Keep the number of CTAs you have at a minimum. Focus on where you want the subscriber to go and remove any unneeded CTAs. Bulletproof Buttons Buttons should be large enough for accessibility in mobile. Character limit of 25 or up to 4 words Secondary: White with #0a8a00 border with border radius of 3px and border weight of 2px. Underline on hover. 44px tall, 60% width when full column width. 100% when in multiple columns. Tertiary: Text link with text color as #0a8a00. Primary: Solid Green (#0a8a00) with white text, border-radius of 3px. Underline on hover. 10

CTA – Call to Action Hierarchy Your primary CTA should be close to the top of your email content. Secondary CTAs should be below your primary links. Since tertiary links are text only, you may put them above your primary if they are within a paragraph. If a tertiary link is called out on its own line, it should be below the primary and secondary CTAs. PRO TIP: Use of white space around the primary and secondary CTAs will help your CTA stand out. 11

CTA – CALL TO ACTION Language The CTA should motivate people to take action. Tell them exactly what you want them to do. Let them know exactly what they’re getting into, use subcopy if necessary to provide context. Do: Specific, action-oriented language Don’t: Use vague non-action oriented language like “Click Here” that is not inclusive of those viewing email on their phones or devices. GOOD CTAs BAD CTAs Learn more See how your business benefits Click here Read more Get results now Click now Curious? Read on Start now. Get results. Buy Now Download the eBook I’m ready to see a change Download now Give us your feedback Submit Keep reading Register now Try Now Read the full story Book your tickets Hear from our CEO I’m coming! Find out how I’ll be there! Start today Count me in! Here 12

ALT TEXT Images – Avoid ALT text that is redundant with live text in the email. Don’t use ALT text that doesn’t add value or context. For example, using “Photo of a sunset” as ALT text may describe the image, but it isn’t helpful to the subscriber. Icons – If the icons are small, use a single letter. If they are large, follow the usage of images ALT text. 13

TEMPLATES

GENERAL TEMPLATES No image – 1 column 1/3 column - newsletter 1 column with hero major content 2 supporting columns 15

GENERAL TEMPLATES 16 Hero main content With 2 & 3 columns supporting Hero – newsletter

BREAKOUT TEMPLATES Usage: Only use this design for emails we want the subscriber to pay special attention to. Because it is meant to stand out, use it sparingly. 17

OTHER CONTENT

PERSONALIZED CONTENT Use personalization when appropriate to add a special touch to your emails. Types of personalization include: First Name Sales Rep Info Last Name Email Address Company Name Store Number Title Account Number Business Consultant Name Industry 19

DYNAMIC CONTENT Dynamic content should be used when you have one email but many variables. The content would change based on subscriber data so that the email is tailored to the reader. Examples of dynamic content would be: Store info for an email going to multiple stores Targeted based on web behavior Gender Age Geo location Weather 20

COLORS

COLORS ADA Compliant IB Darker Green Hex #0A7A00 RGB 10, 122, 0 IB Web Green Hex #0A8A00 RGB 10, 138, 0 Use for text CTAs on background color #eeeae0 Use for CTAs on white backgrounds Dark Red IB Red Hex #98121B RGB 152, 18, 27 Use for text on background color #eeeae0 Hex #BF1722 RGB 191, 23, 34 Use on highlighted text on white backgrounds Gray Accent Color Gray Text/Background Use for background color only Use as a background only or for fine print Hex #EEEAE0 RGB 238, 234, 224 Hex #BF1722 RGB 103, 103, 103 Text Hex #1D1D1D RGB 29, 29, 29 Usage: for text only 22

Download the eBook. Download now. Keep reading. Read the full story. Hear from our CEO. Find out how Start today. See how your business benefits Get results now Start now. Get results. I'm ready to see a change: Give us your feedback Register now Book your tickets I'm coming! I'll be there! Count me in! Click here: Click now. Buy Now .