My role
At the time of this project, we did not yet have product managers on the team and I had just hired a new junior product designer. Throughout this work, I was responsible for defining the needs of the users and scope of requirements as well as mentoring the product designer on her first project. I collaborated with a technical project manager and senior engineer when defining solutions and estimating efforts to ensure the scope of work was appropriate based on the perceived company value.
The challenge
In October 2021, a bug report came to the engineering desk asking for help. All of our editorial trackers were broken and unable to load. Trackers are an article template type that aggregates insight across a group of similar objects (e.g. companies, people, countries/states). We had previously been using a Google Sheets integration to manage these and it had just been deprecated.
These articles were a high priority for the Editorial team as they generate high volumes of traffic and have a high newsletter conversion rate. Due to their value and lack of a quick-fix solution, the need to remove the Google Sheets dependency was fast-tracked.
Tracking success
For this work, there were two types of success metrics, reader engagement and newsroom adoption.
Reader engagement
- Page views
- On-site newsletter signups
- Returning readers
Editorial adoption
- Number of trackers published
- Time spent on creation and maintenance
- Quantity of support requests
Research and analysis
To begin, we interviewed a diverse group of editorial team members to understand how they currently use trackers, the pain points they face, and their perceptions of how the readers valued the content and interacted with the articles. Through these conversations, we started defining value and requirements for our two user groups, editorial team members and readers.
Reader needs
For the reader, we would need to focus on navigation as the trackers contained high quantities of updates. It was assumed that readers either came to a tracker looking for the latest information or were seeking insights on a specific item. For example, they either would want the latest development on something like the Covid-19 vaccine, or the regulation information regarding the specific State they lived in. Few readers came to these pages looking to read all of the information or casually peruse.
Editorial needs
For the editor, we would need to make it easy to add content to the tracker and surface updates and groupings that they found relevant or important. By auditing all published trackers and sorting them we were able to determine that filters/tagging would be important as well as the ability quickly scan through the items.
Competitive analysis
Finally, we researched competitor examples to better understand how other publications manage large quantities of updates and items. We conducted a strength/weakness analysis of the designs to determine which navigation and hierarchy patterns might be helpful for our work.
Designing the solution
Now that we had a list of requirements, priorities, and an understanding of reader needs we started designing the internal management system as well as the reader-facing user interface. For this work, I led the CMS tool work and let the new product designer lead discovery on the reader-facing design.
CMS tool
To build the internal tool, I first audited our current content grouping methods to see if we could build upon already built tools and user flows. I ended up designing the solution based on a tool used to group articles. The editors were already familiar with the patterns and the engineers would have an example to build off of.
The challenging part of designing the CMS tool was defining what elements of an item needed to be flexible and which ones should be standardized. There was a fine line between providing the team with flexibility while also streamlining workflows and ensuring a cohesive design.
After designing the first draft, I conducted usability testing with the editors to see if this approach would work. Based on their feedback, I realized I needed to further refine:
- Language around product features and elements
- How to setup and maintain filter and label taxonomy
- The process for elevating updates and new content
I then took these designs to the engineering team to discuss the direction and see where we could push the ideas and where we might need to pull back on complexity. We then finalized what we considered v1 of this work with the engineers and stakeholders and began implementation.
Reader-facing UI
While work began on the CMS side, I worked with the other product designer to refine and finalize the designs for the reader-facing UI. Our discussions and iterations focused primarily on the navigation of the tracker content and ease of scanning and hierarchy of the tracker items.
Through peer reviews and stakeholder discussions, we refined a design with highly visible filters and strong item headers. We also incorporated a truncated design that allows the reader to expand items when the content is long to ensure ease of scanning.
Challenges for refining the user interface included supporting dynamic content of varying length as well as providing a good reading experience for a wide range of content quantity, from 10 items to over 200.
After finalizing the design, we quickly moved on to the next round of work for the items which included adding a header image as well as item links to allow readers to share a link directly to an item.
Results
Two months after the product launch, there were seven trackers active across Industry Dive’s publications. There has been positive reception from the newsroom around how easy it is to use and the design being visually appealing.
"We are so happy with how it turned out"
– Food Dive Editor
In terms of reader reception, each of these trackers were in the top 10% of articles driving newsletter signups in the month they were published. We are still monitoring reader engagement and will be analyzing time on page as well as engagement with the content to gauge success.
A few of the published trackers
- Here are publicly traded higher education companies’ 2022 earnings, Higher Ed Dive
- Tracking the development of Kroger’s automated e-commerce center network, Food Dive
- The running list of major retail deals, Retail Dive
Due to interest in the product from the newsroom, we plan to further invest in the product. We are currently designing template options for the reader-facing cards as well as exploring different ways to promote the content across our product.
