Brand Identity Design & Maintenance
For each new mobile app, I conducted a UI analysis and accessibility review of the brand website and brand guidelines to align the app's digital presence with the brand's identity. This involved adapting print-specific brand guidelines to the digital realm, ensuring cohesive color and type identities while adhering to accessibility standards through contrast analysis, and reusable font tokens.
Crafting a Unified Digital Presence for PPG’s Global Brands
PPG Industries owns numerous architectural coatings paints and stains brands internationally. When the creation of a new app was requested for one of PPG’s brands, the first step was to create a brand identity within our working design system. A brand identity includes color identity, color tokens, type identity, type tokens, and logos.
Conducting UI Analysis of Brand Guidelines and Websites
Although the brands typically provided me with Brand Guidelines, they were often print-specific guidelines. Therefore, it was necessary to undergo a UI analysis of the brand’s current sites. Keeping an eye out for color and type usage as well as how those aspects tied into information hierarchy was crucial. I took this into consideration when organizing the color and type identities.
Prioritizing Accessibility
To ensure accessibility in the designs of our future app, I put all colors through contrast analysis tests. I also took careful consideration to organize fonts into reusable tokens that followed accessibility guidelines.
Project Type
Brand Identity
Tools
Figma
My Role
As the UX/UI Designer on this project, I was the main point of contact with brand stakeholders. I was responsible for creating a cohesive brand identity with accessible color and type tokens.
1. Website UI Analysis
While referencing the brand color palette provided in the brand guidelines, I scanned the website and any webpages. My goal was to see how color was represented in the brand’s digital presence on the web. How often are primary colors used? Which colors are used for links, secondary buttons, etc.?
2. Color Consolidation
After exploring the brand’s existing use of color, my next step is to consolidate my data collection. I group by color and see which colors are being used for which web elements (headings, link text, button text, etc.). I take note of any minor color differences from what is provided in the brand guidelines. Also, I gather the neutral colors separate from the rest.
3. Accessibility & Color Identity
Using the data results my UI analysis and color consolidation, I then used our accessibility gradient template to determine light shades, dark shades, and if any colors needed to be altered. Finally, I was able to move on to creating the color identity for this brand.
4. Color Tokens
After designing the brand color identity, I created two sets of color tokens, standard and inverted. These also consisted of token groupings like form control, interactive, table, type, UI, and feedback colors.
5. Brand Typography & Type Identity
Given specific fonts from the brand in the print brand guidelines, I also undertook a web typography analysis. This specific brand was insistent on using Roboto Condensed, but it was imperative we use Roboto Medium for functional text for visibility and accessibility. Using the outline of Typeface and Use Case, I created a type identity.
6. Type Tokens
Using the type identity and use case guidelines I created, I assigned type tokens to be used throughout the mobile app.