Seeker Part 1: Typography

One of the quintessential experiences for every designer is working on their first major product. The other is to be able to look back on that first project, critique it, and recognize what worked, what didn’t, and how to improve the overall quality and effectiveness of those design decisions for the future.

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.


The Seeker website over time.

Group Nine Media & Seeker

In December 2014, I joined Discovery Digital Networks (DDN) as their second product designer. DDN was an internet media company that owned several online networks. In the first migration, the Seeker network absorbed the TestTube network.

The challenge: how to effectively merge them together into a completely new website with a new branding experience.

In December 2015 a decision was made to redesign the brand and migrate the network websites on to a new third-party system to host our content. DDN became Seeker and I had the opportunity to work with the Discovery Communications product team to redesign the Seeker website.

At the start of 2017, Seeker merged with other entities to form Group Nine Media and the website migrated a second time to a new system, where I worked with a new product team from Thrillist to redesign the website.

Here’s a visual of how my timing lines up with the product releases.

Here I will refer to three versions of the website—Seeker v0 (pre-migration and merge), Seeker v1 (first migration, with Discovery Communications), and Seeker v2 (second migration, with Thrillist).

I had a hand in designing all three versions of the website. This study will focus on the design changes from Seeker v1 to v2, and my main involvement in designing the Article pages.

The article pages have the most traffic. It’s the first page our audience will land on after being redirected from popular social media sources (e.g. Facebook).

Problems

  • 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

Content Management System (CMS)

For context, Seeker worked with 3 different website systems to display the content.

Seeker v0 started on a homegrown system to display the content (CMS) built by the DDN product team.

Maintenance was tedious, which drove the decision to have Seeker v1 on a 3rd-party CMS.

In large part, the limitations and poor timeline planning of the rebrand contributed to a successful launch of a failed product.

Fortunately, Seeker v2 worked off of Thrillist’s homegrown CMS which was already developed, templated, and had better overall functionality. Having a pre-established CMS and shared resources—such as allowing our engineers to touch the code—solved many of our technical issues from Seeker v1.

The Critique

The rebrand from Seeker v0 to v1 allowed for a change in typography. Weirdly, v1 ended up using three fonts: Visby (for display and logo), Lora (for copy), and Montserrat (for UI elements).

Seeker v1 typefaces.

There were a few key issues I noticed for Seeker v1 post-mortem. Firstly, the newly rebranded Seeker logo had a bolder, geometric sans-serif typeface called Visby CF. This logo holds itself together without requiring multiple font weights, exists only in a horizontal format, is legible at smaller sizes, and includes the signature chevron in the form of the stemless lowercase K.

Seeker v0 logo in Helvetica Extended Ultralight and Seeker v1 logo in Visby CF Heavy (respectively)

Unfortunately, Visby was also used throughout v1 as a display font. By doing so we had desensitized the audience to the logo. Placement of the logo in key spaces (like the top corner of the navigation bar) differentiated it from copy, but having it written in-line with headings in the same font caused unnecessary repetition.

For example, if the word “Seeker” was used in a heading, the logo and the heading would then repeat visually down the page. The lack of general typographic hierarchy exacerbates the issue by having an unbalanced array of type elements on the page. Changing the display font to something other than Visby CF would have mostly alleviated this problem.

Examples of unnecessary word repetition with the navigation bar at the top of the screen (logo) and display heading. This can be avoided by changing the display font for headings and adjusting hierarchy.

On top of that, Montserrat was used in conjunction with Visby and could be found in smaller interface elements like buttons and hyperlinks. They competed against each other largely because they were both geometric sans-serif styles on the same page.

Visby CF (top) and Montserrat (bottom)

Secondly, Seeker v1 had a general lack of hierarchy. In the article page, there were two major sections you would encounter: the written content on the left, and a list of suggested/trending content on the right (Related Stories).

The mix of accent color, iconography, large images, and large font sizes using Visby CF in the right rail negated any feeling of hierarchical organization. Plus, the rail’s responsive placement was designed as an afterthought, which could be seen in smaller window sizes.

