Bonnier’s Mag+2: Digital Magazines for iPad

In late 2009, Swedish magazine publisher Bonnier and London design studio BERG created Mag+, a concept for magzines on tablet computers like the iPad. The next step was to use this metaphor with actual magazine content. Bonnier asked Kicker to prototype digital solutions using actual magazine content. So in early 2010, we set about to create Mag+2.

Most digital reading is long form: books and articles. Devices like the Kindle make it very easy to read black and white text on a screen. But with the introduction of the iPad, there exists the possibility for a full-color digital reading experience: a magazine. But in the translation from print to digital, what should stay and what should go? What should be augmented? What should be left alone?

 


DISCOVERY
bonnier_dissection
First, we needed to become literate with all of the thinking by Bonnier and BERG that lead to Mag+. Bonnier had conducted several research studies and met with other leaders in the publishing field. They held design charettes among their editorial teams to solve editorial challenges in a digital format. With BERG, Bonnier had developed a metaphor known as “Mountain Range” for magazine reading: browsing was left/right, (looking at the “peaks”), while reading was scrolling up/down (going down the “slope”).

Then we needed to investigate how a print magazine functions. We dissected magazines and determined there were roughly 9 types of editorial content.

  • Long Form
  • Short Form
  • Collage
  • Charts
  • Recipes/”Steps”
  • Lists
  • Graphical
  • Pictorial
  • Advertisements

Next we met with the editors of Bonnier’s magazines and had them tear apart their own magazines. We learned that they use all these types of editorial content to create a rhythm that moves the reader through the issue. We looked at mechanisms that are inherent to magazines such as the “strap,” the graphic identifier near the top of the page that lets readers know where they are and which article they are reading as it progresses over multiple pages. We also looked at the way headlines, images, and pull-quotes entice a reader into the specific stories.

 


RESEARCH
bonnier_researchArmed with this knowledge, we needed to know how readers consume magazines. We sent out questionnaires and sat down and watched dozens of people read magazines. We noticed that not all readers start at the beginning, choosing to jump in at random, and that this behavior changed based on environmental context. When readers had time to indulge, they would often read front to back. When given a short time span (on the bus, at the doctor’s office), they would jump around to short bits of content. We also observed the importance of visual storytelling. Articles were not just the text, but all of the visuals were innately tied to the story and sometimes were the entire story.

 


DESIGN
Armed with this information, we amended the idea of the Mountain View, suggesting that the “peaks” were not all equal height. Rather than proverbially looking at it as a landscape, perhaps the “Mountain” was best viewed from above. From this perspective, it was possible to see that some articles are longer, more time intensive reads than others that are lighter and require less commitment. Some articles belong strictly in the browse level because they are primarily constructed of “hooks” into the story, whereas some articles need less elements in the browse level as they consist of long passages of text and should enable focused reading.

With actual content from various Bonnier titles, we set about crafting Mag+2: the first working prototype on this platform. We began by visually laying out each article and creating motion mockups. We fine tuned the mechanisms for narrative with Bonnier’s editorial teams and created rich visual storytelling.

Because there are no longer cut paper edges, there is no need to consider “pages.” Magazine content can now flow continuously. It is still satisfying to know specifically where to stop to see a given article, but the movement between “pages” does not have to have abrupt, clean edges. Instead, the magazine content is a mobius strip flowing out in either direction. To compensate for the physical feeling of the page turn, the visuals must respond to the reader’s movement. This provides a visual texture. In a pdf reader, this is a fake “page flip,” but we decided this was more satisfying as ambient visual motion.

bonnier_page
 


PROTOTYPE
At the same time, we worked with developers to create a mutli-touch digital prototype to run on a pre-iPad tablet. We worked out the specific gestures needed to operate the magazine and discovered nuances interactivity that could only be unearthed in a working prototype. For example, one of the ads allowed the user to finger paint. However, when combined with the navigation of the magazine itself, (left/right to browse, top/bottom to scroll) this caused a significant issue.

 


TESTING
Once the prototype was completed, we tested it out with users. We identified areas for improvement and waited for the launch of the iPad and all of the soon-to-come digital magazines, including PopSci, the first commercially available publication on Bonnier’s Mag+ platform.

After a few issues of production magazines were in the market, we conducted a second study. This time we did a comparative study of Bonnier’s magazine offerings, as well as Wired, Popular Mechanic, Time, and others. We were delighted to see the multitude of ways publishers have approached the marketplace.

 


THE FUTURE
We’ve developed some pretty strong opinions on what’s out there. We look forward to sharing our thoughts on the next wave with you soon.

 

To see the prototype or see how we can help you on your next project, contact us »

 
New blog post: Eyes on the Road! Or why my car should NOT be a giant smartphone on wheels: http://t.co/O4Z8OJ3N6S4 hours ago