The overlooked process in digital transformations
Style guides are a brand’s best friend. They exist as the north star to keep the brand consistent across an organization. However, 99 percent of the style guides we see have one thing in common: they are usually deeply rooted in print and not inclusive of digital properties. This gap causes a discrepancy when teams are left to interpret the style guide when building digital products. Elements such as fonts, colors, and buttons, don’t translate to digital as they would with print and leads to an inconsistent brand experience. Prior to building out any digital product, it is crucial to have a robust digital style guide to reference.
Here’s how you can build a digital style guide to stay true to the brand, meet accessibility guidelines and digital best practices, and maintain a consistent brand experience throughout all touchpoints.
Testing for Accessibility Within Your Brand
First and foremost, before you begin building out a digital style guide, you’ll have to evaluate your existing brand for accessibility. Accessibility is not just an ethical, inclusive principle, but a legal necessity due to the American Disabilities Act. According to the CDC, 1 in 4 U.S. adults live with a disability and that number will keep growing. Federal website accessibility lawsuits have tripled year over year since 2017.
To ensure you are designing with accessibility at top of mind, start with a brand audit to uncover the current landscape and determine how it can be improved from a visual design standpoint. For example, if you are working on a website redesign, look into the contrast of color usage between call-to-actions, typography, existing color palette, supporting design elements, icons and data visualizations. A great resource to check color accessibility is the Contrast Checker on WebAIM. This tool checks against WCAG AA and WCAG AAA with normal to large text and user interface components.
After you have completed testing for accessibility, you’ll then be able to start the digital brand expression process.
Digital Brand Expression
The digital brand expression is the process to develop a digital style guide. This process is crucial to ensure you are set up for success prior to building out your digital product. Activities during this process include performing a brand audit, defining brand personality and traits, curating mood boards and designing style tiles. Before we design out web pages, we need to understand and align on how far we can push the brand, what items we can and cannot update from a visual perspective.
Take the time to go through this process. It will help reduce churn and define what the digital experience should look like before digital assets are built. All members of the team, including key stakeholders, will be aligned and move forward in the same direction.
Brand Audit
During the brand audit, you’ll want to determine which elements of the existing brand will not translate well into digital and therefore will need to be modified. During the audit, review color, typography, brand patterns, and photography.
- Color: If there were any colors that failed during the accessibility audit, find a new accessible color that fits within the brand.
- Typography: Not all traditional print fonts translate into digital. Often times fonts can cause issues with browser compatibility, or don’t fully accommodate character-based languages. When this is the case, it will negatively affect the experience of your digital product.
- Brand patterns: Brand patterns, such as shapes, are used to supplement the visual look and feel. Make sure these will be easily translated over to digital.
- Photography: With photography, look for examples that are not only diverse, but have minimal background usage. This gives the design team the flexibility to overlay text and buttons on top of the image. For these cases, we recommend using the rule of thirds, which is common in photography and design to create a balanced look.
It’s important to perform a brand audit early on in the process to ensure approvals from key stakeholders are obtained if changes to the brand elements are needed. Getting approval to tweak the brand elements for your digital property may take time, but it is necessary. If you get pushback, provide documentation from the accessibility audit that showcases areas that need improvement. You don’t want users to get frustrated and leave your website due to something that could have been resolved early on in the process.
Once completed, the brand audit will give you the list of elements that will need to be redefined as you continue through the digital brand expression process.
Brand Persona and Personality Traits
A brand persona creates a framework to help us express the brand in many different ways while maintaining visual harmony and ensuring the integrity of the brand across customer touchpoints. Crafting a brand persona will transform ideas into compelling visuals and content that align with the brand. A great example is Tia. Their brand persona is focused on empowering healthcare for women. From design and content, Tia’s brand persona is bold and playful throughout their digital experience.
During this brand persona process, begin to define the brand personality traits by asking “If (company) were a person, who would it be?” Creating a word bank of 50 to 100 words pulled from your style guide and competitors can help provide a starting point in identifying the traits. From there, create a list of five to seven traits that best describe the brand, as well as a list of traits that should be avoided. This will help you craft personas that support a consistent brand while avoiding the traits that would take the brand in the wrong direction. Not only does this help the design team, but it also informs the content strategists and writers to ensure that the voice and tone of the experience fits within the brand.
Mood Boards
Mood boards are used to translate the brand personality into visual traits, and are a great way to quickly visualize ideas in order to get feedback on a certain direction prior to building out more specific designs for your brand. To create a mood board, pull together a collage of visual examples that match up to the brand traits. Mood boards are made up of color patterns, photos, and typography treatments. The goal of this exercise is to ensure that the brand personality and traits are visually translated and shared with key stakeholders to gain alignment.
Mood boards are a great way for the design team to explore different variations of how the brand could be digitally represented, which will help aid in the style tile creation. For example, if your brand personality was modern and bold, it would look visually different than modern and energetic.
Style Tiles
After you have feedback on the mood boards, you’ll use the top three to four options to build out style tiles. Style tiles are different from mood boards because you are designing with actual brand elements. They allow you to visualize the digital brand experience using typography, color, icons and texture before designing for specific pages. Use this time to get feedback and alignment from key stakeholders and iterate until you have a final design to guide sample page comps.
When building out the page comps, use actual copy and imagery to ensure that the style fits with the content. Take the time to determine which of the design elements could be pushed a little further. Be sure to establish the guidelines for elements, such as gradients and shapes, so there is clarity on when and how they are utilized.
By following the steps above, you’ll successfully translate the print focused style guide to a digital brand expression. Document these guidelines and use them as the north star for all your digital properties. This will give your teams the strong foundation they need to keep the integrity of the brand when building digital products. When done successfully, customers should have a seamless brand experience whether it’s in person, through print, or on the web.
Author: Julie Mannheimer, Senior Experience Designer
Julie Mannheimer is a Senior Experience Designer at Ogilvy. She is a multidisciplinary designer with a passion for transforming complex information into elegant experiences.
She brings over 8 years of experience in visual storytelling, digital brand expression, and design strategy to her role at Ogilvy, where she has partnered with companies including Aetna, Mikimoto, HundredX, IBM, and PwC.
