Your SlideShare is downloading. ×
Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)


Published on

The launch of the iPad signaled the start of a new era for magazine publishing. A single device that delivered the fidelity of print and the interactivity of the Web, all wrapped up in a fun and …

The launch of the iPad signaled the start of a new era for magazine publishing. A single device that delivered the fidelity of print and the interactivity of the Web, all wrapped up in a fun and easy-to-use form factor gave the industry new reason to hope. There was one trick: no one had designed for this brave new medium yet. Editorial teams suddenly needed to consider multi-touch gestures, multiple orientations, dynamic layout and the integration of rich media into the design of their issues. Ink-smudged print teams had to reach out to the pixel-based life forms in charge of the company websites, and engage a new breed of Cocoa developers as well. Whole new models of information design and user experience we're launched at high velocity into the App Store. Matt Carlson, Hot Studio's Principal of Strategy & Design, was involved in designing some of the first digital magazines that launched on the iPad on April 3rd, 2010. He has spent the last year exploring new ways to experience and engage with magazine content on this exciting new platform. He's worked on iPad editions of magazines such as Spin, Dwell, National Geographic, Car and Driver and many others. In this session he'll share hard-earned knowledge and useful insights on how to design for gestural interfaces, how to integrate interactivity smoothly into digital magazines, and what it takes to build an issue for the iPad.

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Hi EveryoneWelcome to Touching StoriesI’ll be talking today about how to build a digital magazine appAnd where the future of magazines is going.
  • A little housekeepingThis presentation is posted online, I’ll give out the url at the endIf you are into tweeting, tweet away. My twitter name is dreamjar. Don’t’ask me why. I must have been hallucinating.I will give. Please read the small print.
  • I’m Matthew CarlsonPrincipal of Experience Design at Hot StudioHot Studio is an experience design firm. We design new ways for people and companies to interact.But enough about where I work. Here’s something about me.
  • I’m a Magazine JunkyMy habit started smallgateway magazines like ranger rick and highlights.Now I’m into the hard stuff like Eye, Harper’s and MonocleI can’t walk past a newstand without picking something up and get the twitches on planes if I don’t have a magazine. The first thing I do in a new town is find the best magazine shop.Up top’s a picture of a fellow junky hiding out in BookPeople in Austin.
  • And before I knew it I was involved on magazine projectsReadyMade where I discovered my inner crafterHarvard Business Review where I found my inner MBAAnd Seventeen where I discovered my inner 14 year old girl
  • So what makes magazines so great. What’s the high all about.
  • Magazines are curated experiences. Teams of Editors and Writers and Art Directors fight for every little jewel that makes it into the table of contents
  • Magazines have great stories, Longer than a blog post, shorter than a novel, just the write amount of content for a plane trip or a lazy afternoon. And once again, the content is researched, thought about, edited.
  • Magazines have beautiful imagesArt Directors are the patron saints of photographers.Whetehr
  • I am an iPad App VeteranI have been working on iPad apps for 84 years.Since each month as an app designer equals Seven Human YearsI’ve been working on iPad apps before I even knew what an iPad looked like.
  • And of course I’m also hooked on tabletsShopping for new apps is my favorite formI early-adopted into the first generation of iPads.
  • Which of course really sucks when the new one comes out 2 months before you expect it to.
  • So why do we think tablets are so important?Let’s start off with some big numbers
  • Because USA Today says they are.Corporate Insider Leaks > Tech Crunch/Endgadget> Blogosphere > NYTimes > Your Grandmoter > USA Today
  • Fifteen Million.That’s how many iPads sold in the 9 months of 2010.
  • Twenty Eight Million.That’s a safe estimate of how many will sell in 2011.
  • You may be part of that number.
  • Ten Plus. There are Ten major competitors we know of,who either already have or will have tablets out in 2011.There’s no iPad killer yet.But more and more tablets are going to start filling the market.
  • And now the Pie Chart.Here’s the percentage of Publishers who think Steve Jobs isA – their FriendB – their EnemyOr C – Their FrenemyIt’s safe to say that every Publisher has Steve Jobs lurking in his or her subconscious.
  • Here’s a another reason why we should all be taking tablets seriously.
  • That’s my four year old daughter explaining… In case you didn’t catch…“I’m just learning all these things from the screen.”Device so intuitive a four year old can figure it out after only a few tries.Dominant form of interaction. Her Joystick. Her mouse.In her world Every Screen is a touchscreen. Fingerprints on tvIf you were in on the first wave of iPadsor you have a touchscreen phoneIt’s a brave new world. How magazines fit into the iPad experience. I’ll be talking about design for it. Matt D. how we’ll interact stories future.
  • It turns out tablets were just what publishers were waiting for.
  • Tablets bridge the gap between Print and WebThey offer high fidelity displays in a convenient form factorBest of all their connected. You can suck down a magazine wherever you find WiFi. That means find your nearest starbucks.Publishers saw the iPadas their holy grail. Suddenly every major house needed to have it’s strategy in place.Zinio was perfectly placed to take advantage of that.And luckily, Hot Studio was right around the corner from their office.
  • Our story begins in a secret room, with papered windows and two top secret prototypes chained to a table.It was mid-February, 2010Zinio had been chosen to develop an App for the iPads launch.They were part of a select group of developers with Early Access.Zinio had offered digital magazines on the desktop and the iphone.Now they would be one of the first magazine apps on the iPadThey turned to Hot Studio to help them design it.
  • So here was the challenge: We had toBuild a complete, fully functioning appPort over 2400 magazinesMake 7 of those magazines really specialEnvision the future of magazinesAnd rethink how people might like to read.All in just under 6 weeksThe stakes were high.
  • If we succeedwe might win our two seconds of fame ona perfectly editedperfectly upbeatiPad commercial.
  • If we miss our deadline, totally failMatt get’s sent back to his old job at Microsoft.And I start designing coupons again.That’s the one part I left off my resume.
  • So here’s the ingredients for 6 Week Apple Surprise:- - - - - - Mix in tight quarters and stir for 6 weeks. Disrupt constantly. Open right before launch.
  • There’s plenty of cool sounding words to describe the development process “Waterfall”, “Agile”, “Lean UX”.None of those come close to describing what those 6 weeks were like.The best word that comes to mind is…
  • “Swarm”.As in a bunch of bees that take turns dancing,Until they figure out who knows where the most flowers are.There’s Lots of flying around. Lots of buzzing.Then somehow, miraculously, a jar of honey pops out.
  • Week 1 – Swarm – We all circled around, aligning on expectations and defining requirements. Mapping out the core architecture.Week 2-3 – Go get nectar – Designers get started the UI, producing assetsThe Engineers Build the honeycomb – Building the back-end architecture and hooking it up to Web Services.Week 4 – Everyone comes back to make honey – Build the front end & compileWeek 5 – Get the Bugs outWeek 6 Launch!
  • The work broke into four main paths:The AppThe ReaderInteractive ContentThe Store
  • The App was the overarching structure.The place where you could preview and read articlesDownload and store all your magazinesor go shop for more
  • The reader was the part of the application that displayed the magazines.It was built to show and hide itself with a single tap, so that it could get out of the way of the content.It also featured new ways for a user to navigate around magazines.A drop down Table of Contents, a grid of pages and a slider to fast forward through the book.
  • We figured out a way to layer interactive content on top of the existing magazines, so that it could be added after the magazines were designed and produced.It wasn’t a flashy (literally, because there’s no flash oniPads)but it was an approach that could scale with Zinio’s publishers, and more importantly keep from disrupting their workflow.
  • We figured out a way to layer interactive content on top of the existing magazines, so that it could be added after the magazines were designed and produced.It wasn’t a flashy (literally, because there’s no flash oniPads)but it was an approach that could scale with Zinio’s publishers, and more importantly keep from disrupting their workflow.
  • We figured out a way to layer interactive content on top of the existing magazines, so that it could be added after the magazines were designed and produced.It wasn’t a flashy (literally, because there’s no flash oniPads)but it was an approach that could scale with Zinio’s publishers, and more importantly keep from disrupting their workflow.
  • We also worked together to create a Web-based tablet friendly store.That could support 3000 magazines and 75000 sku’sUnlike many of the other magazine Apps, Zinio was an aggregatorOffering titles ranging from Rolling Stone to the Economist to Martha Stewart to Juxtapoz
  • We made it to the finish line (I know the suspense was killing you)Zinio launched on April 3rd.The app’s been ranked in the top 10 of News Apps ever since.And we’ve been working on it ever since.Designing Apps is more like software development than Website design. Once you get started, you can’t stop.And iPhone and iPad apps cycle a lot more quickly than desktop apps.It requires a bitching set of tools. Here’s what we use daily:
  • WhiteboardsSketchingPaper PrototypesGood listening skills and lots of gesturing.We swiped at paper, tapped on table tops, poked at our laptop screensAnd pretended our iPhones were iPads (they weren’t)I should point out that Matthew hadn’t revealed the secret stash yet.
  • In the beginning we sat down with the cocoa team and the product managers and whiteboarded out the whole App. Then the Cocoa team drew a big red line around the stuff that was not going to go in for launch.Then the design team redrew that line to get in a few more things. Back and forth.The room had two opposing whiteboards. When we filled up one, we’d bounce to the other, fill it up, erase the first and start over. In about 5 days we had some good compromises worked out and the blueprint to start design.
  • Since we didn’t have physical ipads, paper and foam core prototypes served the purpose. We printed templates with the right dimensions and storyboarded out tighter versions of functionality. We were still working by hand. No digital wireframes needed.We taped the up the sketches like magazine galleys to look for problems and patterns.
  • Listening and translating were crucial to our process. When you have a big team of smart strangers working very fast semantic traffic jams are going to crop up.We needed to develop common language and naming conventions to remind us that 95% of the time we were talking about the same thing even through we used different terms.
  • And gradually that running game of jazz hands got documented into a gesture map. A comprehensive document that detailed what most common gestures would do to the screen. A simple design principle: The simplest gestures should be used for core interactions. A tap should open something. A swipe should turn a page.Complex gestures should be used for more specialized or advance interactions.We were literally feeling our way through this, no pun intended.The gesture map helped us keep track.
  • Every now and then a more complex diagram was called for.This one showed the relationship between the presentation layer to the objects that could launch from it and what they would connect to. Sketches like this sufficed to show thinking and win approval, then we could go and build. As long as the ideas are clear the client didn’t get hung up on polish. Leave that for the finished product.
  • When Zinio needed to communicate to publishers it did need something a little tighter. This was an early roadmap that explained to publishers how interactive magazines would function at launch and how they would evolve.
  • That evolution doesn’t stop.As we work on the next generation of the app,Here’s what we’re thinking about These are the things we (and most other digital magazines)Are thinking about:But enough behind the sceneshere’s what digital magazines on Zinio look like today
  • Realize that you’re looking at the way you’re going to be consuming and interacting with content for the next 5-10 years. Until it feeds directly to your brain.If you are a writer, start thinking like a videographer and a blogger and a social media star.If you are an interactive designer, realize that you’re looking at a dominant new paradigm and start designing for touch as well as click.If you are an art director, realize that no one knows this new territory and this is the space and time to jump right in an invent.If you are a publisher, it’s time to start shaking your office space until your web team and your design team are evenly mixed.If you are a Cocoa developer – Count your lucky stars and laugh all the way to the bank.
  • Transcript

    • 1. Touching Stories / Designing Digital Magazines for the iPad
    • 2. Housekeeping
      This presentation is posted online.
      If you are into tweeting, tweet away:
      My twitter name: @dreamjar
      I will give my fully loaded iPad*to whoever tweets the most.
      *Not really
    • 3. Matthew Carlson, Principal of Experience Design
    • 4. I’m a Magazine Junkie
    • 5. Magazines I’ve worked with
    • 6. What makes magazines so great?
    • 7. Editorial Curation
    • 8. Great Stories
    • 9. Beautiful Images
    • 10. Thoughtful Design
    • 11. Form Factor
    • 12. Insight (not instant)
    • 13. What twitter’s good for:
    • 14. iPad Design Veteran
    • 15. Hooked on tablets
    • 16. And boy does that hurt!
    • 17. Why are tablets so important?
    • 18. USA Today says so
    • 19. How trends go mainstream
    • 20. 15,000,000
    • 21. 28,000,000
    • 22. Outbreak in Austin
    • 23. 10 “Underdog Competitors
    • 24. 30/30/40
    • 25. Another reason
    • 26. “I’m just learning all these things from the screen”
    • 27. Perfect for publishers
    • 28. Bridging Print and Web
    • 29. Our story begins
    • 30. 6 week challenge
    • 31. Win=2 Seconds of Fame
    • 32. Fail=Back to the Bar
    • 33. The ingredients for “Apple Surprise”
    • 34. Describing the Process
    • 35. Swarm
    • 36. Be the swarm
    • 37. 4 Paths
    • 38. The App
    • 39. The Reader
    • 40. Interactive Content Modules - Video
    • 41. Interactive Content Modules - Audio
    • 42. Interactive Content Modules - Slideshow
    • 43. The Store
    • 44. The finish line (not really the finish line)
    • 45. The tools (whiteboards, paper prototypes, ears, hands)
    • 46. Dueling Whiteboards
    • 47. Paper Prototypes
    • 48. Listen & Translate
    • 49. From GUI to TUI
    • 50. Jazz Hands & Gesture Maps
    • 51. Layers of Interactivity
    • 52. Content Evolution
    • 53. Here’s what the first wave of Zinio looks like
    • 54. The Goods
    • 55. The Goods
    • 56. The Goods
    • 57. The Goods
    • 58. The Goods
    • 59. The Goods
    • 60. The Goods
    • 61. The Goods
    • 62. The Goods
    • 63. The Goods
    • 64. The Goods
    • 65. The Goods
    • 66. The Goods
    • 67. What Next?
    • 68. Considerations
    • 69. Linear
    • 70. NatGeo on Zinio
    • 71. Clothesline
    • 72. Martha Stewart Living / Condé
    • 73. Map
    • 74. MarieClaireAtoZ
    • 75. Construction – Pixels, PDF, Cocoa, HTML
    • 76. Layout – Symmetrical, Bi-Modal
    • 77. Navigation – Sliders and Scrubbers and Grids, Oh My
    • 78. Workflow – Single Track, Multi-track
    • 79. Interaction – let’s talk about it
    • 80. Share it - Twitter
    • 81. Tear it - Polyvore
    • 82. Save it - Reeder
    • 83. Shop it - Gilt
    • 84. Source it - Wikipedia
    • 85. Customize it - Flipboard
    • 86. Train it - Pandora
    • 87. What will it take?
    • 88. Beware the Snooki Effect
    • 89. Break the book / Tag the Page / Set stories loose
    • 90. Big Takeaway