CASE STUDY: STANFORD HOMEPAGE

Setting a new visual direction

Stanford’s homepage gets over half a million visits a month by a diverse international audience - from prospective and current students, parents, alumni, faculty & staff, campus administrators to visitors.  Since our 2013 redesign, our primary web presence had come to feel formal and stodgy - it didn’t communicate the energy and pioneering spirit that our campus community associated with being here. We needed to recapture the tone and personality of the campus.

University Communcations (UComm) partnered with the talented team at Mule on discovery and design, and Ucomm’s internal web team built and launched the site.

 



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. 




homepages

The Stanford Homepage, Old (left) and New (right)


Old Identity Toolkit Homepage

 

Share the stories only Stanford can tell

Since Stanford’s forward-thinking 2013 homepage refresh, much of our style had been adopted in other websites across higher education and no longer captured what made us special.  Furthermore while each university is unique, they often share a common structure and audience which can make differentiation a challenge - as a result many university websites are indistinguishable except for their logo.  During their discovery phase, Mule identified aspects of Stanford’s culture and community that could not be replicated.  They developed a visual direction that incorporated this storytelling, which has become the basis of our new design language. 

Following Mule’s work on discovery and design, the UComm web team brought this bold new vision to life.


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

Set the new gold standard for websites at  Stanford University


The overall design approach that Mule took was to provide flexible system of modular elements that made it easier for us to extend and keep updated with new content.  Because the scope of our engagement with Mule was limited, we extended their work as we built out the full site.

Our high level goals for this project were:

  1. Responsive: Make it feel like it was specifically designed for each sized device

  2. Accessible: Set the standard on campus for WCAG compliance
  3. Useful and usable: Establish campus-wide patterns for UX and micro-interactions

My role in this project:
As the visual designer in University Communications, I evolved and extended the design language documented by Mule.  I worked on our internal web team alongside our front end developer, back end developer, Senior Director of Web, and accessibility program manager as we built out the new homepage.

The new university homepage launched in July of 2017.

 

 

 

THE PROCESS

Bringing the homepage to life

Build, extend, redesign, add, refine

 

figma-screens


Building our responsive framework

Our front end developer created our code framework which afforded us significant control over responsive behavior.  In order to optimize the text flow for line length and readability at every break point, I iterated on the relationship between base font size, content width, and margins.  This precision resulted in our content feeling natural and proportioned at every screen size.  

Responsive Notes

Our base font size was contextual to each breakpoint - this forms the foundation for our responsive typography scale. In order to maintian proportional relationships between headings as our base font changes, we implemented a modular scale step of 1.25.

We also used a modular scale to set our vertical rhythm.  Our front end developer and I collaborated to adjust spacing across the site to reinforce proper content hierarchy and grouping between headings and content areas.

In order to visually separate types of content from each other, I documented all content types that included images, and then set responsive aspect ratios for each to maintain the integrity of our content hierarchy contextual to screen real estate.




themes


Extending panel themes

Mule delivered three color themes for content blocks but during development we found that we needed more variation, so I designed two new color themes - Light Sandstone and Stone - and extended all five themes to each content panel. 

 

 

events-cards


Redesigning Event Cards

When interpreting the small through large break points between what our vendor provided (top row), I found the design pattern to be too fragile when testing with live content.  Because the headlines and descriptions are user-generated, we could not expect brevity and needed a more robust pattern to accomodate varying text lengths.  As I explored alternate design directions (second row) for event cards I found that the text needed to be able to expand independent of the vertical height of the image. 

In the final version (bottom row) I retained the square image aspect ratio which visually distinguishes events from other content types, and moved the text underneath where it could expand as necessary without breaking the design pattern. 
 

 

image-content-panel


Adding the Image Content Overlap panel

A few of our pages were feeling repetitive as we populated them with content, so I explored what other layout panels we could implement.  Of my visual exploration, the Image Content Overlap panel proved the favorite with our team and stakeholders.  I evolved the design to be responsive at all break points and adapt to all of our color themes.  This panel has found extensive use in our live site.

 


