Seeker Part 2: Branding

Description

This is a continuation of the design case study about Seeker and its two website migrations. If you haven't already, check out the typography updates in Part 1.

Role

Visual Designer

Company

Group Nine Media, Discovery, Inc.

Date

2015-2016

Problem

  • Felt subjectively dated and unappealing
  • Brands/networks were not engaging the audience on owned & operated (O&O) network websites
  • Brands were not cohesive on O&O websites
  • Seeker & TestTube websites needed to merge content
  • Seeker rebrand would be created by a third-party design agency concurrently with the website design during the first migration

Goals

  • Revive the branding experience
  • Refit the website within a completely new CMS template
  • Create a new coherent design system for Seeker
  • Balance typography to work on video and article pages

Seeker started with an average of 56 thousand visitors per month. With the redesign and merger, Seeker now averages 1.5 million visitors a month and has 3.3 million subscribers on YouTube.

Branding

Colors

The updated Seeker v1 brand was robust and it considered multiple motion, web, and branding applications—especially when dealing with colors.

Initially the guide from the third-party agency included a black and white base palette with 3 primary and 3 secondary key colors, each with a respective category. A decision was made to use only one color (coral) of the six that were provided to us.

Having multiple colors on the website would have been more faithful to the brand guide—each category could be identified purely by its own color—and more useful to the audience. By doing so it would have clarified the organization of content.

The team noticed that the v1 primary colors were very muted, heavy, and dark. The pre-established colors only allowed for 6 specific categories based on overlapping topics (as opposed to a flexible system that allowed the addition of multiple subcategories). The secondary colors were brighter and more attractive.

Through extensive color exploration, the team and I established new accent colors and scrapped the idea of a two-tiered category color structure. The colors were used sparingly, almost like highlights, to draw attention on a black and white palette.

The new colors enabled a more recognizable organization of categories and their subcategories. They were flexible enough to allow expansion or reduction of subtopics since they were independent of each other.

Chevron

Another item in question in Seeker v1 was the use (or overuse) of the chevron icon throughout the website. The first few passes of the website actually did not include the chevron at all.

In v1 we inserted it in many arbitrary positions: next to the author byline as an accent, and as a replacement for the play button to indicate video posts. They were superfluous and could be omitted altogether.

Chevron as a Play Button: The chevron was flipped horizontally and encapsulated in a circle—which was not according to brand—to signify video posts. As a “play” button it was a failure due to the fact that it was not understood as a play icon, but rather an icon that signified forward progress.

We scrapped using the chevron for anything other than accenting smaller items (such as category titles in Seeker v2). By accenting the chevrons with key colors, we were able to keep the majority of the website in black and white and at the same time identify sub/categories.

But, we still needed a play button. According to the Thrillist UX team, Seeker’s video content garnered more traffic than written content and thus it still required a play button to differentiate content within feeds. By having a more visual emphasis on images and video, the team didn’t have to worry about arranging the icon around text. Limiting the placement options enabled a wide variety of fun button explorations.

Final Styles

After all that work, I was able to establish a consistent global style guide with proper branding and hierarchy for the article page. The new CMS and styles allowed editors to have some design direction and flexibility when publishing articles.

Final Seeker v2 desktop article page.

Lessons Learned

I have come to accept that many of my v1 mistakes came from a lack of experience. The Seeker v1 migration was a huge project which required an overhaul of tough design decisions, many of which I could not confidently make alone.

Working with the Discovery Communications product team helped me develop into a better designer by being in meetings with executives and other major stakeholders, learning how to explain design decisions and terminology to non-designers, taking chances (and making mistakes), and putting myself in situations that required learning new technology and software. I was humbled and was always absorbing the new information around me.

By the time I was paired with Thrillist’s team, I knew what I was getting into and understood how to work with other designers and engineers. I can confidently say that I am a different designer from when I joined DDN in late 2014.

Recognizing my faults and applying what I learned resulted in a successful product that I am proud of.

Working and collaborating in any team gives one the opportunity to learn and grow with people who have different perspectives and specifications; that is probably the most valuable thing a young designer can experience.

Check out more about Seeker’s typography updates in Part 1. Learn more about Discovery Communications & Group Nine Media.


Discovery Communications Product Team

Gina Jean-Charles (VP Creative & UX)
Soojung Holle (Senior Designer)
Ryan Spence (Senior Designer)
San Chung (Junior Designer)

Thrillist Product Team

Chris Skae (Creative Director)
Benny G (Visual Designer)
San Chung (Junior Designer)


Top