arrow-forward arrow-back hamburger facebook linkedin medium twitter modal-dismiss caret menu cross telephone map-marker
Skip to main content

Blog

The Bold Italic: A Product Design Approach to Content Strategy

blog post image

I. The Problem: Lost Opportunities for Reader Engagement

The Bold Italic (TBI) is a San Francisco-based publication that delivers stories from all corners of the city to newcomers, natives, and everyone in between. In addition to serving as a hub for pertinent topics of the day, TBI hosts and publicizes events throughout the city, and sells goods from local artisans. TBI is the authentic voice of San Francisco offering readers a never-ending celebration of the City by the Bay.

The Bold Italic

TBI was founded in October 2009, making it an elder statesman in the world of online publishing. In the past five years, the digital editorial landscape around TBI has evolved considerably as other online media properties experiment with new ways to engage readers. In comparison, TBI felt that their web presence had grown static. Visitors weren’t accessing its rich content in part because the site’s user interaction wasn’t leading readers in the right directions. TBI’s three content types also weren’t well integrated, making them appear unrelated when in fact there are many points of connection between them.

II. The Remedy: Reimagining and Reachitecting for Reader Engagement

In the fall of 2013, TBI engaged DesignMap to reimagine and rearchitect content navigation with several goals in mind: increasing page views, decreasing bounce rates and creating a robust sponsorship platform for TBI’s advertising partners.

At DesignMap, we saw an opportunity to touch all aspects of TBI’s business, from content strategy to advertising revenue to user experience, and move TBI into a leadership position in the online editorial domain. And, of course, we needed to do all this while minimally disrupting their publication schedule and staying within the limits of their timeframe and resources.

With a project timeline of only a few weeks, TBI agreed that providing flexible, future-forward designs to support experimentation was the right strategy. Using our ideas and frameworks, TBI could try out different designs and then determine the most useful strategy for their next steps.

III. First Steps: Airing Fears and Finding “Guiding Stars”

Before starting, the entire team met for a Pre-Mortem. Pre-Mortems offer an opportunity for all stakeholders to air fears, concerns or even wild fantasies of disaster before work starts. This process is a kind of risk assessment that minimizes surprises down the road and allows us to identify strategies to address potential roadblocks early on.

We began this meeting by asking, “Imagine we’re at the end of the engagement, and this project failed completely. What happened?” We collected everyone’s concerns and worst fears on a white board. Some feared TBI would lose its personality or ‘soul’. Others were worried the design would be unfeasible or too expensive. At DesignMap, we had concerns about expectations for a final, perfect design in a tight timeframe, even though we’d agreed that we were establishing a direction that TBI would flesh out and iterate.

Airing our fears and concerns during the Pre-Mortem
Airing our fears and concerns during the Pre-Mortem

We then matched each ‘fear’ with a strategy to address it. Our list stayed on the wall for the engagement’s duration to remind us of possible pitfalls and ways to intercept them. Together we also agreed on several high-level principles to serve as “guiding stars” through the entire process. We brought these principles, which included “Be aspirational,” “Be experimental,” and “Keep The Bold Italic soul intact,” to every meeting on an easel-sized post-it so that we didn’t lose track of them.

IV. Mapping the Problem and Reframing the Solution

Our next step was to find a way to define the design problem at the center of the project. Analytics showed that a vast majority of users landed directly on a TBI article through social media, which meant that all content types were potential gateways to the rest of the site. Given the variety and multitude of article designs on the web, we needed a way to evaluate them from a conceptual level. 

We started with an audit of TBI’s site, creating a bird’s eye view of their page structures. Then we applied this same view to several inspirational competitors TBI felt were going in the ‘right’ direction, identifying common trends and strategies that seemed to echo throughout the broader online editorial landscape.

Diagramming The Bold Italic's various content type pages.
Diagramming The Bold Italic’s various content type pages.
The Bold Italic's sections felt very separate from each other, as if they are totally unrelated.
The Bold Italic’s sections felt very separate from each other, as if they are totally unrelated.

Using the results of this work, we were able to reframe TBI’s reader engagement problem around two attributes that impact bounce rates and page views: user attention and number of content links.

Framing the reading experience around user attention and number of content links.
Page designs can focus user attention on a specific content or offer readers a kind of content ‘buffet’ with lots of choices. Likewise, number of links can also impact user engagement: limited choices move reader to specific content while many links encourage readers to jump around.

We created a matrix using the scales of user attention and content links and mapped TBI with their competitors to highlight where the opportunities lay. What the matrix clearly showed was that the reader engagement strategies of TBI’s competitors put them high on the focused content scale and either in the middle of the content links scale or towards the “few” content links end of the spectrum. In contrast, TBI’s current place on the matrix showed that their design provided many content links and had a diffuse content focus that lost opportunities for reader engagement.

matrix
This matrix maps TBI (yellow) with their competitors (blue) to show where the opportunities lay.

V. Making

To get our conceptual juices flowing, we wrote up some scenarios describing current TBI readers. TBI also wanted to reach beyond their core fan base, so we added scenarios about new readers with ad hoc personas embodying different neighborhoods, subcultures and goals.

TBI and DM collaborating on personas.
TBI and DM collaborating on personas.

We sketched out scenarios for finding ways to kill time, be a tour guide to visiting friends, or join a conversation around a timely, local topic. Then we performed a few user tests on three concepts and narrowed the right options to two designs: an issue package and a design that uses ‘neighborhoodness’ as the central navigation concept.

Issue Concept
The issue concept gathers content across the site, including events, comments, articles, ‘mouthoffs’, and more, into one focused topic.
Neighborhoods Concept
Neighborhood navigation gives readers access to all of TBIs content types using place as the starting point.

VI. Deliverable: “Web Site Science Kit” for Testing Hypotheses and Gathering Data

TBI deserves a site that lets its content shine through to every reader, no matter how they enter the site. Part of the TBI’s draw is its dynamic quality: readers can jump from a photos essay to different ways of styling hair to a sobering account of on the impact of gentrification on SF neighborhoods.

Our deliverables presented TBI with two possible permutations for capturing that dynamism. In essence we gave them hypotheses for improving reader engagement that TBI use for gathering data before moving onto the design phase. We also recommended next steps towards a launch strategy to give them a clear path for moving ahead forward when ready.

The two final directions.
The two final directions.

Our early Pre-Mortem to layout expectations and concerns before starting; our easy collaboration with the fearless and positive TBI team; and TBI’s receptivity to a “web site science kit” for experimentation made this project a success.

Senior Designer

Tiffany Chen

Contact icon

Let's talk about your needs and how we can help. Get in touch

Contact icon

Interested in joining the DesignMap team? Let us know