Notes

from the trenches
of a total mobile redesign


Background

In early April 2015, the Society for News Design met in Washington to discuss the state of digital news design. What follows are the lightly edited speaking notes I used in my talk about redesigning The Globe and Mail’s main news app. The full presentation deck is available on SlideShare, although the key slides are included here. Since these were my notes, expect some missing content and leaps in logic. And given the timing of the presentation, there’s no mention of the intital launch and reader response.

Four platforms

The Globe and Mail’s brand experience, like most newspapers, is still heavily anchored by the print design. This is the design that most people imagine when they think of The Globe and Mail. Glossy pages front pages, magazine quality photographs, rich colour use. The goal was to position the newspaper as a quality reading experience and it worked.

The website was also redesigned at that time (in late 2010), although it was built with different goals. The visual design was more web-centric, and the primary goal was to encourage readers to click just one more page. In a sense, the website was built to always remind readers that there was one more story to read. Four years later, the design was refined again when the then editor-in-chief observed that the website didn’t reflect the editorial thinking of the newsroom: It was always chasing the new and missed the bigger stories the journalists were focusing on.

The second generation iPhone and iPad apps (in market since 2011) again reflected that web-centric hub-and-spoke pattern. Although these designs have been successful over time — winning recognition from Apple and from The Globe’s readers — they were built to serve all the news to everyone, that business model is no longer viable.

This, of course, is because the bulk of the audience reached The Globe and Mail’s news stories through social media, and specifically, through mobile phones using Facebook and Twitter (which is, admittedly, my own personal news service).

Brand gap

While people have high regard for The Globe and Mail brand, they still continue to see it through a print lens. And that print platform is one the company is intentionally shrinking in favour of the more efficient digital offerings. The Globe’s monthly digital readership is roughly ten times higher than it is in print.

Changing media habits

And this maps to the changing news habits of Canadians.

Traditionally, Canadians, like Americans, read the newspapers in the morning. They listened to the radio on the way in, and out, of the office; and then watched the evening news broadcasts.

But in the past few years this has shifted, and now, the majority of Canadians get their news from a digital source. Those readership habits, in turn, begin in the morning, peak at lunch before recovering again in the evening.

One medium, multiple devices

Looking a bit more at The Globe and Mail’s traffic, there’s a pattern which isn’t dissimilar from others news organizations:

  • Mobile — smartphone — traffic begins at wake-up (it’s my alarm, for example) and continues consistently throughout the day.
  • Tablets have taken the place of the traditional newspaper readership time in the morning, and is also competing with the bedside reading.
  • Desktop’s share is shrinking, but does still peak at lunch as office workers look for something to read while eating at their desks. In fact, the design approach of most desktop news sites is akin to a buffet, offering a sampling items to quickly snack on. The mobile web, on the other hand is built on word of mouth recommendations thanks to social sharing.

Responsive and adaptive

This mixed usage has inspired places like like Quartz, and the Boston Globe, to adopt the responsive web design approach which simplifies the number of sites companies need to manage. Just as importantly, it’s also made it easier to draw one more page view from every visit.

For a number of years now, The Globe and Mail has also been experimenting with responsive designs. The designers have been building prototypes to explore how The Globe would feel in this kind of design framework.

The team has created multiple variations, using real content, and by late 2013 had landed on an approach which focused the sections to ten or so main categories. As readers scrolled down theses sections pages, the stories for on that topic would appear in full.

Testing on the Android

The first public version of this concept launched in July 2014 with the Android tablet experience. With a tight timeline, the design goal was to integrate the newsrooms editorial focus into a more tablet like reading experience.

Readers could swipe through the sections on the native app like a carousel, but like the prototype designs, they could also scroll vertically down through a news feed to read the complete stories.

After launch, the Android tablet app was achieving the company’s internal success metrics for engagement (meaning, more readers were spending more time reading more pages), but the experience on a tablet still felt too “gamified.” The emphasis on a continuous scroll unintentionally invited the reader to swipe all the way to the bottom of a section; the design encouraged consumption more than cognition.

Doubling down on the tablet

