CASE STUDY: IDENTITY TOOLKIT

Stewarding Stanford's visual story

Over the past few decades, Stanford has risen to be among the world’s top universities and has developed an international brand.  However, the rising stature of individual units, combined with the decentralized structure of the University, had caused fractured identities to grow, which threatened to undermine the cohesion of purpose and story that has helped fuel Stanford’s success. 

I led the project to re-architect and rewrite Stanford’s Identity Toolkit, and championed the shift in University Communication’s approach to visual brand on campus towards alignment and facilitation. 




CASE STUDY: IDENTITY TOOLKIT

Stewarding Stanford's visual story

Over the past few decades, Stanford has risen to be among the world’s top universities and has developed an international brand.  However, the rising stature of individual units, combined with the decentralized structure of the University, had caused fractured identities to grow, which threatened to undermine the cohesion of purpose and story that has helped fuel Stanford’s success. 

I led the project to re-architect and rewrite Stanford’s Identity Toolkit, and championed the shift in University Communication’s approach to visual brand on campus towards alignment and facilitation. 




identity-old


Old Identity Toolkit Homepage


Old Identity Toolkit Homepage

identitynew


New Identity Toolkit Homepage


New Identity Toolkit Homepage

Keeping up in a rapidly changing communications landscape

As Stanford rose to increasing prominence on the world stage, the communications needs at every level changed.  When individual units gained more visibility, they often developed their own identities apart from the broader organization.  At the same time, the number of communicators across campus grew, as did the sophistication of their work.  New mediums were incorporated into content strategies (or sometimes without clear strategy) faster than we were able to develop related guidelines and resources.   

The individualist culture and decentralized nature of Stanford has historically provided resistance to central coordination.  Additionally, University Communications has lacked the resources to adequately provide traditional brand enforcement and communications support at scale.

Central resources like the Identity Toolkit had become either a resented obligation or ignored as irrelevant.  To be effective in this climate, University Communication’s visual brand strategy had to adapt.

Keeping up in a rapidly changing communications landscape

As Stanford rose to increasing prominence on the world stage, the communications needs at every level changed.  When individual units gained more visibility, they often developed their own identities apart from the broader organization.  At the same time, the number of communicators across campus grew, as did the sophistication of their work.  New mediums  were incorporated into content strategies (or sometimes without clear strategy) faster than we were able to develop related guidelines and resources.

The individualist culture and decentralized nature of Stanford has historically provided resistance to central coordination.  Additionally, University Communications has lacked the resources to adequately provide traditional brand enforcement and communications support at scale.

Central resources like the Identity Toolkit had become either a resented obligation or ignored as irrelevant.  To be effective in this climate, University Communication’s visual brand strategy had to adapt.

 


 
THE CHALLENGE

Realign visual brand across campus

Shift approach from enforcement to facilitation.  Build central resources that empower communicators across Stanford to do their jobs well.


all-marks-wide


The Identity Toolkit is the visual brand documentation for Stanford
It's primary goals are to promote brand adoption across campus, and to increase the quality of public-facing visual communications across all mediums created by members of the Stanford community. Ultimately, it exists in the service of our users, so if it is not being followed then we didn’t make it useful enough.

Our high level goals for this project were:

  1. Understand where our users are with skill and need

  2. Create a resource that people wanted to use
  3. Build systems to better leverage limited resources

My role in this project:
I led the discovery process, created the information architecture, content strategy, and design, and re-wrote content for the revised Identity Toolkit product.  In addition, I collaborated with a front-end developer on code, and with Trademark Licensing, the Brand Manager, and University Communications (UComm) leadership on editing content.

This work was in line with an overall shift in strategy that I was championing within  UComm and across the University.

The new Identity Toolkit website launched in August of 2017.

 

 

 

DISCOVERY

Understanding the problem

Before beginning to craft a solution, we needed to update what we knew about who our users were and what they would find helpful. 

 

