coca-cola digital experience framework - arielle...

[email protected]

Coca-ColaDigital Experience Framework

[email protected] Coca-Cola Digital Experience Framework | 2

PurposeIndexThe Digital Experience Framework serves as a reference point for all employees involved in creating The Coca-Cola Company (TCCC) branded websites, mobile applications, and tablet applications.

The goal is to provide a unified and seamless user experience across technology and service providers, minimizing barriers to user adoption and maintaining a consistent experience, interaction, and visual design standard throughout the company.

Typography

Logo Lock-Ups

Buttons and Links

Clear Labels and Buttons

Icons

Color Palette

Color Choices

Color Contrast

Images

HTML

Grids

Navigation

Footer

Scalable: The digital experiences framework allows teams to create across the enterprise ecosystem of sites and applications. They are positioned to feel compelling and authentic to the individual user while providing a scalable platform for large audiences across any device platform.

Standardized: A standardized experience aims to maintain the equity of the Coca-Cola brand by creating standards that connect all of the company’s digital platforms as a whole, while still delivering experiences unique to their context of use. Our work is aligned to correlate with the innovative yet historically distinct image of Coca-Cola.

Service Oriented: The framework focuses on creating value for individual experiences as well as the overall TCCC digital experience.

3

4

5

6

7

8

9

10

11

12

13

14

15


Typography

Headers and Subheaders

Body Copy

Arial BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

ArialABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Gotham BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Helvetica NeueABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz0123456789

SecondaryBody Copy can use Helvetica Neue as a secondary option for strict adherence to the brand standards.

SecondaryHeaders and subheaders can use Gotham Bold as a secondary option for strict adherence to the brand standards, for example in presentations and large projects.

PrimaryBody Copy uses Arial as the preferred font, both as regular and bold options.

PrimaryHeaders and subheaders use Arial Bold as the preferred font.

Font size should be used to establish a clear content hierarchy within a page. Headers should have a larger size than subheaders, which should have a larger font than body copy. Header, subheader, and body copy font should all use consistent font color on your site.


Logo Lock-Ups

Logos for internal sites should share a consistent look and feel to indicate being part of the Coca-Cola ecosystem of sites and follow the company Global Design Internal Branding guidelines.

Logos should go in the top left of the site (above the main navigation) and should consist of the Coca-Cola logo followed by the name of the site and an optional graphical icon. The site name should be short and concise, but still convey what the site is about.

Logo font should be VAG Rounded Standard, half the vertical height of the Coca-Cola script font. Depending on the logo size, the font point size will vary.

When used in site headers, logos should be clickable to return the user to the homepage of the site.

Site Name

Site Name

https://prod-wp.nonpub.coke.com/wp-content/uploads/sites/17/2015/05/TCCC_System_Lockups_Horizontal_Template_SingleLine_Standard.pdf


Buttons and Links

When possible, buttons should only be used in cases where the user is taking some actions, and not when navigating from one page to another. • Color, size, and usage should be consistent within website • Font should match the location in which it is used • Rounded corners and a flat color should be incorporated • Contrast with background color is important. Use thick outline for buttons that do not contrast with background • Text should have a mix of capitals and lowercase letters and should be descriptive of the action it will start • On hover or selection, button should display as inverse of normal state (see example below)

Selection Active

HoverDefault

Links should only be used in cases where the user is navigating from one page to another (within the site, to another internal site, or to an external site). • Color, size, and usage should be consistent within website • Color chosen for links should not be used for any other text on site • Font should match the location in which it is used • Mix of capital and lowercase letters should be used and should be descriptive of where link will take user • On hover, links will display as an underlined state

Link Hover


Clear Labels and ButtonsFields in forms, buttons, headings, etc. should be meaningful for users to provide a clear, concise, and accurate description of the content. This is important both for general readability/understandability but also for those using screen readers or other assistive software.

vs.

vs.

Unclear Labels

Unclear Button

Clear Labels

Clear Button

In another example, a form field in which the user needs to provide their email address should be labeled “Email” or “Email Address.” A button to submit information should be labeled “Submit” (rather than “OK” or “Save”).

OK Submit


Icons

