One of the quintessential experiences for every young 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.
In December 2014, I joined Discovery Digital Networks (DDN) as their first Junior Designer for the product team. Being fresh out of college and a typography internship, I was intimidated by the type of design projects they presented—I had never worked on a digital product!
Despite that, it was a welcome challenge and a fantastic learning experience about failure and making a comeback with a better product.
Group Nine Media & Seeker
So…what did I work on?
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 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).
- 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
- 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.
- It was relatively functional but difficult to maintain with fractured legacy code.
- The benefit was that the team could directly change the website.
Maintenance was tedious, which drove the decision to have Seeker v1 on a 3rd-party CMS.
- The benefit was that we didn’t have to deal with rebuilding the content uploader and the entire website.
- The downside for engineers was that they couldn’t directly play with the code and would have to go through wait times to collaborate with 3rd-party engineers.
- The downside for designers was that we were limited to the templates and available functionality that was provided to us.
- In addition, the v1 brand was being effectively redone by a 3rd-party agency at the same time the team was working on the website redesigns. This caused a lot of back-and-forth and miscommunication between the agency, the in-house designers, and the stakeholders.
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.
Typography & Logo
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Check out more about Seeker’s brand updates in Part 2.
See the live Seeker website!
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)