Roundup articles

Creating a new article type and designing the editor tool.

Overview

Industry Dive is a business-to-business media company publishing high quality journalism in niche industries. The editors utilize different article formats for their writing. Through user research I discovered the need for a new article type, a roundup, which helps readers navigate between related content. I also designed the tool for editors to create these articles in our CMS.

Role and responsibilities

  • Product Designer @ Industry Dive
  • User research, UX and UI design, Documentation
  • October 2019

The challenge

Industry Dive editors experiment with different article formats to better engage and inform readers. As the company has grown, editors have tried to package specific articles together to ensure our readers can navigate between specific related content – e.g. coverage of a particular conference. Their process for creating these was custom coding links to articles. This was prone to human error and took a lot of time. Using user research, I designed a new article format and tool for the editors.

Discovery and analysis

I began by interviewing five editors, ranging in publication topic and position, to understand their process for creating related content articles. I observed their processes, learned about the problems they were trying to solve and examined example articles they had published.

Aggregating the results, I discovered that editors had been misusing a template designed for sponsored content that featured large red numbers. The editors were trying to create two distinct article types with this template:

  • Listicles – The punchy numbers in the design called out the listed items in the article. The article content was standalone and typically detailed trends – e.g. “Top 5 new companies.”
  • Linking related content – The editors grouped related articles around a specific topic or event. The articles were listed out with short teasers and linked to the full article – e.g. “Five articles from South by Southwest.”

Stakeholders decided to focus on defining a design and process for manually linking related content.

Shared language

Before starting on designing new user flows and article pages I created a language dictionary for the project. The new article type would be a “roundup” to distinguish it from listicles. The internal tool to help editors create roundups would be scalable to allow for different templates in the future. This admin tool would be called a “content builder.” With engineering, product and editorial using the same language, I started to design what the solution might look like.

Designing a roundup

To determine requirements for the backend tool, I began by designing the new roundup article format. The articles being grouped needed to be easily navigated to and identifiable as stand-alone articles. There was no need for numbering as the stories were not sequential. Examples could include our annual Dive Award content or all of our coverage from a specific event.

Iterations on a roundup article
Iterations on a roundup article

After design discussion and critique the product design team picked a design borrowing from our feed component design with a prominent call-to-action. The design is easy to scan and highlights navigating to each article in the collection.

Designing a tool to build roundups

I then began planning how this article type would be created using our CMS. Previously, editors manually grouped related content using custom HTML/CSS.

User flows

I created user flows to understand how tasks relate to each other and determine how to best group actions. I proposed a few different user flows to the lead engineer to ensure the solution would be possible in our system. Based on performance concerns and to not clutter the UI, we decided the content builder would live in its own independent page.

The final user flow diagram
The final user flow diagram

Prototyping

I then created wireframes to visualize what the user’s interactions would look like. My previous user research told me that the editor’s had three main requirements for this tool:

  • Discoverability – they wanted to be able to link recent and old articles
  • Speed – they wanted to be able to aggregate the content quickly with few window changes
  • System feedback – they wanted clear error messages and the ability to preview their work

After reviewing the wireframes with the design team I created a prototype for editors to test the tool. During testing the user’s questions revealed unconsidered edge cases and the need for improved information hierarchy in the design.

Annotated mockups

After implementing feedback I redlined the mocks for our developers. I called out nuances of the different states, requirements and details open to interpretation based on implementation approach.

The annotated mockups
The annotated mockups for the engineering team

Results

After a few design concessions due to technical constraints the tool and design was live! Editors can now quickly create Roundup articles without having to code custom HTML/CSS. This reduces human error and ensures standard styling across publications.

The tool has decreased content creation time and increased the number of grouped-content articles. Editors can now search through previously published content and link it to a content grouping article. This allows editors to further share their reporting and provide readers relevant packaged content.

« Previous Next »