Qualitative & Quantitative Research


Support requests
We were fortunate to have years of support request tickets in our help ticket system.  I downloaded the support incidents into a spreadsheet and began tallying which topics were asked about for use cases, and what the role the submitter had in the University for personas.

 


Website analytics

I was also able to pull historical data from Google Analytics to track user behavior.  Through diving into this data, I saw what content our users searched for the most, duration of visit, paths through the site, and what they interacted with.


Website analytics

I was also able to pull historical data from Google Analytics to track user behavior.  Through diving into this data, I saw what content our users searched for the most, duration of visit, paths through the site, and what they interacted with.



User interviews

Since I started working at Stanford, I had been collecting notes (for the eventual use on this project) from the dozens of brand consulting meetings around campus.  I asked what they were trying to accomplish, and what they found frustrating or helpful about the resources that were available.  Additionally, I co-led the User Experience Designers (UXers) and Creatives Communities of Practice on campus and regularly sought feedback and tested ideas with these groups. 


User interviews

Since I started working at Stanford, I had been collecting notes (for the eventual use on this project) from the many brand consulting meetings around campus.  I asked what they were trying to accomplish, and what they found frustrating or helpful about the resources that were available.  Additionally, I co-led the User Experience Designers (UXers) and Creatives Communities of Practice on campus and regularly sought feedback and tested ideas with these groups. 



Competitive analysis

In looking through brand documentation for many peer universities and in industry, I noted which items they documented. However, I found little consistency in the way brand and identity resources were presented.   One main takeaway: PDF and printed style guides get outdated too quickly, and prevent repeat visits to the website as a single source of truth.

 

Interpreting & Defining
 

 
"Hi, I am interested in learning how to use the toolkit more effectively. I am able to use some of the features, but can't figure out how to use others. If you could direct me to a someone who I could talk to or even training videos, I would appreciate it. Thanks"

Jeff, Faculty

  

Observation:
Most users didn’t have a design background
Brand documentation typically assumes a trained audience with prior knowledge of design principles, terms, and how to properly apply them. Based on interviews and help tickets, I found that most people using our toolkit did not have formal training as a designer and frequently found the guidelines confusing and unhelpful.  Some got frustrated, many felt stupid. 

Observation:
Most users didn’t have a design background
Brand documentation typically assumes a trained audience with prior knowledge of design principles, terms, and how to properly apply them. Based on interviews and help tickets, I found that most people using our toolkit did not have formal training as a designer and frequently found the guidelines confusing and unhelpful.  Some got frustrated, many felt stupid. 


Takeaway:
Explain rather than tell
Our content needed to combat a high degree of design illiteracy, so it had to be rewritten for the aptitude of our audience, and the way our content was structured had to facilitate learning.  It was not enough to tell people what to do - we needed to explain the reasons behind design decisions.  I would find later that this would also empower designers on campus in conversations with their non-designer stakeholders.  



this-or-that

It was not clear where the Word document templates would be, so our web analytics showed our users bounced between the Toolkit for Print or Toolkit for Desktop pages a lot.


Observation:

It’s not clear what’s where; doesn't gracefully accommodate new content
User feedback and behavior paths in web analytics showed that the way our guidelines were structured and labeled did not map to the way people were looking for information. Additionally we had new content to add but no intuitive place to put it where it would be discoverable.  


Takeaway:

Reorganize for obviousness and scalability
There were no clear conventions in higher ed or industry that we could fall back on, so I crafted a new information architecture that would guide users to the resources they needed with lower cognitive load and fewer interactions.  

Our new site structure organizes pages into medium-agnostic elements and medium-specific applications; as we add new content, it will have a place to go.



persona-grey

Most users came for one resource and left, so we mapped most of our user journeys using each persona's goals.  While I did not use the complexity score in content as we had initially intended, it still informed how I ordered resources on each page.

