bjbj< Brandon Schauer: Our next speaker works for the multi-channel publishing company Bonnier.
If you don t know Bonnier, you probably know at least their US brands; like Popular Science,
Field and Stream, Parenting. A lot of titles that are really about people s passions. Megan
Miller is the Program Director of R&D for Bonnier, she brings categorically new experiences
for them to market. She is going to tell us about managing the balancing act of delivering
intuitive experiences on these new touch screen devices. Megan Miller: Thank you. So, Bonnier
R&D develops new programs as Brandon was saying, and one of the most ambitious things that
we ve done in the year and a half since we moved our R&D team partially from Stockholm
to the San Francisco area to increase our opportunities for serendipity in the tech
community is to build this platform for publishing digital magazines on tablet devices. It s
called Mag Plus.
This is the original prototype video for Mag Plus which was developed in 2010 before the
iPad actually came out. What we wanted to do was have our first app, Popular Science,
present on the iPad when it hit the market. And that was a really crazy thing to do because
we couldn t test our assumptions from the work that we were doing conceptually on any
users until it was actually out in the market. So the prototype actually ended up being built
pretty much like the video you see here, but it wasn t until post-iPad that we had the
opportunity to go back out to the community and find out what they really wanted. When
we talked to consumers in our initial consumer testing before tablet devices existed, they
told us that they wanted something akin to a Kindle experience. They wanted to be able
to simply lean back and read their magazines. And then when we started building this thing,
we had to make up our gestures and our user experience completely, because we didn t know
what it going to really be like. So then when people had it in their hands for a little
while, we decided that it was time to go back out to the market, and talk to users again,
and do some testing so that we could refine the software and add a new set of functionalities.
And what we aimed to do was increase what we call magazine moments, which are the touch
points where people go back again into those monthly issues and get engaged with the content
again. Because what we re creating is apps, and in all those little square icons on your
iPad, we have to get people to say oh gee, I want to read Popular Science again. And
what are those actions that are going to make people come back? So one of the questions
that we asked when we went back out for our consumer research is, what do people do with
magazines? What are the activities that we could use to get them to come back and touch
the magazine again? And these are some of their A paper magazine, you know, sometimes
you ll actually rip out a picture if you see the way an outfit is put together, and you
want to try to reproduce that when you go shopping. Or if you see a hair style you bring
it in and you know, show someone. I d like my hair cut this way. Rip it out and stick
it in your interior design folder. You rip it out and shove it in the drawer with other
stuff. Put it on a bulletin board. If I m somewhere where I don t have internet connections,
for example, a lot of times when I m in an airport or inside the plane, I m just looking
through magazines. And I see like this really cool product. I don t know what it is, or
I ll want to read more about it, and I kind of just jot down the website and then I go
back and look at it when I have the internet. So the people basically are saying that there
s a bunch of things that they do. They cut things out. They create look books, and mood
boards. They share them with their friends. And we wanted to bring those physical activities
into the magazine space, but we also wanted to use some of our expertise for what people
do in the digital world. They purchase things online. They might want to share the content
across devices. They might want some sort of feedback data, like some analytics on their
own magazine usage and that of their friends. What are other people reading? What are the
most popular things? And so we wanted to put this whole suite of features together into
something that would be a layer over the top of the magazine content that we would call
My Mag Plus. But as soon as we went from our research to the ideation phase, we got some
challenges. First, how can we make the experience intuitive and elegant, but also organic, playful,
and high touch? How can we create a design that works across many brands? Because we
have fifty magazines just in the U.S. and 200 more overseas. But it has to have some
sort of branded character so that when people encounter a magazine, they understand that
they ve gone outside of the brand of that magazine. You re not in Popular Science anymore.
You re sort of in this My Mag Plus land where you can do things with your magazine. And
we wanted to create a novel experience, but make sure the users would understand it. When
we started out, like I said, we invented our gestures, and some of the things that we invented
ended up pretty quickly being nonstandard. So we had to go back to the drawing board
and say okay, what are becoming the standards for how people move from page to page? Go
deeper into an article. How do they navigate around? So we came to this conclusion that
this is an extremely difficult space to design for because everything is changing and evolving
all at once. At CES there were 100 new tablets that came out, all at the same time. User
behaviors from the initial, you know, I m just going to sit back and read on my Kindle,
to I want to tear stuff out. I want to go to the web. I want to buy things. They re
not the same. Just you know, six months later after having the device in their hands, the
experiences that they actually wanted turned out to be totally different from what they
told us they wanted prior to the existence of the device. And the demographics are evolving.
Magazine demographics are a different slice of people currently than the ones who have
tablet devices. And over time they re probably going to come more closely together, but right
now we re designing for a different community than the people that we were originally use
to interacting with with the print magazine. So as we started to build My Mag Plus, these
are some of the inspiration boards that we started out with. The one on the upper left
sort of typifies what you would find in a traditional web experience. It s intuitive.
It s clean. It s simple. It s beautiful. The one at the lower right is more like a magazine
experience. It s engaging. It s expressive. Alive and human. And we wanted to sort of
find this intersection, like the tension between a print magazine and a digital experience,
and figure out how do we make it both of those things? So our first challenge was the actual
menu that you use to get into that feature set, which we call the action menu. And this
is a bad early design that we didn t use, but the idea was you know, you re going to
engage the action menu with a long press, and you re going to get something that is
somehow both sleek, and human and fun. You know, we didn t go as far as smiley faces.
In this one, we re like maybe there needs to be something sort of animation. Like things
should bubble up as you re pressing down with your finger, and it ll give it an alive and
tactile quality. But all those crazy colors and just turning the button sideways didn
t really do it either. And then we told the designers, no, we want it to be more organic.
And they got super literal with these bubble things that like moved away from your fingers.
So we decided okay, let s pull in the things that make sense here. Let s pull in the tactile
bubbling quality and keep sort of a sleek menu, but then when you press, the menu items
will move away from your finger kind of like those bubbles did. We ended up toning down
the colors quite a bit, because this doesn t work across our many brands, as one of the
challenges was to create something that would be you know, a branded layer, but allow the
magazine brands to show through. So this is what we ended up with. These are engages with
the long press. This bubbling thing happens. And then you know, whatever menu item you
press moves under your finger, and the color comes out through like a touch to tell you
where you are. Another place that we had a big challenge was figuring out exactly how
literal to make our metaphors. One thing that we really hated was how in iBooks you had
this page-flipping very literal metaphor, and it s super annoying. It s a really slow
way to navigate through a book. But we wanted to keep some feeling of the physical magazine
world, and we really liked this idea of a stack. People stack magazines up on their
coffee table, and maybe you would riffle through them to be able to see what s inside. And
this created a way for us to make an expanded list view of the user s magazines. So we created
this sort of Hollywood version back in the prototype days. Like oh, how beautiful. Here
s your stack of magazines. Aren t they pretty? But then when it came time to actually build
it, we were like well, what are you know, what s the UX? There s all these crazy unopened
questions. Exactly what information do you see as you riffle through this stack? And
what data and preferences are we going to get in that feedback loop that we talked about
earlier? What s most popular? How much of this magazine have I read? And how literal
should the riffling animation be? Do we really want to like have a real stack of magazines
and scroll through it, or do we want something more tablet native? So this is what we arrived
at. The riffle became this riffle strip along the side because duh if you move your finger
up and down on a touch screen, that means scrolling. So that doesn t work. And then
you have this interface where those little capsules are filling up with percentages of
how much you ve read. And as you dig into a magazine issue, you get every page, and
then you can navigate directly to that page. And this isn t built yet. We just finished
this maybe like three weeks ago. So this is what we re building. But the takeaways from
this experience. The first thing was you really need to define your visual identity in words
and pictures so that you and your design team have a common reference point. Those mood
boards turn out to be extremely useful, and those words intuitive, high touch, elegant.
We had to say what does that mean? Like cut out a picture from a magazine. And this is
what I mean when I say organic. Can you move more towards that? And that really helped
out a lot in being able to tweak and find the balance between the magazine experience
and the touch experience. Prototype, iterate and test a lot, because everything is changing.
If you sit around in a room and spend a long time thinking about what you should build,
the user will change their experience and their behavior by the time you actually build
it. So just get something out there to market the way we did when we launched the first
version, and then start testing. And then you know, rapidly iterate. Design for the
least experienced user. One of the problems that we encountered with our UX designers
was that they were very, very savvy themselves about touch screen use, and they would say
things like oh, a horizontal swipe. Obviously that means you can delete something. But these
are sort of like these hidden expert tabs that the average user does not know, and you
know, like a mom who s reading a parenting magazine on her tablet, who maybe never owned
an iPhone, does not know how to do that. And she s not going to be able to find the content
if you hide it behind expert paths. And then decide, where are you going to follow the
emerging standards? We had this weird two-finger swipe that would allow you to jump from one
sort of feature article to the next. And we had a swipe that would pull up things in a
menu. Nobody else uses that, so we had to drop it. But there are a lot of areas to lead
through all of the new features that we re building. So that s it. That s my learning
s. Thank you very much, and if you want to follow us, we re at Bonnier_rd. [End of Audio]
Megan Miller Page PAGE of NUMPAGES MX 2011 www.verbalink.com Page PAGE of NUMPAGES [Content_Types].xml
u$Nw @8Jb _rels/.rels theme/theme/themeManager.xml sQ}# theme/theme/theme1.xml G$$DA :$BR si-@R
r,[L bX*x KfN1 ,tV@ .EML M .c =<R8 (F{\ O/6K 0i1; P0!Y ?sE/ ?J&l
p)af theme/theme/_rels/themeManager.xml.rels 6?$Q K(M&$R(.1 [Content_Types].xmlPK _rels/.relsPK
theme/theme/themeManager.xmlPK theme/theme/theme1.xmlPK theme/theme/_rels/themeManager.xml.relsPK
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <a:clrMap xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
bg1="lt1" tx1="dk1" bg2="lt2" tx2="dk2" accent1="accent1" accent2="accent2" accent3="accent3" accent4="accent4"
accent5="accent5" accent6="accent6" hlink="hlink" folHlink="folHlink"/> Megan Miller Verbal
Ink Normal.dotm Chelsa Robinson Microsoft Macintosh Word Megan Miller Title Microsoft
Word 97-2004 Document NB6W Word.Document.8