2019 was a foundational year for the Industry Dive Product Design Team (PDT). We built and published our first design system, developed a robust UX research and discovery process and designed the UX and UI of several new journalism products, including:

  • Trendline – A series of articles on an industry trend – e.g. Cybersecurity – packaged together on a single webpage so our readers can quickly and easily get up-to-date
  • Roundup – A landing page for related articles that makes it easier for our readers to navigate between similar content – e.g. coverage of a particular conference

After the launch of these new products, we conducted a performance and access point audit of the various content types on our publication websites. The goal was to surface opportunities to improve our website UX in meaningful ways – e.g. identify poorly performing content types we might want to sunset and high-performing content types we might want to elevate in our site design.

The PDT also collaborated with Industry Dive’s Creative Design Team (CDT) on a major redesign of our corporate website, IndustryDive.com.

Design system

Snorkel Design System

Screenshots of the Snorkel Design System

Goal: Improve site development processes and hand-offs between engineers and designers

The process: Create a design system with well-defined, reusable components

We took a look at our publication sites and streamlined our design best practices, breaking the site down into components. After we had our components, we built a design system to help streamline development and define design standards. The outcome was a standardized and more efficient mock up process and consistent UI and UX patterns across our sites.

Team: Taylor McKnight (VP of Design), Jordan Branch and Natalie Forman (Product Designers)

Learn more: Introducing Snorkel, the Dive Design System

Journalism products

Trendline

Screenshots of a Trendline and process artifacts

Goal: Make it easier for our readers to catch up on a single industry trend – e.g. Cybersecurity – and generate leads for our clients

The process:

Step 1 – Design a page template that pulls together a series of articles on a trend into a cohesive reading experience

The design allows readers to navigate through the Trendline experience. It also includes a progress bar element, which indicates to the reader how far they’ve read in each article.

Step 2 – Architect a CMS tool editors can use to easily pull together existing trend articles and package them in the new layout behind a gate with a form

We created a tool in the content management system that gave editors the ability to group industry trend content by linking preexisiting articles. Previously, trendlines were coded by hand. This tool sped up the content creation process and reduced user error by eliminating manual development.

Team: Tony Bagdon (Project Manager), Natalie Forman (Product Designer), Miriam Sexton, Laura Lorenz, Josh Brown, Colin Burr, Bo Morin, David Barbarisi and Greg Linch (Engineers)

Roundup

Examples of mocks for the Content Grouping Tool

Goal: Make it easier for our readers to navigate between similar content – e.g. coverage of a particular conference

The process:

Step 1 – Design a landing page for related articles

The design for the roundup articles borrowed from Snorkel design system. We combined many existing design elements to create a new component that allows users to easily scan and navigate to each article in the collection.

Step 2 – Design a tool in our content management system for editors to group related articles

The Editorial team previously manually grouped related content by writing custom HTML/CSS. To reduce risk of human error and ease content creation, we designed a tool to help editors create roundups. 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. The tool has decreased content creation time and increased the number of grouped-content articles.

Team: Tony Bagdon (Project Manager), Natalie Forman (Product Designer), Greg Linch, Bo Morin, Chris Melgard and Derek Sharp (Engineers)

Publication websites content audit

Slides from the Content Audit presentation

Goal: Surface UX issues and opportunities for improvement across the various content types on our site – e.g. Job listings, event listings, news articles, longform trend articles etc.

The process: Assess the performance of our various content types via a content audit

We poured over our publication sites’ Google Analytics data and pulled out key findings that represented the performance of core features on our site. To put those analytics in context with the desires and opinions of our readers, we then categorized findings from a Reader Survey conducted earlier in the year and matched the analytics to those. A combination of both sets of data were used to inform product decisions.

Team: Taylor McKnight (VP of Design), Jordan Branch and Natalie Forman (Product Designers)

IndustryDive.com redesign

Home and about pages

Slides from the Content Audit presentation

Goal: Emphasize Industry Dive’s focus on business journalism, strengthen the public face of our brand and help prospective employees peer behind the curtain

The process: Refresh the corporate design and bring in new content that highlights our work and the people at Industry Dive

Our new geometric motif borrows from the diagonal in our logo and incorporates fade-in transitions and white space to guide the user down the page. We also incorporated photos of people to humanize our brand. The new design highlights our company values and our team’s leadership in reimagining business news.

Team: Taylor McKnight (VP of Design), Jordan Branch and Natalie Forman (Product Designers), Brian Tucker (Photographer), Kendall Davis (Graphic Designer)

Learn more: Redesigning the Industry Dive Homepage

Careers page

Slides from the Content Audit presentation

Goals: Attract top talent and emphasize our commitment to diversity (the makeup of our team) and inclusion (our culture)

The process: Highlight what it is like to work at Industry Dive through employee testimonials

Working collaboratively with the Creative Design Team, we designed a slider that highlights several employee testimonials. The graphic designers planned and executed photoshoots for the employees. The product designers designed the user experience and implemented the interactivity in HTML, CSS and JS. The new design allows prospective employees to explore our stories, so they can hopefully see themselves and their career growth at Industry Dive.

Team: Taylor McKnight (VP of Design), Jordan Branch and Natalie Forman (Product Designers), Brian Tucker (Photographer)