Most users came for one resource and left, so we mapped most of our user journeys using each persona's goals.  While I did not use the complexity score in content as we had initially intended, it still informed how I ordered resources on each page.


 

Observation:
Diverse user base, diverse user needs
One key challenge we encountered was users of widely varying technical skills going to any given page who needed solutions of varying complexity.

Observation:
Diverse user base, diverse user needs
One key challenge we encountered was users of widely varying technical skills going to any given page who needed solutions of varying complexity.

 

 

Takeaway:
Restructure page layout to sort users by their needs
Our analytics data showed that most users came to the Identity Toolkit for one specific task and then left.  Because of this, I mapped out user journeys, taking each page by itself, listing out users and use cases, then sorting the solutions by technical complexity and frequency of use.

Takeaway:
Restructure page layout to sort users by their needs
Our analytics data showed that most users came to the Identity Toolkit for one specific task and then left.  Because of this, I mapped out user journeys, taking each page by itself, listing out users and use cases, then sorting the solutions by technical complexity and frequency of use.



 
"I would like to send an email announcing our new Fellows that has design elements (including photos), and I would like elements to fit in the Stanford identity. How do I design an html email? Are there resources for this? Thanks!" 

Jessica, Researcher

 

Observation:
We lacked guidelines and resources in key areas 
In several cases, we simply did not have what people needed.  For example, colleagues on campus asked for email templates, social media account icons and quote templates, video guidelines, and many other things - none of which we had at the time.    

Observation:
We lacked guidelines and resources in key areas 
In several cases, we simply did not have what people needed.  For example, colleagues on campus asked for email templates, social media account icons and quote templates, video guidelines, and many other things - none of which we had at the time.

 

Takeaway:
Build out roadmap for new content development
While many of these requests wouldn’t make it into the MVP, it gave us a sense of what we needed to prioritize next.  I collected these content requests and built out a roadmap for future development. 

Takeaway:
Build out roadmap for new content development
While many of these requests wouldn’t make it into the MVP, it gave us a sense of what we needed to prioritize next.  I collected these content requests and built out a roadmap for future development. 


 

 


PLAN, DESIGN, BUILD 

Crafting the right solution
 

Identity Sitemap

Sitemap informed by our user research that reflects our MVP and content development roadmap

 

What does success look like?

  • Improved relationships with communicators
  • Increased and more consistent brand adoption across campus
  • Reduction in support tickets and time spent on visual brand consulting
     

How will we measure success?

  • Website behavior patterns that suggest usefulness and utility
  • Track help ticket volume and time spent
  • Feedback from campus communicators

Getting stakeholder buy-in
Being sensitive to Stanford’s culture of change management and transparency, I drafted a project scope and summary.  I individually walked internal University Communications stakeholders (the Senior Director of Web Communications, the Associate Vice President for UComm, the Brand Manager, and Trademark Licensing) through my research and proposal, and also circulated it among the communicators in other organizations within Stanford who would be affected.  Not only did I receive the approval to invest time in this project, I found that I had an enthusiastic stakeholder base.  People across campus wanted this.

Design & Prototyping

Rapid iteration on two archetypal pages
The Name & Emblems, and Web & Mobile pages were the longest and most complex pages, so I chose to begin with them to refine the content and design patterns that would be implemented site-wide. 
 

adjustwidths

SASS mixin for adjustable responsive content containers, based on Burbon and Neat


Designing in code
Because most of what I was designing was the content itself (which evolved as the design did), I found it quicker to design this project in code.  I partnered with Kevin, our front-end developer, who created the code framework we used on this project.  He made a versatile pair of SASS mix-ins to vary content width and number of items per row, which when combined, gave me tremendous flexibility.

 

threeupevolution


Evolving design, UX and content: the Documents page before (left), during (middle) and after (right) the redesign

 

Building & Refining

