Chowhound.com Style Guide

For the past 20 years, Chowhound has been known as a website for food lovers to discover new recipes and food hobbies. With rapid growth on the social, mobile, and video sides, the website is embracing a much younger generation and needs a modern and scalable design that works for multiple platforms. Recently, I went through the process of creating a new style guide for Chowhound site-wide and it’s going to be released at the end of January 2019.

The company

Chowhound.com,
CBS Interactive

Platforms

Web
Mobile Web

Time

10/2018 - 01/2019
To be launched at  01/30/2019

My Process

Inspiration board
Font Pairing
Accessibility Testing
Mockups

‍‍

Team Members - Roles

Sushant Sund - Design Director
Robert Rodriguez - Editorial Designer
Mary Gail Pezzimenti - VP of Content
Patrick Sullivan - Sr. Director of Product
Thomas Henocque - Sr. Web Developer

The Challenge

A twenty-year-old property facing the new era

Chowhound is a site of more than 20 years history. It was started in 1997 as a message board for people to trade information about where to find good food. In 2015, CBS Interactive re-modeled Chowhound.com, again placing the Chowhound community front and center, while extending the appearances to apps, social media, and other digital channels.

I remember the dilemma I faced when I joined the team: there were some older identity manuals and some static UI style guides. Then, looking at newer web projects and none of them reflected the guidelines. So what should I do? Strictly obey the guidelines and produce something that looks outdated, or adapt to modern channels and risking a user experience that diverged from existing customer touch points?

↥  The content distribution of Chowhound today: website, newsletter, social media like Facebook and Twitter, and platforms like Flipboard, Apple News and Google News.

The Goal

Modern design, scalability, and accessibility

Embracing all generations of users, a more modern design guide was needed. Also, the current practice was neither sustainable nor scalable across different platforms, so the new style guide should improve the consistency not only across the site but also all the channels. Last but not least, one important aspect of the new style guide we'd want to address is to ensure accessibility for a larger group of users.

Process

01. Inspiration board for broad directions

The start of a new style is never easy and clear - every one has something to say about it yet the vision is still vague. To get a clear idea of the directions we are heading, I encouraged as many people as I could to give me examples of the sites or visuals they like and uploaded the screenshots to a board for inspirations. From the inspiration board, I get some shared characteristics that were in want of:

  • Content first: The images and videos are well presented, some even with quite large and premium treatment, while the UI is kind of muted to let the content stand out.

  • Use of bold fonts: Most of the examples are products target on the millennials and thus have very bold and vivid genes inside them.

  • Use of bright colors: Quite a lot of products make good use of bright colors for a warm and playful personality.

↥  The inspirations board I put together from the examples given by the team.

02. Check on each page for evaluations

Next, I printed off large screen captures of every page of the site and identified the inconsistencies in the styles and patterns page by page. I wrote down the findings, put them on sticky notes and attached them to the corresponding page so that we could easily see what and where the inconsistencies were. Using the information from the sticky notes, I was able to gather a list of all common patterns and styles used across the site.

↥  A room where all the screen captures of the site was up on the wall.

03. Font pairings for modern typography

This is the time I went back to my desk and got my hands on the actual design. To make sure that the typography not only work on the site but also the other channels, I paired up with the editorial designer Robert and we chose from hundreds of font pairings of sans serif, serif, and script fonts, trying to find a modern, bold yet readable display font that could awake a young and playful characteristic for the brand.

From rigorous comparisons, we chose Playfair Display - a beautiful serif display font, which goes well with the base font Proxima Nova we have on the live site and awakes the bold, playful, and young feelings we would like Chowhound to have.

↥  The font pairing we went through to replace the previous display font Roboto Slab (on the left).

04. Accessibility Testing to ensure the contrast ratio

One important aspect of the style guide to address is to ensure Chowhound to be a AA compliant as per WCAG Accessibility Guidelines for UI components. To achieve it, buttons and links should be clear and have enough contrast. With that in mind, I not adjusted the colors for a modern look and feel, but also built up the color system cautiously to make sure that the colors are contrasted well.

↥  The color system before (left) and after (right), with the color contrast being checked.  

05. Design iterations after applying global styles

With the help from the front-end, we set up the global styles of colors and text styles on the staging environment to see how the styles were carried out from page to page and identified what's still missing. Together, the design, product, and engineer reviewed each page and walked through different uses cases. After that, a few design iterations and fast follow up improvements were done for the first pass.

↥  The QA document for all page types and use cases.

The Solution

01. The Homepage

A fresh homepage was brought up to reflect the new strategic positioning and product offerings (recipes, guides, and how-tos for food lovers). I crafted the visuals from scratch and applied the new style guide.

02. The Article Page

With the content-first strategy, the images and videos got very much emphasized with a premium treatment and the dark overlay that used to affect the presentation was removed totally. The text styles was also adjusted for better reading experience.

03. Ads optimization - viewability standards setup

I aimed to provide a light ad experience but viewability is a tricky problem to solve. On desktop, I got rid of a lot of ads in the right rail, which allowed a standard box ad to move up and users to focus more on the content itself. However, on mobile, the large display unit was moved down because people tended to scroll past the top sections quickly.

04. Work in progress

More work for the style guide effort, like the design of other pages and the modular design system will be shared soon.