Icons used in internal sites should come from the same library and share a consistent look and feel to indicate being part of the Coca-Cola ecosystem of sites.

These icons and The Coca-Cola icon font can be downloaded at https://interactive.coke.com/resource/media/

Link Download Upload Lock Unlock Search Embed User Print Email Help Info

Alert/Warning

Icons appearing in context next to text should go directly to the left, with no intervening text or images between the icons and its associated word.

Email Bookmark Help Print

Refresh Settings Zoom In Zoom Out List View Check Bookmark Languages Home Heart Mobile


Color Palette

The primary color palette is based on core Coca-Cola colors: Coca-Cola Red, Coca-Cola Platinum Gray, and Global White.

There is also a range of secondary colors - reds, blues, and grays- that can be used to contrast and complement the core colors.

Third-party sites should use the colors shown. Other color schemes that match the hue of the colors provided may be used but would need to be reviewed by the UX & Digital Strategy Team.

Coca-Cola Red should be used for all logos, symbols, and primary typography.

When placed over solid strong colors, white versions of logos, symbols, and primary typography may be used.

Platinum Gray should be used for accent colors and, in some instances, typography.

Coca-Cola RedPMS = (no equivalent)C = 0, M = 100, Y = 100, K = 0R = 244, G = 0, B = 0Hex = F40000

Primary Colors Primary Colors

Secondary Colors Secondary ColorsGrayPMS = (no equivalent)C = 5, M = 4, Y = 4, K = 0R = 238, G = 238, B = 238Hex = EEEEEE

Coca-Cola Platinum GrayPMS = 432 CC = 23, M = 2, Y = 0, K = 77R = 69, G = 85, B = 96Hex = 455560

Dark GrayPMS = 427 CC = 12, M = 9, Y = 10, K = 0R = 221, G = 221, B = 221Hex = DDDDDD

Global WhitePMS = (no equivalent)C = 0, M = 0, Y = 0, K = 0R = 255, G = 255, B = 255Hex = FFFFFF

Off BlackPMS = Black 6CC = 73, M = 67, Y = 66, K = 83R = 16, G = 16, B = 16Hex = 101010

BluePMS = 534 CC = 96, M = 78, Y = 33, K = 20R = 32, G = 65, B = 106Hex = 20416A

Darker redPMS = 1805 CC = 21, M = 100, Y = 98, K = 12R = 178, G = 32, B = 37Hex = #B22025


Colors should not be the only means of communicating information. Other identifiers should be used in conjunction – for example, text can work (names of statuses, shapes, letters within the circles, location, etc.).

Color Choices

Test in GrayscaleWhen designing a website, test the site by converting everything to grayscale and ensure that all content is still meaningful.

Avoid Certain Color CombosFor users with color deficiencies, using monotone color schemes is not ideal. Certain combinations of colors should be avoided – red on green (or green on red); blue on green (or green on blue); yellow on red (or red on yellow). Strong contrast is important for those with total color blindness.

To a color blind user:To a color-sighted user: A better option:

Status Project Name

complete

behind

complete

on track

Project Name

Project Name

Project Name

Project Name


Color Contrast

