Problem
OneTrust branding assets and information for web content had no home. Marketers, designers, and web developers had to dig through files to complete simple tasks.
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.
Decentralized branding assets hindered collaboration.
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.
Solution
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.
Frequently Used Assets Are Front & Center
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.
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.
Brand Education Simplified
OneTrust boasts a diverse range of offerings.
On the homepage, you'll find global branding elements along with style guides for each of OneTrust's offerings, underlining this distinctive brand unity.
On the homepage, you'll find global branding elements along with style guides for each of OneTrust's offerings, underlining this distinctive brand unity.
Reinforcing Accessibility Best Practices
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.
These guidelines help ensure that websites are designed and built to facilitate easy navigation for screen readers.
Streamlining Developer Handoff
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.
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.
Simplifying 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.
Helpful assets used frequently by partners such as icons, patterns, and logos can be bulk exported and shared.
Responsive Design
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.
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.
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.
It also showed which assets different departments needed to access most often.
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.
Ideating with The Team
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.
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.
Sharing Insights with Personas
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
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.
Sharing Insights with Personas
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.
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.
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.
Reflection
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.