Refining interaction patterns

Our guiding principle which influenced all our UX patterns and mirco-interactions: movement implies interactibility and therefore should communicate meaning.

  

Signup form and label
As delivered by the vendor, the form signup interaction was not sufficiently accessible because it lacked a descriptive label while someone was inputting content.  I designed this interactive pattern to provide a meaningful description that appeared on the active state.  



Link color and active state
In earlier design iterations, our text link color was red.  However, we found that this was confusing because people expected other red elements to also be interactable even when they often were not. 

In order to clearly distinguish links, I chose a new shade of blue that matched our color scheme and provided WCAG 2A color contrast ratio against all our theme backgrounds.  Additionally, I introduced a caret icon with a playful hover interaction because I did not want to rely on color alone to denote a link.

 

 

"Story cards" versus "Highlights"
We used motion and content hierarchy to differentiate between the "Story Card" and "Highlight" content types - Story card headlines and links both go to the same place, while highlights may contain more than one call to action link.  We removed the interactive state on the image and took care to ensure all hover effects were used judiciously, felt natural and did not become distracting. 



Profile panel layout and scroll behavior
Our profile panels provide an opportunity for us to provide a face and story to tell what sets Stanford apart.  However, we found that the design and interaction as delivered minimized the focus on the individual and appeared after many of our users had moved their focus below the panel. 

I revised the layout and content to focus on the person, blurred the background image to improve readability of superimposed text, and I partnered with our front end developer to adjust the animation timing so that the overlay appeared more naturally on scroll. 



Attention to the final details

As we neared completion, there were a few patterns left to design.  I mocked up the remaining support pages and documented their UX patterns.  Additionally, I created a new set of favicons to target each sized device.  
 

Search Results

Search page

List Page – Expanded

List page

Final Site Alert

Emergency announcement

favicons

Favicons for all screens



Rollout

Because this was a big change for campus, we spent some time in beta to get feedback from around campus while we polished up little details.  People felt strongly about it - a few hated it, but most people loved it. 

We made a few final adjustments before launch and went live in July of 2017. 

 

 

 
 IMPACT

We outdid ourselves
 

homepage-responsive

Most accessible site at Stanford University

Based on the accessibility testing performed by our Accessibility Program Director, the Stanford homepage is the most accessible website at Stanford.  We set the standard for web accessibility at our University.  We've been using this site as a guide to other units on campus.

Most accessible site at Stanford

Based on the accessibility testing from our Accessibility Program Director, the Stanford homepage is the most accessible website at Stanford.  We set the standard for web accessibility at our University.

Our design & interaction patterns have been copied

Imitation is the sincerest form of flattery: since launch, a number of units around campus have been redesigning their websites and adopting the design and interaction patterns we pioneered with this project.

 

Design and interaction patters being copied

Imitation is the sincerest form of flattery: since launch, a number of units around campus have been redesigning their websites and adopting the design and interaction patterns we pioneered with this project.(link to engineering and continuing studies)

We're recycling these responsive patterns

Based on our feedback during beta, users commented on the site feeling deliberate on their screens of varying size.  With this success, we’ve been adopting the  responsive patterns pioneered on this project into the next generation of web themes currently in production. 

 

twitter


 

LOOKING FORWARD 

Measure and Improve

With sufficient user data post-launch, we will be determining how well our new design has met our goals and where we still have room for improvement.  Given the varied audiences and their different goals, we need to determine multiple patterns that indicate successful use and find metrics to measure them.  

A few specifics we will research

  • Measure the increase the percentage of people who scroll through the initial curtain reveal
  • Determine if users realize our navigation links to discreet pages vs further down the homepage
  • Find our how could we provide quicker information to people seeking to visit Stanford

We aren’t resting on our laurels.  By focusing on measurement and UX research, we intend to make a habit of continual iteration.