The Canadian media landscape changed when the publisher of one of Montreal’s biggest dailies, La Presse, decided to abandon its daily print edition, and instead invest a considerable sum to migrate its 800,000 plus readers onto a daily tablet edition…

La Presse+

[Guy Crevier, president of La Presse,] expects the $40 million investment
to be recouped in 18 to 24 months from now.

La Presse’s bold move led to a beautifully designed digital daily, that was free and ad-funded. Like first real iPad news publication, The Daily, La Presse+ is produced like a newspaper, with a new edition each morning featuring ads in predefined positions.

At the time La Presse announced its plans, Canada’s newspapers — including the major newspaper chains, and the Toronto Star — were in the midst of launching digital subscriptions. (The Globe’s third web-based subscription product offering was launch in October 2012.) After a year of in the market, La Presse was claiming its 400,000+ weekly readers were spending 40 minutes daily with the app.

Many publishers reconsidered their initial reaction.

One of them was the Toronto Star, which abandoned its digital subscription in favour of licensing the La Presse+ platform for its own free daily tablet that’s supposed to launch later this year.

What’s your value prop?

As intriguing as the idea was, The Globe and Mail knows Quebec truly is a distinct media landscape with its own dominant language, business, and culture. Additionally, The Globe had something the other papers did not: hard data on what and how people were paying to read on its various digital platforms.

Last fall, I gathered the head of technology and the head of the digital editorial team to outline a product brief using a couple of The Globe’s customer personas and a value proposition model.

“Project Apt”

Offer insightful, informative, personally relevant journalism for the Canadian business decision maker within a well-designed, and finite, reading experience.

The two-and-half-page brief was started with our readers in mind, but was governed by laws of physics as defined by the revenue department’s targets and goals.

The concept was to build a standalone tablet experience that reflected the structure of the newspaper, but embraced the constant flow of news information funnelled through the websites. The product would use a few daily moments to showcase the day’s evolving news to the readers.

Monday to Friday would include morning, lunch, and evening updates timed for when tablet readers were typically looking for the news. For the first time digitally, there would also be a weekend edition highlighting the longer reads from the Saturday edition.

The visual design would reflect, but not mimic, print so as to create a familiar reading experience for the core audience.

The last piece of the puzzle would be the predictive recommendation engine informed by the digital reading habits of The Globe and Mail’s various audience groups. These recommendations would make every edition unique to each reader and, ideally, bring the surprise-and-delight of a print reading experience to the tablet.

Sprint Zero

In one of the fastest process I’ve ever been involved in at The Globe, this concept went from a brief to a fully-funded project. The Globe and Mail hired Code and Theory to help refine the design vision and build out the project plan.

The app, it was decided, would be similar to the brief, although it would include a few key sections. There would also be a place for investor-focussed readers to access their stock information. And there would be a new story formats, as well:

  • The popular business briefing would have a custom template built for a quick scan of the latest news.
  • And in a nod to Vox, Timeline, and Circa, readers would be able to follow selected news narratives (think Rob Ford, elections, etc.)

Even as the product plan for the new tablet was being established, speed bumps were appearing.

After reviewing the technical requirements, and considering the revenue targets, the iPhone was brought into scope.

In parallel to this work, the internal design team was creating an Apple Watch experience.

The haircut

Then, during a very memorable meal with some key execs in January, I learned that our ambitious plans for a fall release would change.

The schedule was cut in half.

The new plan was to align this app launch with a larger marketing effort.

The new app would need to be in market not in the fall, but in May.

A picture or 1,000 words

A few short weeks later, The Globe and Mail was reviewing two early design directions. Both spoke to the brand, but emphasized different elements of it.

True to text

Because the app was now anchored to the timelines of a print redesign, it meant the team would be working more closely with the print edition’s art director.

This gave the design team a more intimate understanding of how to reflect the print’s brand ideas into a digital experience. It also presented The Globe, which, as a company, had by now fully committed to the timeline, with a new opportunity.

Charts

Editorial was already reorganizing itself in preparation for this new app. Morning news meetings were being replaced to reflect the various editions planned for the the app. A dedicated team of developer-journalists were hired to create editorial features for the app.

