Keeping Standards:
Designing a Brand Hub & Asset Templates

Problem

We worked with the Brand Management Platform Frontify to create a Brand Hub tailored to our company’s needs. The result featured style guides, a UI pattern library, and assets such as images, fonts, and commonly used digital templates and assets, which we also created for this project.

Solution

We worked with the Brand Management Platform Frontify to create a Brand Hub tailored to our company’s needs. The result featured style guides, a UI pattern library, and assets such as images, fonts, and commonly used digital templates and assets, which we also created for this project.

My Role

The UX team worked on all aspects of the design, but I took the lead in information architecture, designing the navigation and page hierarchy, as well as a taxonomy for our brand typography.

Understanding the Problem

We held discussions between the UX team, Brand team, and Creative Services teams to understand the core problems affecting our company. From our discussions, we discovered that the problems revolved primarily around two points:

1. Too Many Standards

Our company, being large with multiple sub-brands, had multiple unofficial or outdated guides that made keeping a coherent brand difficult. Development teams existed for each teams and often multiple UI elements had many variations that differed very slightly but noticeably.

2. Inefficient asset management

Different assets were stored in various locations and with different users and our sharing process was convoluted. Users would often need to go through multiple people, emails, and systems in order to retrieve the correct (and hopefully, up-to-date) asset.

Previously, retrieving assets or information was circuitous: different members of different teams would have different assets or information (like login or asset location) necessary to retrieve said assets.

Solution & Requirements

Having clarified the problem, we defined our requirements and goals. We looked at other style guides and ideated requirements that we communicated with the Frontify team for them to set up any bespoke features for our enterprise account.

1. A Standard, Shareable Brand Hub

Our hub would contain a standardized guideline for our company, as well as derivative (but not duplicate) style guides for our company’s various sub-brands. This would be easily shareable within the firm through single sign-on, and would also be shareable outside of the firm to help outside agencies understand our brand when doing projects for us.

2. Create/Update Assets & System

We would sort, categorize, tag, and store our assets on the new Brand Hub asset library, using it as a central repository and Single Source of Truth. This way, the most updated assets and files would be on the repository and we could avoid older, outdated files being shared.

With a brand hub, all assets, templates, and style guides would be stored in a centralized location, in a hub and spoke style network. Out-of-date assets, or people bottlenecks would no longer be a problem.

Brand Hub Architecture

From the understanding of our project goals, I developed the following site map so that the Frontify development team could implement it for us. We would have a single landing page that connected to our company’s various sub-brand businesses, as well as a global media library which would house all firm-wide assets and be accessible to all users regardless of their permissions.

Each sub-brand business would contain their business-specific pages. While our firm would have a global style guide, each business would have a few additional styleguides that did not repeat, but added their brand flairs to our existing styles. This way styles would not be duplicated. In the same way, each business would have a media library and other pages specific to them.

I standardized the layout and hierarchy for our brand hub, making navigation easier.

Collect, Create, and Categorize

As a team we went through the site collecting representative UI patterns, assets, and other useful elements. We categorized them, mocked them up in Sketch, and decided what patterns to put where in our new Brand Hub. 

Atomic Design

We created Sketch Symbols out of these following the principles of Atomic Design: from the smallest color and detail, we created symbols within larger symbols such that a change at the atomic level (e.g. a color, text, icon etc) would populate upwards to larger elements (e.g. a button, navbar, popup box etc).

We created Sketch symbols of common UI patterns and from these Sketch symbols then mockup templates of entire webpages.

Typography Taxonomy

We had many overlapping and idiosyncratic text styles, and so I culled and combined them, resulting in a taxonomy. I originally categorized them by CSS-related attribute (e.g. large, black, capitalized, etc) rather than location or nominal role (e.g. heading, ideas page, date, etc), so they were location-independent. Eventually we decided upon location- and role-based nomenclature for style guides, but attribute-based taxonomy in templates because the latter was easier to navigate.

The most important text styles are shown here along with the attributes and an example of usage.

Finalized Brand Hub

After we had the assets, we populated the platform, creating and customizing the landing pages, style guides, and asset libraries. We held weekly meetings with Frontify and our other stakeholder teams to keep them updated on the project’s smooth progress and success. 

We have finished phase one but will add more features in phase 2. So far, the project has already become a resounding success, increasing inter- and intra-team efficiency and collaboration.

A variety of screens from our completed Brand Hub