Leafly News

Problem Overview

By the end of 2015, the Leafly editorial team had outgrown its previous News blog. It was neither scalable nor a CMS platform that allowed the writers control to compose or publish on demand. There were no layout variations – only a landing page and one article option.

Old News Blog

The Editorial Wishlist

These were the early days of Leafly and we didn't have a dedicated data team to tag and track the old news site. We did have the basic analytics to know that there was a desire both externally and internally to build a better News channel. We would also make sure that the new CMS would have tools in place to do produce more useful and granular data.Having a robust news section also aligned with the current corporate business goals. To that end, the following list was provided by the editorial team.

• a content management system
• 4 unique template for a landing page, basic article, article series, and a long-form feature template
• a suite of custom modules
• large photos
• ad slots
• sponsored content (articles, video, slideshows)
• masthead
• tagging system
• landing pages for each news department

Process

I started by researching the aspirational sites linked in the requirements document (The New York Times, Eater, New York Magazine, and Vox) and began to collect scrap to inform my UX explorations. The site needed to look trustworthy and appealing at the same time. Internally, it also needed to satisfy the needs of a growing editorial team. After setting up the basic site framework, I began creating module variations based on the initial requirements. I wanted to set up a fully modular system that, with some basic rules, the editors could assemble on demand. As a result, all of the modules were custom-built based on these editorial requirements and design specifications.

UI / Visual Design

The design is intentionally spare and modular to highlight the content and allow editors to compose modules as the articles require. There are 5 basic page templates, each with its own basic module layout. News broke from the rest of the site so that we could use a serif font for better readability especially on the long-form feature articles and on mobile devices. Styles were built into the custom modules to ensure the correct layouts and color was added only to aid navigation and usability.

Style Guides

Development specs were delivered to engineering via Invision's Inspect tool as well as as the basic interactions. With so many moving parts it was important that each group received specs that were meaningful to their individual needs. Guides and specs were created to support the editorial team and advertising. Separate specs and responsive guidelines were also delivered to the engineering team.

Measurable Results

The redesign was not only well received, there were several measurable improvements. Between the previous seven months before the redesign vs. the seven months after the redesign: 

• Pageviews increased 34%
• Unique pageviews increased 37%
• Average time on page increased 31%
• Entrances increased 45%

"Deborah's News redesign allowed my team to vastly improve our workflow—moving drafts from the writer to the editor to our photo/graphics department became seamless and more organized. Her design aesthetic is clean but modern and functional, with built-in modules that make for easy construction and customization of both articles and landing pages while remaining cohesive and simple to use."  – Rebecca Kelly, Leafly Director of Content

Future Visual Design Explorations

After collecting usage data on the current WordPress templates and modules, we met with the Content team to find out which aspects were most successful, which needed revisions, and which modules were not being used at all. After collecting new requirements and reviewing the data, I worked with another designer to explore how to incorporate the findings into a new design direction. We were asked to combine three different departments to create a new Lifestyle category. In addition, we looked at what small changes could help tie in the look of the legacy sections while we rolled in the updates to Lifestyle.