OneTrust Brand Center

TLDR; OneTrust's branding assets were disorganized and causing workflow issues. I worked with different teams to figure out what assets they use most and what related problems they face. I also looked at other companies to see how they organize their branding and design systems. The end deliverable is a high fidelity prototype for a brand center website that makes it easier to find and manage assets.

The Problem

OneTrust branding assets and information for web content had no home. Marketers, designers, and web developers had to dig through files or get sent down an email pipeline to retrieve what they needed for simple tasks. This made simple tasking time consuming, and created mismatched asset versions from separate sources.

4 departments

Number of separate departments where employees use brand assets daily.

2.2 hours

Average time it takes to find and start using a requested brand asset after sending an email for assistance.

The Overview

The final deliverable for this project is a brand center website that focuses on easy asset retrieval and educational resources about brand usage. The end goal was to create a simplified, streamlined content-creation experience for OneTrust employees.

High Priority Assets

The Brand Center website serves the needs of diverse employee roles within OneTrust.

Essential assets that various departments across the organization utilize on a daily basis, such as templates and image guidelines, are prominently featured at the forefront of the site.

Instructional materials about the brand, such as Do's and Don'ts, are also available to streamline onboarding.

Brand Education

OneTrust boasts a diverse range of offerings, yet the brand maintains cohesion through consistent tone, language, and a unified UI design system.

On the homepage, you'll find global branding elements along with style guides for each of OneTrust's offerings, underlining this distinctive brand unity.

Accessibility Information

Style guides contain valuable accessibility details regarding color contrast and proper usage of header tags. These guidelines help ensure that websites are designed and built to facilitate easy navigation for screen readers.

Developer references

In addition to visual style guidance, each style guide includes information that aids in maintaining design quality throughout the development phase.

This resource is a reference for new and experienced developers. It builds brand familiarity and ensures a more seamless collaboration between UX designers and engineers during the implementation process.

Partner Collaboration

All style guide pages can be exported to a PDF for simplified file sharing with external partners.
‍
Helpful assets used frequently by partners such as icons, patterns, and logos can be bulk exported and shared.

Mobile Designs

Mobile-friendly design was a key component of this project. Mobile designs help to accommodate multiple work styles, increase accessibility, and ensure that employees would be able to reference branding information from anywhere.

Research

Card Sorting & Interviews

With no existing brand website to conduct usability testing on, I started the research process off with a bit of exploration.

I conducted 10 cart sorting activities, coupled with user interviews, to better understand how different OneTrust employees categorized and prioritized brand information.

The intent was to begin to uncover the foundations of an intuitive information hierarchy for the site, as well as to better understand the common problems that employees encountered when using brand assets.

Quotes from employees

" It would be great if I could just copy the hex code. I make small mistakes when I copy it down that I have to keep fixing. "

" It is frustrating to find the right icons, I go on a chase to find what I need. "

" There are a lot of places to go get information on the brand... I'm kind of overhwelmed. "

" I do this task almost everyday. Why is there no pre-made template? It would make my life so much easier. "

Competitive Analysis

I conducted a competitive analysis of design systems and brand centers. This allowed me to capitalize on established design norms and the structural organization of brand centers.

Gathering Team Feedback

I used InVision Freehand to turn the competitive analysis into a visual format, making it simpler to compare website features, draw connections, present my findings, and gather feedback from the UX team.

Getting design feedback and ideas from the UX team was a crucial and beneficial part of this project. I often used InVision Freehand to facilitate their responses to my insights and allow them to add their own comments.

Analyzing Insights

After collecting data, I used an affinity map to build an understanding of what users wanted to see on the site: guidance materials, branding assets and files, and a clear site structure.

It also showed which assets different departments needed to access most often.

Sharing Insights

I used insights from the affinity map to build personas and user-journey maps that helped highlight key pain points in the current user experience and communicate design opportunities and requirements.

Design Requirements

Identifying key user needs and design requirements.

Insight

"I just want what I need to do my job"

Employees want to find the assets relevant to their work, and avoid everything else.

RequirementHighlight frequently used assetsPut frequently used assets at the front of the site. They should be highly visible. Organize other assets by common use-cases so departments can find 'groups' of relevant information.

Insight

"Excess files are just a distraction"

Research showed employees have a detailed mental organization for assets they use regularly, while everything else falls into a broad "other" category.

RequirementSeparate technical informationHigh-level brand information such as brand mission should be available separately from 'technical' information such as brand system component usage and implementation.

Insight

"I need to export this for a partner"

Employees, especially in marketing and graphic design, would need to share branding information when collaborating with external partners.

RequirementImplement sharing for key filesStyle guides should be easily exported to a PDF. Mobile design will enable employees to reference brand guidelines as needed during meetings with external partners.

Design

Site Mapping

To start off ideation, I revisited card sort data to construct a site map that represented a logical information flow according to our users' mental models.

Wireframes

I started by drafting wireframes based on the information architecture I crafted during site mapping.

Features were inspired by design system trends from the Competitive Analysis that aligned with our users' requirements. For instance, I incorporated user-friendly hex code copying and provided information on accessible font color and background combinations for color swatches.

Iteration & Usability Testing

Throughout the prototyping process, I reached out to representatives from each of our user groups and conducted four think-aloud style interviews.

This led to significant improvements in the site's hierarchy and the way information was organized, particularly on the homepage.

Ensuring a clear and intuitive navigation path for employees to quickly access the most relevant brand assets and avoiding confusing labels was a key focus.

Lessons Learned

During this project, gathering user feedback was challenging due to scheduling conflicts. To adapt, I included user feedback sessions as an ongoing part of the project throughout development, rather than doing research at a set point. With a tight 12-week timeframe and multiple objectives, I had to make decisions about what to prioritize and where to compromise. For example, instead of early A/B testing, I chose to rely on established methodologies for brand websites in the industry, and focus more on designing the site's structure to align with project priorities.