OneTrust Brand Center

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.

brand center website

The Brand Center website caters to a variety of employee roles within OneTrust. The site has a shallow information architecture so that different employees can find relevant branding information or files quickly - and painlessly.

The Resources and Brand Overview pages assist marketing team members by emphasizing brand values and providing easy-to-edit templates that make creating marketing materials simple.

The Global Branding Elements and Style Guides pages provide valuable design materials for developers, graphic designers, and UX designers. Branding files and assets from OneTrust's offerings are stored in an up-to-date, central location. Pages can be exported to a PDF for simplified file sharing or personal reference.

responsive design

The website is responsive to different screen sizes which makes it easy for designers and marketers to reference brand materials on-the-fly.

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

A major insight from this activity was that employees highly prioritized being able to quickly grab what was most relevant to their everyday work while avoiding any irrelevant content that may confuse or distract them. Employees often grouped content into two high-level categories; a well organized category of content they use day-to-day, and a second 'catch-all' category of content they don't use.

Next, I created a competitive analysis of design systems and brand centers from different tech companies. As a newcomer to web-design, this crafted a better understanding of design standards and organization of brand centers.

I used InVision freehand to put the competitive analysis into a visual format. This made it easy to compare and contrast different website features, draw connections, present my findings, and collect feedback from the UX team.

Getting design feedback and ideas from the UX team was an incredibly significant and helpful piece of this project - from start to finish. I often used InVision freehand to make it easy for them to react to my insights, and add their own commentary.

After collecting data, I started to look for patterns with an affinity map. This crafted a better understanding of the types of content users wanted to see - guidance materials, branding assets and files, and hierarchical site organization.

personas & user journey maps

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

site map

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.

One of the biggest challenges of this project was figuring out where to spend my limited time and effort to accomplish project goals. During ideation, I chose to spend less time on sketching divergent conceptual ideas for the site, and more time on drafting site maps, in order to develop a solid foundation for the new site that would last beyond my internship.

Next, I built user flows to demonstrate how our user groups would navigate through the site based on their different roles.

This was helpful for visualizing how many clicks it would take our users to find relevant content, and analyzing how to cater content on each page to our users.

I used InVision Freehand to make a low-fidelity 'sketch' of a website with the information architecture I created during site mapping.

I referred to design system trends and features that had positive reception from the design team during Competitive Analysis, and used those as inspiration for features in the OneTrust brand center - for example, color swatches often have an easy copy link for hex codes and information on accessible font color / BG combinations.

During this initial prototyping, I collected feedback from the design team to catch any glaring design errors or important preliminary consideration.

At this point, I was closing in on the end of my internship! I needed to find a way to quickly collect user feedback on the first round of prototypes. I moved forward with creating a set of clickable wireframes to conduct usability tests.

I contacted individuals from each of our user groups for feedback on the clickable prototype, and conducted 4 think-aloud style interviews. Feedback helped me understand what I needed to consider when preparing to pass the designs to developers.

Some unexpected (but very helpful) feedback I received was from a web developer, who helped me to understand how to prepare the design for the development process, and brought up questions I would need to consider for the next round of prototyping. For example - how will elements resize and wrap on different screen sizes? What do focus states of clickable elements look like?

Using feedback from my team and our users, I iterated on the initial prototype several times, and even designed mobile screens. Gathering feedback collaboratively, and often, helped me to streamline content structure and organization, and refine the visual design of the website.

lessons learned

This project and my internship with OneTrust taught me valuable lessons about time management, project planning, and collaboration.

01. Users can be busy and hard to access, but their feedback is key. Be flexible and collect feedback as frequently as possible.
During this project, it was difficult to access users for feedback and usability testing during the weeks I had set aside for research. I had to be flexible with their schedules. I worked feedback sessions iteratively into my project by collecting user feedback, revising the prototype, and continuing to fit user testing sessions into my schedule based on their availability. I learned that your design and iteration process may not be completely linear, especially in a fast-paced tech company.

02. Every project has limited time - prioritize your goals clearly, and get creative to push through your objectives.
I had 12 weeks to do this project, and several objectives to meet along the way. At some points, I had to weigh priorities and make sacrifices. For example, I think doing A/B testing on early iterations of the wireframes would have been helpful, but I decided that spending more time on designing the site architecture was more important for our users' goals. In retrospect, I believe I could have integrated more design testing by making more versions of the low fidelity prototype, instead of moving directly into wireframing.