white (#FFFFFF)

black (#000000)

medium gray (#999999)

There is excellent contrast between this black text and its white background.

There is too little contrast between this black text and its medium gray background.

There is too little contrast between this medium gray text and its white background.

There is too little contrast between this medium gray text and its black background.

There is very good contrast between this white text and its black background.

There is too little contrast between this white text and its medium gray backgorund.

Colors should provide sufficient contrast to improve readability of content within a website. This is also relevant for those with lower resolution mobile devices, and is especially critical for those with impaired or low vision.

Web Content Accessibility GuidelinesText (and icons) should have a minimum contrast of 4.5:1 relative to its background, according to the WCAG Guidelines (http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).

Contrast Checking ToolUse this tool to check that color contrast is above the WCAG-prescribed 4.5:1 contrast ratio: http://snook.ca/technical/colour_contrast/colour.html

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

http://snook.ca/technical/colour_contrast/colour.html


Images

Use Alt Attributes for Images

Images should have alt attributes (sometimes called alt text or alt tags). Alt attributes represent images in any situation where they can’t be seen or displayed.

This includes:• A person using a screen reader who can’t see the image• A search engine scanning a page’s content• An email client that has blocked the loading of images• A broken image

Alt attributes should be descriptive of the image they represent. If the image contains text, you can often use that in the alt attribute’s description - but avoid using images that contain text as they are inaccessible for blind users who utilize screenreaders.

If you must use images in place of text, they should be optimized to the device and different screen sizes (break points). Otherwise, use text instead of graphics when possible, especially when the image contains text.

Image QualityWhen images containing text are enlarged, they can often become pixelated and, if they contain text, difficult to read. This is a problem for some users with low vision who use programs that enlarge elements on the screen. To eliminate this issue, use high resolution images where possible. If using a textual image, consider replacing that with just text.

For example, below is a low quality image of text, blown up:


HTML Structure

Ordering of HeadingsOn a lengthy web page, users often scroll quickly and look for headings to understand the structure of the page.

It’s important to structure a site’s HTML with headings in order of importance, as this helps users understand where they are on a long page. For example, the site’s title might be an H1 tag (showing that it’s the most important heading), and its subheads would be H2 tags. H1 tags are bigger and bolder than H2 tags, so the page becomes easy to scan.

Assistive Technology and Low-Vision UsersA clear HTML structure using heading tags is especially important for low-vision users. They use assistive technology that reads a web page’s heading structure aloud. But if headings are just bolded or made larger (instead of being tagged H1, H2, etc.), screen readers don’t recognize them as headings, and low-vision users can’t navigate that site.

Checking Your HTML’s AccessibilityTo quickly understand and check your HTML structure, “tab through” your site. This will show you how your site communicates to users with assistive technologies.1. Load or refresh the page2. Click your keyboard’s “tab” button repeatedly, watching the cursor focus change3. Compare the actual order of the tab structure to the ideal order - First, focus should be on your logo - Next, focus should navigate through the main menu - The focus should tab through all H1 headings next, followed by H2, H3, etc.

To validate your page, go to: http://jigsaw.w3.org/css-validator/ and enter the URL of your website.

http://jigsaw.w3.org/css-validator/


GridsThe grid allows for columns to be created. Columns can be further divided. The grid allows for a large range of layouts and templates without losing the standardized structure.

Frameless Grid and BreakpointsThe starting point is a universal frameless grid, divided into sixteen 60px wide vertical units with a 20px gutter between. This has been created to align with dimensions for large (laptop/desktop), large/medium (tablet landscape), medium (tablet portrait/mobile landscape), and small (mobile portrait) screen sizes.

Break points are defined in accordance with this grid, with each break point reducing the size of the grid by 4 columns (from 16 columns at full width to 4 columns on mobile).

BaselineThere is a baseline grid to help with vertical alignment of page com-ponents. Strict adherence to the baseline isn’t necessary for all typography but it does help to create vertical rhythm on the page.

8 px

Baseline

Frameless Grid


Navigation

Desktop, or Full ViewOn full view, navigation should display across the top of the screen, directly under the website logo. The navigation menu should be ordered (from left to right) in order of importance and use. On scroll, the top navigation should stick, creating persistent navigation, regardless of where the user is on the page.

Site NameNavigation 1 Navigation 2 Navigation 3 Navigation 4 Navigation 5 Navigation 6 Navigation 7 Navigation 8 Navigation 9

MobileOn smaller breakpoints, longer navigation menus will display on the left of the screen, hidden from view, and toggled open and closed via a clickable icon. That icon should display to the left of the website logo and be three parallel horizontal lines. When open, the items should be grouped from top to bottom, matching the same order (left to right) as before.

Left hand menus with sub navigational items should be accordion style, with clicking on a main navigation item expanding to show sub-navigational items below.


Footer

All internal websites should have a footer.

Footers will display in the same background used for the main site, separated by a thin, light gray dividing line.

Footers should consist of the copyright icon and year, followed by ‘The Coca-Cola Company’. Other text or links can be added to the footer, following the guidelines above for font type, color, and size.

[email protected]

coca-cola digital experience framework - arielle...

Documents