UI/UX Design


Users: Readers of Industry Dive’s publication sites.
Problem: Readers needed to understand industry trends to better do their job and lacked a destination to get that information.
Product description: A gated package of stories that helps readers get up-to-date on an industry trend.
Stakeholders: The sales team and clients who want to reach readers interested in specific trends with their products.
Duration: 1.5 years
Team: Ryan Willumson (Chief Revenue Officer), Colin Richardson (Sales associate), Tony Bagdon (Project manager), Malinda Ganther (Lead Promotion Director), Team Bee (Scrum team)
KPIs: Average time on page, return visits, gate conversion, lead quality
Role: Design Project Lead (requirements gathering, wireframing, UI & interaction design, prototyping, support team interviews, design iterations)
Wireframes were used to explore the structure and navigation of the content.
  1. Branding
    Label the Trendline as a product offering for clients and a content type for readers.
  2. Social Buttons
    Social buttons to allow for easy sharing.
  3. Introduction
    An editor’s note gives an overview of the trend and introduces the editorial team behind the stories featured in the Trendline.
  1. Story
    Related evergreen stories that are updated quarterly and combined create a full overview of the trend.
  2. Navigation
    Readers can easily explore the Trendline with sidebar navigation. The sidebar navigation allows for greater content  flexibility and visibility of all stories.
Mockups highlight the most important information in the package and the actions users should take.
  1. Branding
    A label from Snorkel design system uses a bold red to call attention to the product name. Dive Red is also visually associated with editorial content across the publication, creating familiarity for the reader.
  2. Social Buttons
    Social buttons are positioned in a top sticky bar to allow for easy sharing throughout the experience. Color draws attention to the buttons and links them with the social’s brand.
  3. Introduction
    Label the Trendline as a product offering for clients and a content type for readers.A full-width header image pulls the reader in and provides immediate visual context to the trend. The editor’s note uses the image of the journalist to reaffirm the content is from the editorial team.
  1. Story
    Stories are styled similarly to their individual format with a few exceptions. Images were moved above the title to create visual separation between stories. The title is slightly overlaid on the header image to economize space.
  2. Navigation
    The sidebar navigation allows readers to easily locate their place in the Trendline with a prominent “Reading now” label. The full headline of each story and its author gives the reader context to decide whether they want to navigate to it.
A lead-gen gate and strategic branding allowed clients to align with trends while collecting leads.
  • Challenges: When creating editorial content supported by a sponsor, there exists a balance between the client's desire for more visibility and brand awareness and the reader's understanding of the client's involvement. We clearly labeled content and used strategic language throughout the client copy and branding to highlight the editorial value.
  • Impact: Our readers are provided with an experience that allows them to better understand a key trend in their industry. As a successful content type, clients can sponsor Trendlines, driving revenue that supports the journalism in Trendlines.