Recommendation Lists & Content Tools

Strategy / Research / Direction / UX / UI
Background

Group Nine brands dominate search engines and social feeds by applying their subject-matter expertise to hyper-relevant content that resonates with readers.  It is by far their most successful top-of-funnel content strategy, earning tens of millions of unique impressions every month.

While this strategy was incredibly effective at achieving its primary goal of driving traffic and hitting advertising goals, the value proposition for our readers was severely lacking any meaningful utility, which was proven by the shockingly high bounce rates that demonstrated millions of readers coming to our site, getting the info they need, and being forced to leave in order to take action…which was all surprisingly the status-quo across our competitors for this type of content. Nobody seemed to be taking advantage of the opportunity to convert this massive user base of passionate readers into loyal consumers.

Millions of passionate users were coming to us every single month.

As we excitedly dug into this white space rich with potential, we uncovered how burdensome the production workflow of this content type is for our editorial teams.  While enthusiasm for this content to come to life was alive and healthy, early proposals of new features that required β€œeven more CMS fields” had our editor’s heads spinning. With this new information in hand, we broadened the scope of this project to include editorial tooling efficiencies that will enable our editors to focus on telling their story, and not on tedious time consuming data collection & entry.

  • β€” Drastically simplify the editorial production workflow by launching new features on top of our Drupal-powered CMS that will automate the ingestion, creation, and upkeep of list-instance node types such as venues/locations, products, media, and more.

    β€” Introduce the concept of List-nodes that can be rendered in numerous formats such as written articles, emails, social stories, on maps, and as guides/collections on other platforms, and more; thus maximizing the potential impact of each list we create.

    β€” Boost KPIs such as brand loyalty, time on site, lower bounce rates, and ARPU by launching new user-facing product features that will make our content more actionable and engaging.

  • β€” Internal processes. Our editorial teams have robust processes in place across all content-creation strategies. Any drastic changes to how they create content would be met with hesitation & friction.

    β€” Technological limitations. Our CMS was built atop Drupal over the course of a decade with little UX+UI input. This meant navigating significant limitations to ensure these updates would not impact other processes across all of our brands.

    β€” APIs and Data Resources. Despite a robust product roadmap detailing the potential impact of these product enhancements, we had a limited budget for acquiring the data we’d need to create an autonomous process for editors and a useful experience for readers.

  • β€” Research & Interviews. After we determined that location-based (food/drink, points of interest, etc) and media-based (what to watch) as the most common types of list-based recommendations, we put together a series of interviews to build a holistic understanding of how people engage with this content, and what could make their experience memorable.

    β€” API Research. In order to automate the data-driven side of this project, we would need to partner with different services that offer the data points we needed to build a successful product. This meant researching, auditing, and negotiating with multiple vendors.

Lay Of The Land

While wildly successful at earning significant traffic from search and social feeds, these lists fail to deliver value to our readers beyond the words on the screen. Unless production teams did the legwork in sourcing crucial data, the onus to take any action is entirely on the reader.

Beyond baseline recirculation and subscription products, these pages were essentially high-traffic dead ends.

 

Location-Based Lists

MVP

The most common list type was location-based recommendations. Where to eat or drink, vacation rentals, national parks, voting locations, adoption shelters, meteor sites, filming locations, etc. Regardless of subject matter, it all tied back to a specific location.

The value-prop opportunities for our readers and our editors were nearly endless.

Tools & Production

With a primary goal of editorial-user adoption, we decided to make the creation of a List Node nearly identical to what our editors were used to building in an Article Node…but what formerly required dozens of data-points manually sourced & entered per list instance now only required one.

By leveraging Foursquare’s API, editor’s can automatically generate a Location Node by simply using the FSID. If a location happened to exist in our system, it would reference that one vs creating a new one. These nodes were rich with up-to-date data about each location that could now be rendered in a number of ways. Additionally, each Location Node would feature how many times it’s been referenced, bolstering the value of those pages to our users & provide our editors with insight into the most popular places they write about.

 
Location-Based Lists

Article View

Naturally, the β€œarticle view” was the most common touchpoint. The MVP of this product would automate the following processes for our editors, clearing their plates of everything but the story they’re telling.

  • Photography was the number 1 requested feature from our user interviews. Above all else, they want to get a sense for the vibe of a location. This was also one of the biggest burdens for our teams to source properly licensed photography, and commonly resulted in only select list instances being paired with a photo.

  • Locale would default to a neighborhood or region

  • Category displays the type of location it is. Cafe, Brewery, Library, Park, etc

  • Price Point shows the average cost on a scale of 1-4

  • Reservations & Take Out relied on affiliate partnerships with a number of services like Seamless, Grubhub, DoorDash, Uber Eats, and more. This feature required an additional flag on the unique Location Nodes, but once that information was included, calls-to-action would appear anywhere these locations are featured, and would generate a new stream of revenue through affiliate agreements.

  • Also Featured In displays the headlines of other renderings of List Nodes across the site…providing a recirculation opportunity, but also further insight for our readers.

  • Map CTAs are displayed at the top of these articles, as well as alongside each individual instance.

* Each datapoint would default to the information coming from the Location Node, but editor’s maintained the ability to customize that information in each respective list without disrupting the source of truth.

 
 
Location List Node MVP

Map View

One of the first new renderings of a List Node was as a Map, accessible from multiple entry points on the Article, but also discoverable from landing pages, emails, and social.

The best part? This requires zero lift from production teams while delivering incredible value to our users.

The map re-used the exact same components from the Article, just displayed in a different way to satisfy the browsing habits of people who care more about proximity to where they currently are, or plan to be.

Location List Node

Version 2.0*

Article & Map View

Version 2 introduces a few more robust features such as numbering, image carousels, real-time open status, and booking rides through Uber and Lyft (affiliate revenue!).

* V2 has not launched yet as it requires foundational changes to our base node design as well as more robust API resources. We anticipate performance data to validate the value of investing in this product further.

Location List Node

Product Progression & Planned Roadmap

 

Lessons & Outcomes

β€” Some of the biggest hurdles we encountered was around adoption of new processes & tools for our editors. The original version of the List Tool in our CMS was more complicated than it needed to be. Identifying this issue & proposing a significantly simpler approach via the FSID Field quickly gained support from our editorial users.

β€” Our Design System, Negroni, was an absolute game changer for this project. We were able to rapidly build new patterns with existing components, and make these features available across brands.

β€” Don’t design in a vacuum. Another hurdle for our team was navigating the numerous types of location instances. The metadata associated with a Restaurant is going to be different than the data associated with a landmark like the Brooklyn Bridge. Things like hours and price point are no longer relevant for both instances. While parity in pattern structure was highly desired, it also needed the flexibility to work with different variations of the same top-level list instance type.

Negroni Design System β†’

Strategy / Research / Advocacy / Creative Direction / UX / UI

The proprietary Design System powering the front-end of every brand in Group Nine Media’s growing portfolio. This system maintains a consistent user experience across our products, makes new features available cross-brand with wild efficiency, and drastically reduces redundant coding, qa, and support all without sacrificing brand expression. Most importantly, it freed up my nimble team to focus on new priorities vs reinventing the wheel. Cheers πŸ₯ƒ.


NowThis News β†’

Strategy / Research / Direction / UX / UI

β€œHomepage. Even the word sounds old. We bring the news to your social feed.” That simple brand-defining mission helped NowThis build a herculean one-of-a-kind brand that reaches over 80% of millennials in the US. It also meant their web experience needed to break the mold of traditional media just as much as their brand has.