Content Organization
Our new content order feels obvious in retrospect, but this was refined through many iterations: on each page, context and standards are first, followed by simpler solutions most users need, with more complex and less common solutions at the bottom.  Downloads were embedded within guidelines to balance usefulness with education.  In testing, I found that this order intuitively self-sorted users and page length turned out to be a non-issue.

Even when pages get long, our click and heat maps suggest that the page layouts and content match their needs as a significant majority stay engaged until they find a relevant resource or guideline, especially on critical new pages like Department Branding.   

heatmap


Heatmap data from Department Signtures page showing a majority of visitors continued into the downloads


Rolling out patterns site-wide
Even with refined layout and navigation patterns, I encountered unique challenges.  Each page had its own audience, often totally distinct from any other page given most user’s targeted intent. So each page needed to be a solution funnel of its own, yet link to other relevant resources when contextual. I used the user/solution map for crafting content contextual to every page.
 

color-percent

In order to help our web colors pass accessibility color contrast tests, we had created percent shades of secondary colors.  Historically, this had not been clear to our users, and even when testing new layouts to explain this, it still proved confusing.  For launch, I scrapped this and instead added new light shades we made for our homepage redesign. 


The little details matter

hex

Highlightable hex codes


deptnames

Unit signature filler text explains hierarchy

 

cross-reference

Relevant content is cross-referenced throughout


policies

Policies apear on pages where they are relevant

 

dodont

Do's and Don'ts added clarity to nuanced situations


designforjoy

Strategically added levity through humor


favicons

New favicons for every sized screen 


related-resources

Contextually related resources linked at the bottom of each page


 

accessibility

Setting the standard of accesible communications and explaining accessibility in context 


Finalizing content
I coordinated final content edits with the Brand Manager and Trademark Licensing so that the final content reflected all our goals and strategy.  This helped refine the tone of the content and catch specific phrasing that was ambiguous or misleading.

 

identity-content

Content was shared with stakeholders for editing

 

Test & Launch

Created beta site to collect feedback
So that our major updates did not blindside anyone, we spent some time in beta to gather feedback from campus stakeholders.  Leading up to the launch, I presented at the Stanford Communicators meeting, and at multiple communities of practice.  I connected with HR to announce the new identity site in their monthly newsletter to Stanford employees.  

Measurement for launch
I set up HotJar and Google Analytics events to track user behavior through the launch.  We went live at the beginning of August 2017, a couple weeks after our new university homepage.

  

presentation


Final slide from presentation I gave to Stanford Communicators shortly before launch



 
 IMPACT

Our hard work paid off
 

identity-responsive

Measurable increase in engagement

Analytics suggest that our users are navigating to what they want with fewer steps and engaging with what they find for longer.  Average pages per session went down by half a page (from 2.61 to 2.12), bounce rate dropped 12% (from 55%-43%) and average session time increased by 15 seconds (from 1:55 to 2:10)

These patterns were even more pronounced when filtering out non-Bay Area visits (~20%)


75% reduction in support tickets

We're answering questions before they're asked.  Since launch, there has been a 75% drop in help ticket requests and time spent on them, as well as a change to more nuanced and targeted questions for those I’ve received.   People expect the Toolkit to be useful now.  


Increased brand adoption & consistency

The shift from enforcement to empowerment worked. Relations improved with several (previously distant) units across campus after launch.  We've received a number of unsolicited “thank you”s. 



The work you’ve done for the identity toolkit is outstanding design, not only in the assets you’ve created, but also in your explanations of how to use them. It looks as though you have anticipated our use case, and have a choice of assets, together with explanations and examples on how to use them.

You really make it easy. Many thanks!

Bill, Staff



 

LOOKING FORWARD 

A platform to build upon

While we significantly improved the Identity Toolkit with this launch, there are many more resources that the Stanford community has asked us to build.  In order to keep up the momentum and make a habit of improving central resources, we will continue to develop guidelines and resources in our roadmap. 

  

timeline