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.
10/2018 - 01/2019
To be launched at 01/30/2019
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
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
More work for the style guide effort, like the design of other pages and the modular design system will be shared soon.