Evolving Our Visual Guidelines: A Case Study

Storyblocks is growing and evolving, and our visual guidelines needed to do the same.

Background

Storyblocks has traditionally empowered individual creatives to produce great video. Last year, Storyblocks began to ask how we can also empower large businesses to create video that will capture audience attention and achieve company success.

The goals of this project were thus twofold:

  1. We wanted to evolve the Storyblocks visual styles to reflect a more mature aesthetic. Still creative and playful, but in a more grown-up way, to appeal to larger clients.
  2. We wanted to document these evolved styles and also expand upon our existing visual guidelines. As Storyblocks grows, our teams create more and more visual collateral, and we needed additional constraints to guide and empower the design process.

Getting started

I joined Storyblocks as a Visual Designer last November. Some of the work outlined above was already in motion.

In August, our Senior Product Designer, Rebecca, led a design workshop to refresh our brand. One of the outputs was a stylescape that become the foundation for our evolved visual language.

Rebecca and I worked together to scope the rest of the project. We started with a list of sections that should be included in the guidelines, including:

  • Typography
  • Color
  • Imagery
  • Video

We then broke each core section into a list of subsections. For example, the Typography section need to incorporate subsections on:

  • Our two typefaces, Proxima Nova and Dejanire
  • Our type styles: headlines, subheads, body copy, and so on
  • Type colors: we set most of our type in dark gray or white
  • Typographic detailing: rules such as proper line length and text alignment

This early process of rigorously outlining each section directly influenced the final product. The visual guidelines are used by many different teams at Storyblocks – from brand to product marketing to engineering – for a wide variety of reasons. They need to be extremely skimmable and searchable.

In other words, we want to help our internal and external partners surface the information they are looking for quickly. Clear organization, subsections, headers, and bulleted lists all achieve this goal.

Drafting Shapes and Patterns

The Shapes and Patterns section was one of the most fun sections to develop, and the process here is also representative of how other sections formed.

I started by gathering and reviewing existing resources. The design team had a few shape and pattern styles that it wanted to continue using, but was interested in diversifying this set.

I then focused on broad iteration. I played with our existing brand shapes and experimented with how they could form new styles and what those styles might communicate.

Iterations were presented to the design team during our Monday afternoon, collaborative sessions. Designers voted for 31 iterations. A thumbs up signaled that the design was on brand, complementing our exceptional images without overshadowing them. Scalability was another concern. Shape and pattern applications needed to be scalable across different types of media, and they needed to be relatively easy to implement.

Voting sessions (plus additional discussions with the team) determined which styles were then added to our guidelines. At this stage, I turned my focus from exploration to documentation. I assigned each style a final name and succinctly described its purpose.

I wanted each section to rely heavily upon imagery to communicate ideas, and I created a series of examples to demonstrate how shapes and patterns can be used. Images make the guidelines more entertaining and convey guidance faster than long paragraphs of text.

Drafts were then shared with the design team. Designers commented directly in zeroheight, the platform we use to document our full design system.

As feedback was posted, the team also considered what additional tools or libraries people might need to implement these styles. For example, our shape and pattern styles are set up in Figma as components to allow for easier application in designs.

Working with cross-functional partners

When all core sections were drafted in zeroheight – a process that took several months – the design team compiled a list of questions to ask our stakeholders.

In this case, our primary stakeholders were members of the Storyblocks brand and marketing teams, who would also be final users of the visual guidelines. We asked for feedback that addressed a few of our goals: clarity, democracy, and readability.

Testing the guidelines

Throughout this process, I was also designing collateral for Storyblocks teams. These projects were excellent opportunities to test the visual guidelines before launch.

For example, I worked closely with Product Marketing to design a sales deck for our business clients.

The experience of designing actual collateral influenced the visual guidelines. What worked in theory didn’t always translate to practice.

One major realization came around color use: it became clear that our darkest shade of yellow, yellow 900, is difficult to use as a large background fill because it communicates a retro feeling that doesn’t quite align with the Storyblocks brand. In the guidelines, we decided to restrict its use to smaller-scale applications.

Next steps

Historically, visual guidelines have been treated as rigid manuals that are printed and entombed. Famous examples include the NASA Graphics Standards Manual and the New York City Transit Authority manual.

The internet has transformed these types of manuals into living, evolving documents that can mirror the complex evolutions of their organizations. Since completing the first version of the Storyblocks guidelines a few months ago, they have already been updated.

One of my next steps is to continue finding ways to surface relevant information to guideline users. We can’t expect every Storyblocks employee to read the guidelines from start to finish, or even to skim all 10 sections and 42 subsections.

I’m interested in how we can continue to surface the most important information for each user, and make it even more digestible, entertaining, and useful for its audience.

Written by

Ali Tomek