Seeker Part 2: Branding

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.

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.

Coral was chosen for its bright, eye-catching, and unique properties, and association with contemporary neon which was trending at the time on popular editorial websites (e.g. Polygon, Waypoint, OZY, Bleacher Report, Bloomberg). But, limiting the website brand to one color also limited the possibilities for content organization and brand awareness.

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.

We wanted to be able to have colors that were as distinct as the coral with similar saturations and values.

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.

The idea was that the chevron “pointed” towards the article title—a failed application of a rushed idea to forcefully show off the brand to the viewer, especially in mobile window sizes.
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.

However, 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.

The final button was a product of the ping element from the brand guide (which moved like a ripple or signal when animated) and the triangle icon itself. The ping also produced a horrible moiré effect and could only be used in motion where the lines appear at different intervals.

Seeker post-mortem site mapping and analysis.

Global Style Guide

After all that work, I was able to establish a consistent global style guide with proper branding and hierarchy for the article page.

A few pages from the final Seeker v2 global styles guide.

The new CMS and styles allowed editors to have some design direction and flexibility when publishing articles.

Final Seeker v2 desktop article page.
Final Seeker v2 mobile 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)


Seeker Part 1: Typography Seeker Part 2: Branding Seeker Dashboard Local Farms with Yelp DDN Infographics