The right rail collapses into a very strange arrangement around 768px width windows, and then is carelessly slipped to the bottom of the article at mobile widths.

Lastly, there was a typographic user experience issue. When focusing on the body copy in a typical desktop width, the number of characters per line exceeded 80. Typically 50-75 characters per line is suggested; this reduces eye fatigue and allows for an easier reading experience when moving on to find the next line. With the lack of emphasis on mobile-first design, the font sizes in a mobile-sized screen were too small for comfortable readability.

Example of 50 character length paragraphs.
Example of 75 character length paragraphs.
Example of 85+ character length paragraphs.
It starts to get more difficult to get to the next line of text as the lengths increase beyond 75 characters.

While the Thrillist CMS templates solved body copy widths, responsiveness, and inline video/image formatting, I still needed to tackle typography and hierarchy. To solve the issues addressed in Seeker v1, the Thrillist product team and I decided to have a fresh start on the branding for the v2 website.

Knowing the product inside and out, I was motivated to make it better, fix past errors, and gear toward a successful launch with a successful product.

The Fix

Since the majority of web traffic was coming from social media to the article page, I focused the majority of my time on the typography.

Beginning with font choices, the team agreed that Visby CF (logo font) was an unnecessary addition to the website as a common display heading font and reworked the total number of fonts down to two. We decided to reuse Montserrat as a lighter weight in the body copy.

I had initially debated that a serif typeface would have improved readability, but by working with Thrillist’s CMS templating I was able to work the font into the body copy in a format that was comfortable to read. Font column widths and characters per line were readjusted.

Montserrat Light as Body Copy

The display font was a bit tricky to choose and we continued to look for options that would best mimic the bold geometric sans-serif style to replace Visby CF.

Display font exploration.

But searching for a display font that similarly matched the previous style caused tunnel-vision. What we should have focused on was a font that related to the brand.

The basis of the Seeker brand was science and technology in combination with curiosity and adventure. The team sought to find something that was different than your typical Vice or Bloomberg-style, so we chose Secular One.

Admittedly, I initially did not like this font. But with some convincing I could see the appeal in relation to the brand. The majority of the characters have a basis as sans-serifs, but there are some quirky elements like serifs on the lowercase F, I, and L.

Visby CF bold display, Lora Regular copy as Seeker v1; Secular One display, Montserrat Light copy as Seeker v2 (respectively). Secular One took a bit of warming up to. It looks great at larger display sizes and keeps it quirky and iconic. A little systematic, a little anarchical. Very memorably Seeker.
Line-heights & Sketch

As a seasoned junior designer working with the freshly acquainted Thrillist design team, I learned a new strategy on measuring technical line-heights and margins between lines of text. For context, we used Sketch for UI mockups.

Normally, Sketch measures the distance between bounding boxes of objects for you. This can be extremely helpful for UI elements like buttons, images, padding, and margins. It’s also convenient for text in a pinch.

This is how Sketch measures between bounding boxes.

These measurements are pretty inaccurate. Sketch gives bounding boxes based on a combination of automated line-height and maximum character heights that are available in that typeface.

This is all the extra space from ascender/descender to the edge of the bounding box.

Though slightly more tedious, I’ve learned to measure from the x-heights (the heights of a lowercase X and the baseline)—this gives an optically accurate margin.

These are the x-heights of the text.

This results in odd numbers, but is visually accurate on the screen. If I want a 30px margin, I would measure 30px between respective line x-heights.

Measuring optically between x-heights. If the desired margin is 30px between lines, the actual margin is 11px between bounding boxes.

I believe these specifics may be negligible for most applications, however in products that deal exclusively in typography and elements dealing with large amounts of body copy (e.g. journalism and editorial), these optical details are important for visually-balanced and accurate typesetting in the browser.

Bounding box vs optical measurements (respectively).
Can you tell the difference?

Seeker averages 1.5 million visitors a month and has 3.3 million subscribers on YouTube.


Check out more about Seeker’s brand updates in Part 2. 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)


Clarity: Internal Tools for Discovery Seeker Part 1: Typography Seeker Part 2: Branding Local Farms with Yelp Illustrationing 🤩