Rethinking Mobile: A Report From the Field
•
13 likes•9,626 views
What do you do when your 12-month plan to reimagine a successful mobile news product suite is cut in half and the revenue targets are quadrupled? This is the challenge The Globe and Mail’s product design team faced in the spring of 2015. This talk, first presented at SND DC on April 10, 2015 discusses the challenges encountered and strategies developed by the team during that period. A lightly edited version of the speaking notes for these slides can be read here: https://medium.com/@saila/notes-from-the-trenches-of-a-mobile-redesign-10d414658298 You can download the app here: https://itunes.apple.com/ca/app/the-globe-and-mail/id429228415?mt=8
Recommended
More Related Content
Recently uploaded
Recently uploaded (6)
Featured
Featured (20)
Rethinking Mobile: A Report From the Field
- 1. @saila #SNDDCt ␣ ␣ Rethinking Mobile A Report From the Field @saila #SNDDCt Craig Saila, The Globe and Mail
- 6. l @saila #SNDDCt Brand Disconnect Print Digital * For the data visualizers in the room, these are illustrative only and are not to scale
- 9. l @saila #SNDDCt The Globe and Mail Prototype 2013–
- 10. l @saila #SNDDCt Globe News Android 2014–
- 11. @saila #SNDDCt —Sarah Marshall, Journalism.co.uk, October 7, 2013 [Guy Crevier, president of La Presse,] expects the $40 million investment to be recouped in 18 to 24 months from now.
- 12. l @saila #SNDDCt Tablet La Presse+
- 15. @saila #SNDDCt —Product Sketch for “Project Apt,” November 2014 Offer insightful, informative, personally relevant journalism for the Canadian business decision maker within a well- designed, and finite, reading experience.
- 16. l @saila #SNDDCt Product Scope Mid-December Busine ss News My Globe Investo r Article Feature Briefing Story Arc Company Reports Morning Noon Evening Weeken Geo Magazi ne Search Registratio Subscriptio iPad iPhone
- 17. l @saila #SNDDCt Product Scope Mid-December Busine ss News My Globe Investo r Article Feature Briefing Story Arc Company Reports Morning Noon Evening Weeken Geo Magazi ne Search Registratio Subscriptio iPad iPhone Apple Watch
- 24. l @saila #SNDDCt
- 25. l @saila #SNDDCt Charts Digital + Print
- 26. l @saila #SNDDCt Packages High Density 1 3 Ad—Sponsor Content Ad— 300x250 5 8 9 10 4 62 7 2 3 7 4 5 6 Ad 1
- 27. l @saila #SNDDCt Packages Medium Density 1 2 3 4 5 6 7 Ad—Sponsor Content Ad— 300x250 1 2 3 4 Ad
- 28. l @saila #SNDDCt Packages Low Density 1 5 2 3 4 6 Ad—Sponsor Content Ad— 300x250 1 2 3 4
- 29. l @saila #SNDDCt Packages All together Special Feature Special Feature Ad Ad Special Feature Special Feature Ad Ad
- 30. l @saila #SNDDCt Reader Flow Natural News NEWS-1 NEWS-3NEWS-2 “Mix” Report on Business NEWS-4 ROB-4 ROB-5 MIX-2 MIX-3ROB-3 MIX-1 NEWS-5 ROB-6 NEWS-6 OB-1 ROB MIX-4 MIX-6MIX-5
- 31. l @saila #SNDDCt Reader Flow Natural News NEWS-1 NEWS-3NEWS-2 “Mix” Report on Business NEWS-4 ROB-4 ROB-5 MIX-2 MIX-3ROB-3 MIX-1 NEWS-5 ROB-6 NEWS-6 OB-1 ROB MIX-4 MIX-6MIX-5
- 32. l @saila #SNDDCt Reader Flow Natural News NEWS-1 NEWS-3NEWS-2 “Mix” Report on Business NEWS-4 ROB-4 ROB-5 MIX-2 MIX-3ROB-3 MIX-1 NEWS-5 ROB-6 NEWS-6 OB-1 ROB MIX-4 MIX-6MIX-5
- 33. l @saila #SNDDCt Reader Flow Natural News NEWS-1 NEWS-3NEWS-2 “Mix” Report on Business NEWS-4 ROB-4 ROB-5 MIX-2 MIX-3ROB-3 MIX-1 NEWS-5 ROB-6 NEWS-6 OB-1 ROB MIX-4 MIX-6MIX-5
- 34. @saila #SNDDCt
- 35. @saila #SNDDCt
- 36. Monthly visitors: 10% of web+mobile Daily visitors: 4× current Time spent: 2× increase @saila #SNDDCt
- 37. l @saila #SNDDCt
- 38. l @saila #SNDDCt First Cuts Briefing, Story Arc
- 39. l @saila #SNDDCt Reader Flow Discovery News “Mix” Report on Business ROB-2WS-5 NEWS-6 ROB-1 Profile ROB-3 ROB-5ROB-4 ROB-6 MIX-1
- 40. l @saila #SNDDCt Reader Flow Discovery News “Mix” Report on Business ROB-2WS-5 NEWS-6 ROB-1 Profile ROB-3 ROB-5ROB-4 ROB-6 MIX-1
- 41. l @saila #SNDDCt Reader Flow Discovery News “Mix” Report on Business ROB-2 ROB-4b ROB-4cROB-4a WS-5 NEWS-6 ROB-1 Profile ROB-3 ROB-5ROB-4 ROB-6 MIX-1
- 42. l @saila #SNDDCt Reader Flow Saving
- 43. l @saila #SNDDCt Reader Flow Saving ROB-5
- 44. l @saila #SNDDCt Reader Flow Saving ROB-5
- 45. l @saila #SNDDCt Reader Flow Saving ROB-5 SAVE-2 SAVE-1 ROB SAVE
- 46. l @saila #SNDDCt Reader Flow Constraints
- 47. l @saila #SNDDCt Reader Flow Retrace News NEWS-1 NEWS-3NEWS-2 “Mix” Report on Business NEWS-4 ROB- ROB-4 ROB-5 MIX-2 MIX-3ROB-3 MIX-1 NEWS-5 ROB-6 NEWS-6 -2 ROB-1 MIX-4 Profile M
- 48. l @saila #SNDDCt Reader Flow Retrace News NEWS-1 NEWS-3NEWS-2 “Mix” Report on Business NEWS-4 ROB- ROB-4 ROB-5 MIX-2 MIX-3ROB-3 MIX-1 NEWS-5 ROB-6 NEWS-6 -2 ROB-1 MIX-4 Profile M
- 49. l @saila #SNDDCt Reader Flow Retrace News NEWS-1 NEWS-3NEWS-2 “Mix” Report on Business NEWS-4 ROB- ROB-4 ROB-5 MIX-2 MIX-3ROB-3 MIX-1 NEWS-5 ROB-6 NEWS-6 -2 ROB-1 MIX-4 Profile M
- 50. l @saila #SNDDCt Dynamic Ads “Big Box” 1 2 3 4 5 6 7 Ad—Sponsor Content Ad— 300×250
- 51. l @saila #SNDDCt Dynamic Ads “3×6” 1 2 3 4 5 6 7 Ad—Sponsor Content Ad— 300×600
- 52. l @saila #SNDDCt Dynamic Ads Revised 1 2 3 4 5 6 7 Ad—Sponsor Content Ad— 300×600
- 53. l @saila #SNDDCt Dynamic Ads Revised 1 2 3 4 5 6 7 Ad—Sponsor Content Ad— 300×600
- 54. l @saila #SNDDCt Dynamic Ads Revised 1 2 3 4 5 6 7 Ad—Sponsor Content Ad— 300×600
- 55. l @saila #SNDDCt Dynamic Ads Revised Again 1 2 3 4 5 6 7 Ad—Sponsor Content Ad— 300×250
- 56. @saila #SNDDCt —@dansinker March 31, 2015 if you're a newspaper and you know you're publishing something that will garner a lot of attention, ask: WILL THIS LOOK LIKE SHIT ON THE WEB
- 58. @saila #SNDDCt
- 59. @saila #SNDDCt
- 60. l @saila #SNDDCt Article Design Webfonts
- 61. l @saila #SNDDCt Article Design Digital v. Print
- 62. @saila #SNDDCt April 10, 2015
- 63. l @saila #SNDDCt Closer But much thinner
- 64. l @saila #SNDDCt Closer But much thinner
- 65. l @saila #SNDDCt Closer But much thinner
- 66. l @saila #SNDDCt Closer But much thinner
- 69. l @saila #SNDDCt “The Mix” Evening
- 71. @saila #SNDDCt May the work begins
- 72. @saila #SNDDCt Thank you. l ␣ ␣ ○␣l l @saila #SNDDCt Craig Saila, The Globe and Mail
Editor's Notes
- The brand experience is still anchored in the print design, which was done in 2010 led by Adrian Norris The website was redesigned at that time with a model to drive page views, in a sense to create a sense of anxiety in the reader, subtle reminding them there’s more to read by always surfacing more links The design was tweaked again at the start of last year, and is what’s shown, when the former editor raised a good observation—the site didn’t reflect the mind of the news room, instead it was chasing the flow on news While we has iPhone and and iPad apps at launch in the Canadian market, we updated them with a new design in 2011. Although incredible successful, winnning recognition from Apple and our readers, the design spoke to a hub and spoke model, and tired to offer all our readers all the stories…at once Finally, of course—mobile+social traffic is how the bulk of our new audience encounters the brand via Facebook, or my personal news distributor, Twitter
- When people think of The Globe they think of print, but the readership is intentionally shrinking Digital, the audience is bigger, roughly a third of all Canadians read a Globe story digitally monthly, but the experience is disconnected and fragmented
- And this maps to the changing reader habits Digital begins in the morning, peaks at lunch and again in the evening This contrasts with the print world which is mainly in the morning increasingly less so But it also competes with the morning/evening commute of radio And the morning/evening TV news audience
- Looking a bit more at our traffic, which isn’t dissimilar to most news organizations mobile (smartphone) starts at wake-up (it’s my alarm) and continues consistently throughout the day tablet traffic is taking the place of the traditional newspaper readership time, but is also competing with the potboilers as a bedtime read desktop’s share is shrinking, but does peak at lunch as office workers look for something to read while eating sandwich As I mentioned, desktop design is based on the hub-and-spoke, the buffer approach of someone look for something to eat. And mobile is social. So how do we tackle? If you attended Quartz’s talk this morning you got a hint…
- Like Quartz, and the Boston Globe, the responsive design approach has grown to make it easier for tech companies to maintain the site, but also, and perhaps more importantly so, to capture one more page view. We began experimenting with how The Globe, The Globe and Mail that is, would feel in a format like this. The team has played with multiple editions, with real content, and by later 2013 had locked onto approach that constrained the sections to ten or so main categories, but also allowed readers to immediately dive into the stories to scroll down
- The first public version of this launched last summer with the Android tablet experience. Balance the editorial focus with a bit of a digital feel Users could swipe through the sections like a carousel But like mobile could scroll though a news feed and read the full articles And while we saw our internal success metrics being achieved (more reader time per session, more pages per reader), the experience on a tablet felt to “gamified” with the type design and continuous scroll, it seemed to dare the reader to scroll to the end of the section, which encouraged consumption, not cognition
- * The Canadian media landscape changed when the publisher of one of Montreal’s biggest daily’s, La Presse, decided to abandon its daily print edition, and its 800K+ readers, and instead invest a considerable sum in a daily iPad edition
- La Presse was an incredible bold move, create a dynamic daily, that was free, and ad funded, but produced like a newspaper, with dynamic ads, but in fixed positions. Most of Canada’s newspapers were launching digital subscriptions, including the major newspaper chains, and The Toronto Star But when La Presse claimed its 400K+ weekly readers on the tablet were spending 40 minutes on the app, many publishers thought twice. One of them was the Toronto Star, which abandon its digital subscription in favour of licensing the La Presse+ platform for its own free daily tablet that’s still to launch
- But as intriguing as the idea proposed, Quebec is a distinct society. And we also had something the other papers did: hard information about what and how people were paying to read on our platforms. Last fall I gathered the head of tech and the head of editorial and we sat down and did a value prop [explain + Dan & Debbie] The end result was a brief…
- We would build an app the reflected the structure of the newspaper, but offer multiple updates as the day progressed and the newsroom better understood the narrative of the day Monday to Friday would feel like a newspaper with morning updates, lunch, and evening updates timed for when our readers were looking for the news We’d also introduce a two-day weekend edition (we published only on Sat) with longer features We wanted the visual design to reflect, but not mimic print as part of a desire to create a familiar reading experience, like flipping though a newspaper But to make it feel unique, we draw on a predictive recommendation engine tjat would be personalized based on the reading habits on all our digital platforms This would make each edition truly unique to the reader
- In one of the fastest process I’ve ever been involved in at the Globe, we quickly moved to get the project in gear. We brought on Code and Theory (who are talking here latter) to help refine the design vision and build out the project plan for us. And they were great. We firmed up out plan to have a version out in later summer, in time for the fall release cycle of Apple What we produced was an app as defined in the brief, but with a narrower focus, looking only at a few key sections. We wanted to add more business detail into the experience with a personal stock portfolio and company reports for Dan Along with our traditional article types the design team develop a new template for the business briefings that our readers loved, and with a nod to Timeline and Circa, we introduced the idea of “story arcs” which would allow readers to follow certain topical news narratives (think Rob Ford, election, etc.) As we got into the technical scoping, we realized the iPhone needed to come into the fold as well. And while all this was going on our internal design time designed to build out something for Apple’s Watch.
- Then one memorable meal with some key execs in January, I learned that our ambitious plans for a fall release were to change. Our publisher agreed to tie this in with a largee effort, which meant the apps needed to be in market in May.
- Within a few weeks we were looking over some of the early design directions that went in two very different venues. Both spoke to the brand, but emphasized different elements of it. One was more text heavy, the other more photo.
- Because we had anchored our timeline to the print redesign, it meant that necessarily we’d also need to work more closely with closer with the print editions current art director, Devin Slater. And that meant the design team would get a much deeper understanding of how we needed to reflect the print righted brand ideas into a digital experience. His guidance led us down a direction that stayed true to the text format, but incorporated some of the strong photography ideas we’d been experimenting with. It also presented The Globe, which had by now fully committed to the timeline, with a new opportunity
- Already editorial was reshaping itself with preparation with this new app creating a brand new dedicated team of developer-journalists to create new works for the app. One of those new tools was a chart tool (that will be open-sourced) that allows journalists to drop in some basic data and create a chart that can be used on the web
- …in the apps, and in print (in fact the first version of this appeared in Wednesday’s edition). The Globe is using this shift not to weaken print, but to crate a visual language that unifies the four major platforms, creating touchtones are readers can identify on variations This also ended-up saving us on the app side. One of the first ramifications of the cut was to reduce, greatly the kind of investment data we could offer. But but by designed modules that would be able to absorb these different formats we could offer rich investment information without swelling the app development.
- * Module like the chart would allow us to better control the pacing of the app, we could have high density packages for the morning and to emphasis the visual tone of the new ROB
- * We could have medium density for lunchtime or to highlight the visual stories in the “Mix”
- * And we could have low density packages for the weekend or the evening when the newsroom would want to feature one particular story
- Combining them together on a section would then create distinct editorial moments, that could interrupted when needed by special features, advertising or marketing messages. The top area would be for editorial, the middle for focus news fees, the bottom the personalized ares How they were arranged will also signal to the reader who fast The Globe thinks they should go while reading. All is being measured.
- All of that then combines into a detail flow that is so very similar to natural reading * (You’ll note features like Investor, Magazine, and “My Globe” have disappeared from the plans in an effort to hit the timelines)
- Just a few weeks ago, this is what the visual designs looked like as a reader would move through the sections. (Talk through)
- * All of this was meant to hit out key business goals, and knowing we had already reduced the features be more than half, the visual design needed to be crisp, the animations details you saw need to be there to make sure our existing users didn’t feel neglected, and so that new users would understand this wasn’t just another “news reader”
- And that meant a lot of work had to be done. We brought on a terrific Toronto firm called The Working Group to help us out. They’d already worked with our internal design team to help us build our Apple Watch app so it’d be ready launch day, so we knew they knew us. But still. A lot of the ideas are ambitious and we had less than 8 weeks of development.
- Along with the sections cut earlier, we also cut the story arc and the business briefing But there were still more challenges ahead: navigation and reader flow dynamic ads article design
- * As we dug deeper into the reading experience we knew we wanted to also give our readers more than a daily edition of just few dozen stories we’d publish every day. I believe that although the finite experience is important to allow the reader to hold the mental model of the experience in their head, its critical we let the curious readers explore, to discover more content, to that end…[explain]
- * And we also reinvigorated an idea of saving stories from one platform to read later on another. This became a key feature of the watch, and also a tool to help readers stay in control of the news (it also allowed us to limit scope around offline reading)
- * All of these subtle behaviour changes broke our elegant natural reading model. We spent countless hours over the phone, on whiteboards, tables and even paper cut outs to figure out what would work best for the reader AND was doable in the remaining weeks we had.
- Thankfully constraints can, as we’ve learned over and over again on this project, bread clarity (if not always creativity). [explain how we were led to the simple old web model of retracing ones steps out of a labyrinth]
- * The next challenge to contend with was the limitations of the current ad delivery systems.
- The next challenge to contend with was the limitations of the current ad delivery systems.
- We wanted to layouts to changes with a new ad format being delivered But because of the lag between the calls, the page designs would also lag, creating a slow reading experience, which is worse than a soggy paper
- The compromise was to disguise it somewhat by putting most of ad below the initial screen (a.k.a., the fold) We could separate the package into two blocks, and let the second block be delayed as we waited for the ad call This would also allow us to reuse more blocks…
- But the time crunch meant we still couldn’t build the kind of dynamic layouts needed, so when we have layouts that need a 300x600 ad, we were forced to leave empty space in case one got served instead of a big box. And this brings me to my last rant, which if you attended yesterday’s sessions you may have some thoughts on it yourself (and apologies the next slide has some harsh words, especially if you work in Indiana)
- What Dan has to say is very true, and I’ve been reminded of that myself at the Globe
- This incredible feature story was given room to breath in this two page spread. The typography is considered, and a balanced with good photography, and an effective use of space. This is a, if not stunning, good example of a weekend feature in the newspaper.
- Here’s how it is online. One long scrolling page.
- Now we’re getting better (Chris Manza’s SND win + the app) with web fonts comes more ability to define the character of the piece, and the brand But we’re still taking shortcuts as you can see in our article page design, it’s nice with good type sizing, but it is still designed to accommodate any story, and that requirement means shorts.
- Where the print is informed by the baseline rhythms, and page design, especially in books, is informed by the page size and type seize to define the shape of the text, to make that beautiful density of a well designed print page. Digitally, we’re still haunted by the web with its undefined page size and random font choices. The apps though have a fixed page size, and we can guarantee the presence of the type. As as we came to design the page, we had to cut the work short. Time is running out, and though I’m pleased with results, I know we can do better. After we launch one of the first tests I’ll be running will be to work text indent to see if it actually does improve the reading experience. Stay tuned.
- So were are we now?
- We have a watch app which will be available to all our current app users in two weeks And the development is closer to where we need them, if if we’ve stripped a lot of the once cherished business features along with the added editorial features. But more importantly, we’re literally changing how the news operation thinks 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 later, akin to the idea of htoughtcasting, into the next days paper And from a design side
- * We’ve finally built a design comes so much closer to the ideal of referencing the print but staying true to the native format, as you can see in these concepts for the front page
- The business pages
- The feature pages
- And of course the weekend experience.
- In May we launch, and immediately begin work on the features we couldn’t get done. We’ll be launching new experiences for the digital and smart phone. And we’ll measure the results. Not just for business success but for the readers engaged time. Because the end of the the day, the important thing is that these digital experiences reflect the Globe’s true value proposition: the incredible journalism being produced by the newsroom every day. Thank you for the opportunity to talk through this with you and I look forward to continue the conversation.
- * Again, thank you.