One of those was a chart tool (to be open-sourced later this summer) that allows journalists to drop in some basic data and create a chart that can be used on the web

Everywhere

…in the apps, and in print (in fact, the first chart appeared in print a few days before this talk).

The Globe is using this shift not to weaken print, but to create a visual language meant to unify the four major platforms, creating touchtones readers can connect with across the variations.

The charts would also help offset another ramification of the contracted timeline: Investment tools and data were no longer possible. These charts would now be used as “modules” to enhance business stories without overwhelming the backlog of app development tasks.

Module as building block

Modules, like those chart, allow editors to better control the pacing of the app. A collection of modules can be combined into high-density packages for the morning or to emphasis the visual tone of the new “Report on Business” section.

They could also create medium density for lunchtime or to highlight the photos in the “Sports & Culture” section.

Featured stories

The weekend section could use a low-density package to showcase the visual design created for the lead story. Or editors could pick this layout style to highlight an evening read.

Packaging sections

Combining these packages on a section opens the opportunity to better define distinct editorial moments, which could be interrupted when needed by special features, advertising, or marketing messages.

How they were arranged, and which layout was used, could become a signal to the reader on the volume, and importance, of new stories published.

All of it, from the layers, to the scroll depth, would, of course, be measured.

Natural reading

As the various section layouts were being built, the team began focussing on how readers might move through the experience. The guiding principle grew from the “instincts” developed during centuries of print reading: Let people flip through pages, backwards and forwards.

(At this point, too, the scale of the app was again cut to accommodate the approaching deadlines. Sections like “Investor,” “The Magazine,” and “My Globe” were dropped.)

It moves

In mid-March, the design team collected the various pages into an animation demonstrating how readers might move from section to article to article. Some of the details of that plan, though, were already being pushed to a future release so eveything would by ready in time for a May debut.

Polish

With so many of the original product features being reduced, the revenue teams aggressive targets were becoming more challenging to achieve. The focus turned to defining as much of the design details, and ensuring the visual and interaction design was crisp, polished, and clear.

Without that level of of quality, those familiar with the existing app (which was being built on top of the old in app in order to meet the audience size need by revenue) could feel neglected and lost. The attention to the design details would also signal to people newly downloading The Globe and Mail app that it wasn’t just another way to scan for the latest headlines. These stories were meant to be read.

Get working

To design all this was one thing, but building it all for that May release meant there was a tremendous amount work ahead.

The Agile board, in mid-March, tracking the epic stories for The Globe and Mail’s app work.

The Globe enlisted The Working Group, a talented Toronto development firm, to help build the app itself. TWG had proven itself with its work on The Globe’s Watch app, and as a result, had familiarity with the content management systems controlling of the various layouts.

Even with that advanced knowledge, there were less than 10 week of development to make this complex new app concept real.

Cut again

This meant the scope needed to be trimmed once more. Along with the sections cut earlier, the follow stories feature was dropped, as was the special templates for briefings.

Still, challenges remained, particularly around:

  • Reader flow
  • Advertising
  • Type design

Reader flow

The design team knew the app needed to offer readers more than a singular daily edition containing a few dozen stories the newsroom publishes each day. While the finite experience would enable the reader to develop a better mental model of the experience, it was important to offer curious readers the chance to explore and discover more about the stories they have an interest in. At the end of articles, those readers would be able to discover more related stories on the topic at hand by pulling-up from the bottom of a story.

Save for later

Originally featured as part of the web-based product, the save feature became a key highlight of the iPhone/Watch and iPad experience. Save for later also returns the control of the news reading experience back to the reader by giving them a chance to read the news they want, when they want it. Conveniently, it would also reduce some of the offline reading complexity by limiting offline to saved articles only.

Breaking the flow

These new and subtle enhancements introduced complications into the initially planned “natural” reading model. That resulted in countless hours of debate over the phone, on whiteboards, and with paper prototypes as the design and development teams struggled to find something that was workable in the weeks remaining.

Constraints can, as we all learn over and over again, breed clarity — if not always creativity. The agreed upon direction would allow the reader to move through app much like a webpage (and, coincidentally, very similar to Medium): swiping left would move them through the articles, in order, swiping to the right would retrace their steps, all the way back to the original section they started on.

