At the beginning of 2017, the Group Nine Media Tech and Product teams divided team members into small groups called pods. Each pod focuses on specific business functions. We’re the Ad Pod — a nimble, bi-coastal group of 5 with a focus on sponsored storytelling 👋.
We offer our client partners a step further than a sponsored article or banner ad — a chance to have their advertising connect uniquely with our content without sacrificing our brand voice or style. This has yielded valuable product integrations and custom content destinations that our audiences enjoy and that have been recognized as the “Best of BrandTale” four times.
Keeping a user-first mentality on a client-driven team can be a challenge. Since we are a relatively new group, it took some time to turn the push and pull of client feedback into valuable products that our audiences trust despite any sort of skepticism toward ads. These circumstances keep us learning from our past wins and areas for growth. By carefully gaining and analyzing quantitative and qualitative feedback, we’ve been able to improve to consistently deliver our best work.
In our 2017 Year in Review, we want to showcase a few of our favorite and most successful projects. This includes covering our favorite product integrations, ways we’ve used our past observations to improve our products, and strong cross-company collaborations.
Day Trips: Offering Audiences a Trip-Planning Alternative
Our campaign with Maven was particularly fun to create because it supplements Thrillist Maps with a new “distance calculator” that makes the content even more relevant to our audience.
We wanted this piece to stand out from other road-trip pieces we’ve seen by including not just possible destinations, but easing the burden of planning by offering helpful details and presenting Maven — a car sharing service — as a solution.
The campaign consists of a series of maps with day-trip destinations around 19 different metro areas in the US and Canada. It identifies a reader’s zip code, and calculates the distance and driving time to each destination. If a user is within the relevant city, we display the users actual zip code. If they are outside of the city, we default to the zip code of the city’s center — making it easy for travelers to plan day-trips when going to a new place. “Day-trip” was defined as fewer than two hours driving time. The feature is different from the type of venue round-ups that Thrillist is known for, which typically focus on neighborhoods and locations with a close proximity to each other. The long distances between our “day-trip” venues called out for some additional context to help users get oriented to the map and list.
Making the Neighborhood: A Multi-Part Series with Scale
“Making the Neighborhood” is a campaign Thrillist created in partnership with GMC. It highlights up-and-coming neighborhoods in cities around the U.S. and Canada by talking to community activists and business owners in each of the locales about the qualities that set them apart.
In a lot of recent work, we’ve been tasked with creating custom landing pages, or hubs, that showcase a list of articles or videos. The challenge with this is that many landing pages offer relatively little information. This means that if we or a client want to promote a hub, an audience member would have to click into the hub, and then click away to an article page before getting to the meat of the campaign.
With the design of “Making the Neighborhood,” we sought to make the hub more of a destination itself by treating each page as a snapshot of a neighborhood — if an article page is a meal, this landing page is an appetizer.
We’re also excited about this format because of its ability to host multiple content types. It can house long or short copy, as well as photos or videos. It’s extremely flexible, and since this is one of the first campaigns in our new code base, we can optimize it to become more reusable. This reusability will be evident in upcoming campaigns.
Optimizing For Reusability
Since the creation of this pod, the codebase has changed a lot. Initially, the campaigns were written in PHP and Javascript, and were directly tied to all of GroupNine’s codebase. We had some shared code amongst the campaigns in the form of PHP code snippets and shared javascript/scss that got compiled with webpack. Mid year, we started thinking of a better way to build these campaigns and came up with a React based platform that leverages Next.js, AWS Lambda and Babel to improve productivity and reusability. (More on our tech stack in a upcoming blog post!). Throughout the creation of this platform, we’ve consistently been improving, refactoring and coming up with new ways to increase reusability of our React components to future proof the codebase.
“Making The Neighborhood” was the first campaign hosted in our new code base, so we are currently using it as a stepping stone to make aspects of it’s code more abstract and reusable for future campaigns using higher order and shared components.
At a high level, the React Components are separated into three main parts of the campaign: Introduction Page, Article Page, and Right Rail Navigation. Our stylesheets were also refactored to include boilerplate styling for these three sections. In addition, we used React to change the way we pull information from our CMS (Content Management System), ensuring editors can easily update campaign content on the fly without relying on a code push.
On the design side, we sectioned off every bit into customizable segments, allowing us to create highly custom designs in the future while relying on the bones of “Making the Neighborhood.” We’ve also collected quantitative data and conducted in house user testing (no small feat considering how lean we are!) to understand this template’s strengths as well as areas for improvement. We are already using our findings from this user testing research to make future campaigns more intuitive.
Best New Restaurants: Strong Collaboration & Taking Criticism
Another design we’ve had the pleasure of iterating on is an editorial feature called Best New Restaurants 2017, sponsored by Microsoft Office 365.
This feature consists of four parts: the best 13 restaurants in the US; the best restaurants in different cities; the best chefs of 2017; and prominent dining trends.
There’s a lot of content, and similar to “Making the Neighborhood,” we had the challenge of making the landing page feel like a destination.
It’s always important for us to work closely with our editorial team to ensure that the design elevated the content. For this project, we worked closely with the Thrillist Associate Art Director, Drew Swantak, to create moodboards in order to learn the style of imagery our photographers would capture, and then we consulted with them to make sure our proposed designs appropriately showcased the art.
Our team and the editorial team were both excited when this piece went live. But after a few days, we noticed some Facebook comments voicing concerns about the navigability of the piece.
We’d done some informal user testing prior to launch, but because of tight deadlines, we weren’t as thorough as we would’ve liked. The feedback we found on Facebook was extremely helpful in allowing us to understand how our audience was using the piece.
After sorting it into themes, we made slight tweaks to the designs and worked with the editorial team to reorder the piece.
We have plans to conduct more formal user testing on the page in the near future, in case we choose to use the format again for upcoming feature stories.
So 2017 was a year of discovery for the Ad Pod. With each campaign, we learned not just about our audiences, but about how to refine our processes and communicate effectively within and outside of our own team. Our team hit the ground running, working on 14 campaigns in 2017 — with return clients already coming back for more business in 2018. We’ve made almost 950 commits to Github, grown the team 25%, and been a part of some kick-ass campaigns.
Going into 2018, some of the questions we’ll be tackling are: How do we collaborate more thoughtfully with editorial teams? How can we maximize our work in instances where we have very tight deadlines? How do we conduct thoughtful user research in short amounts of time? We’re armed with much more experience and knowledge to shape our work and are ready to keep pushing, experimenting and learning.
Cheers to 2018, and cheers to the work ahead of us.
The Ad Pod is:
Adam Baumgartner, UX Designer
Derek Springsteen, Product Designer
Tara Siegel, Senior Software Engineer
Emily McHale, Product Manager
Melissa Morel, Software Engineer
