Wistia Brand Refresh

 
 

Wistia Brand Refresh

Co-led an evolution of the Wistia brand, creating a cohesive visual language that accurately reflected our values and personality.

Responsibilities

Moodboarding, Typography, Color, Web Design, Brand Development & Guidelines

Team

Art Director: David Sizemore
Design Director: Jocelyn Perron
Illustrator: Michelle Fine

 
 

The opportunity

The idea to do a refresh of our brand styles was initiated and pitched to the Senior Leadership Team by our Art Director and me. It had come up from time to time, when we’d notice an inconsistency, or feel a desire to further stretch some of our established guidelines.

A birds eye view of our site before the refresh. Lots of varied use of color, photography, illustration, product visualization, and other graphic elements.

But this time, the timing was right: An ongoing project for systematizing the product would dovetail nicely, and we had an upcoming product launch that would be perfect for a little splash. We’d also recently launched new accessibility features, and had become more aware of the shortcomings of our existing color palette and its uses.

Our goal was to design a consistent visual language that accurately reflects our values and personality. 

We did not want to completely change how Wistia was perceived – as we would to justify a full rebrand – we just wanted to evolve the brand to match how we’d evolved as a company, and bring consistency to our disjointed experience.

 
 
 

Gathering input from the greater design team

Once we had the approval of leadership, we set up a workshop for the design team to give their input on where they saw the Wistia brand going. We asked participants to share inspiration, and, together, we grouped the inspiration into themes. 

 
 

Distilling into distinct moodboards

The good news is that we were pretty aligned! We next created 3 distinct moodboard directions to present to the leadership team.

One of the biggest takeaways from our team workshop was that we needed to be very intentional about where we dialed up the personality, so that we could preserve a sense of product leadership.

 
 

Direction 01, Refine the Rainbow, kept a broad, bright palette and leaned heavily into a stylized photography treatment as a primary visual language.

Direction 02, Make Business Human, muted the brand palette and used organic textures and lifestyle imagery to focus on the human element of video.

Direction 03, Long-Term / Big B Brand, strictly limited the brand palette and incorporated more personality via type and illustration. 

 
 

Explorations in a focused direction

From our moodboards, we gained clarity on what was resonating –a playful, more organic illustration style, but in a limited palette and with strong use of seamless-background photography – and what wasn’t – most of Direction 02.

We began visual explorations using existing product concepts, bouncing ideas back and forth and building on each other. The exploration I did on the right started to stick. The brush stroke was an extension of how we had been using texture in illustration. It also served to communicate a sense of creativity, and to unify imagery of different mediums. Continuing to use our bright rainbow maintained the friendly feeling we wanted, but using them in a more limited way felt more “grown-up.” In sharing these explorations with the leadership team, it resonated with them as well.

 
 
 
 
 
 

Refining the direction

We continued to explore what it would mean to put some constraints on use of our palette, how to incorporate the brush stroke without it feeling redundant or overpowering, how we show our features without site visitors confusing an image for a playable video.

This looked like starting to recreate pages on our site but with these styles – using the new contexts to test the boundaries we were loosely starting to create.

 

Drafting guidelines

At this point in the project, our Art Director and I started to split up ownership of the areas of work. 

He took on our color palette, typography, and tweaks to the logo, while I took on product visualization, brush strokes, use of photography, and guidelines for website pages. We still worked closely together on all pieces, sharing and iterating daily.

We worked with a former Wistia employee, Michelle Fine, as a contractor to update all of our illustrations in an updated style. This relationship and work was also primarily managed by our Art Director, with myself in a close feedback loop.

 

Color and typography

 
 
 

Photography, Product Visualizations, and Illustration

 
 

Guidelines for website pages

 
 
 

Implementation on website pages

 

Birds eye view of our new pages

 
 

Result and learnings

We were successful in creating consistency across our website, and are in progress on bringing these styles into our application as well. We rolled out these styles on the website in coordination with our launch event for our podcasting functionality.

I would like to complete user testing on these designs using our personality attributes, and compare the alignment to our desired attributes with results from before the refresh. We’d also like to continue to refine our guidelines as we continue to use them and find their edges.

 
 

© Danielle Bushrow, 2023