Advertising

The next challenge to contend with was the limitations of the industry’s ad delivery platforms.

I could rant for hours on the problems created by relying on IAB ad units.

But I won’t.

(At least not right now.)

Dynamic layouts

The design called for layouts which responded to advertising needs, that would adapt to whichever ad size delivered. The reality, though, was the ad servers were too slow. With hundreds of milliseconds between every call-and-response, page rendering crawled to a halt, and with it, the reading experience.

Slight of hand

A short-term solution was to disguise the delays by shunting ads further down the page and further separating out the ad calls. The top editorial stories would load within the first screen, and only then would an ad call be made. This would allowed the readers to see the first screen faster, although it did so by kicking the problem further down the page.

Known unknowns

The other obstacle with the current ad delivery systems is they assume all ad slots are uniform and fixed. This rewards scale, but cripples flexibility. The packages in the app would need to be designed to accommodate the biggest ad unit the sales team offers (300×600), which would create empty space below smaller ad units.

And this brings me to my last rant…

Type design

What Dan said is too often true, and I’m reminded of that myself sometimes at The Globe and Mail.

Weekend reads in print…

This powerful feature story was given room to breath using a double truck. The typography is considered and balanced with good photography; the negative space is intentional. This is a, if not stunning, good example of a weekend feature in the newspaper.

…and online

Here is how it appeared on the main website:

One long scrolling page.

Exceptions

That’s not because The Globe doesn’t know better (the interactive project team has won numerous awards at the SNDs, ONAs, and even the Emmys for their integrated designs). Most of the special feature running online rely on webfonts, illustration, and photography to better define the character of the piece, and the brand of The Globe.

An award-winning feature is shown on the left, an mock article in the new app on the right.

But there are still shortcuts as can be seen in the app’s article page design — it’s nice with good type sizing, but it is still designed to accommodate any story, and the timelines meant the consideration given to the creation of a the section layouts wasn’t be applied to the article page.

Type rant

Print design is built on the baseline rhythms of the text and space between words and a characters. The design of the pages, especially in books, relies on the type’s size in combination with the page’s physical dimensions to create a well-paced reading experience.

App mockup vs. an actual newspaper page with the baselines highlighted.

Digitally, we’re still haunted by the web with its undefined page size and unpredictable font choices. The apps, especially, those from Apple, now have a known page size and designers can guarantee the presence of a particular typeface. But when designing those experiences we still tend to forget that.

Though the resulting pages are readable, and far better than the webpages these stories often run on, I know we can do better.

(After launch one of the many planned designs tests The Globe and Mail will run is around the text-indent versus block paragrpahs.)

Stay tuned.

Today. April 10, 2015.

Where are we?

The Globe’s Apple Watch app will be available to all our current app users when the new device appears in late April.

And the development of the new app is closer to where it needs to be — although features continue to be pushed out to meet that deadline.

Notably, though, the design ideas are literally inspiring changes in how The Globe and Mail operates.

Editorial meetings are being shifted to think not just for the appear and the web, but for these daily moments in the app as well, and how those moments are reflected on the web and the paper.

Advertising is leading with the app, not the paper, in sponsorship pitches and they have been very successful.

And from a design side…

Almost there

The Globe and Mail has begun moving to a design direction that hews closer to a more unified experience that play to the strengths of the respective platforms, be they print or digital.

News Front

Business front

Features front

Weekend front

The first step

The app will be submitted for a May launch, and will mark the start to series of continual updates. Work is underway to incorporate the dropped features, and we are planning for more updates based on reader feedback

Although the app was intended to be exclusively for the iPad six months ago, it will now debut on the iPhone. And the Apple Watch.

Critically, we’ll be monitoring the results, too. Not just for ads sold and apps downloaded, but for the time people spend using the app and reading the stories within it.

What matters, at the end of the day, is that these digital experiences showcase The Globe’s true value proposition: The incredible journalism being produced by the newsroom every single day.

Thank you for the opportunity to talk this through with you and I look forward to continuing the conversation.

Show your support

Clapping shows how much you appreciated Craig Saila’s story.