My Role, the Team, and the Timeline

I led the overhaul of the brand guide, which involved conducting stakeholder and user research, design, front-end development, content/resource production, and writing documentation.

To gather the necessary input, I worked with our digital strategy director, our web services team (particularly their creative director and visual designer), and three photo journalists. These team members often lent me ideas and resources that would go into the new guide or helped in reviewing components of the site.

Also, I shouldn’t overlook that the other front-end developer on my team bailed me out in a few tight spots as we closed in on the project deadline.

This project was done completely in-house with zero budget. Throughout the fall of 2018, I worked with various programs to test out color palettes and new sub-branding treatments. After initial validation of these across a few projects, I had about a five weeks to produce the new online guide in parallel with a handful of other large design projects I was working on at the time.

The typography section was among the most iterated upon pages in the new guide. Initially, I started with a list of our recommended fonts (with specimens and download links).

When I put this font specimen sheet in front of users, many of them requested more guidance on using each font. I included recommended use cases for each font to accommodate this, and I added a new section on different sample font pairings.

A set of somewhat more advanced users wanted more direction on how to implement these fonts on the web. These users weren’t developers, but they were advanced enough at using their website CMS tools that they knew how to drop in strings of HTML or CSS code if given a snippet. To meet the needs of these “smart enough to be dangerous” users, I added subsections within each font listing and font pairing suggestion that gave a few high level steps on how to link the fonts into their websites.

With so much content on this page — we had nine font specimens and four example font pairings — I found that users were a bit overwhelmed when the typography page would first load and the scrollbar on the right would grow smaller and smaller as the page fully rendered. Many users would take a long while to scroll and navigate around the page until they found what they were seeking. And even though most were looking for font pairings rather than reading through the individual font specimens, they would get tired before scrolling down to that section — even after I created a shortcut to it at the top of the page.

To address this, I packaged much of the content into keyboard-accessible accordions and tabbed sections so that the font information could be displayed progressively. This way, users visiting the page could scroll down quickly, see the first font pairing, get that confirmation that they were in the right place, and then feel encouraged to explore further. Despite most of the non-heading content being initially hidden under this progressive disclosure model, most users felt less overwhelmed and spent more time examining and engaging with different options on the page rather than succumbing to content fatigue.

One feature goal that I did have on the drawing board was adding brief previews of the fonts in a card-style layout to make them easily scannable without having to click into each accordion. However, due to the timeline and the MVP accordion structure being good enough for the vast majority of users, we deprioritized this feature so that we could shore up other areas of the brand guide in time for launch.

The final resource on this page was a last-minute addition. Late in the revision process, we realized that some users might still need occasional access to the old fonts to make infrequent updates or edits to older archival projects. We added a font request form for these users at the very bottom of the page so that they could gain appropriate licensing to the discontinued fonts.

Launch & Results

I presented the new brand guide website at our monthly communicators meeting in December 2018 (about a third of our 200+ university communications professionals were present), and they were quite pleased to see the new resource and eager to use it in new rebrands, website redesigns , and other projects they had under way. By January 2019 we had fully launched the new site and made it publicly viewable.

The greatest measure of success for a project like this is not about transactional data like visits or downloads. Rather, it’s revealed qualitatively by seeing greater compliance integrated into larger branding & communications projects undertaken by these communicators. Although I left Duke in January of 2019 (and therefore was unable to witness much of the subsequent impact), there were already a number of communicators with established brands or projects who bought in to the new brand guidelines and took steps to pivot or apply the new guidelines in their final product. These units were sprinkled across Duke in different schools and institutes that we had difficulty ensuring brand compliance with in the past, which demonstrated that the new guidelines were clear and flexible enough that they found value in attaching their departmental brands to it.