Our user base of 9-12 year olds is our least engaged audience on Epic! and we’re not sure why. We want to focus on creating a better experience for that age range so that they are as active in the product as our other users.
Comic books make up a large percentage of what 9-12 year olds read on our platform.
Great! So now that we know comic books are very important, now what?
Make reading of comics easier on mobile devices and thereby increase consumption time.
Metrics to measure:
Percentage of users who start a comic (age 9-12), where start is defined as ‘read till paid event’
Share of Comics: Comics opens / book opens
Now that we had our goal (and a name) I started work on Comic Zoom.
MY ROLE IN THIS FEATURE:
Usability Testing with Research Team
Hi-fidelity mockups & animations
Before sketching, I wanted to research how other comic book eReaders were handling the comic book experience—namely what I thought they were doing well, and what I felt could be improved.
My search also included fringe apps for manga readers and younger readers in a similar age range of 9-12.
There’s a ton of comic book apps on the app store, but surprisingly not many for kids.
In order to keep track of my research I started a document to note comic book apps’ similarities, differences, gestures, names of features, and buttons. Two features that stood out the most were Comixology’s Guided View and Google Books’ Bubble Zoom. The only problem was that they were predominantly targeted for adults, and I wondered how usable these flows would be to a younger audience with a shorter attention span.
After collecting research, I learned the following things:
Most apps have “zoom” feature that increases either the size of the speech bubbles to be more legible, or crops comic pages to their individual panels to be read one at a time.
Double tap or double click takes the user into the zoom feature on mobile and web respectively.
Some apps (not all) have a short tutorial explaining the feature when the user opens a comic book for the first time in the app.
Most users are passionately divided 50/50 as to whether or not they prefer using panel zoom or reading in full page.
In some apps, there is a small notification when switching between views, i.e. “reading in panel zoom mode”
Alright, but what do our users want??
Meet Freddie, our comic zoom user persona. Freddie is based on several interviewees I’ve interviewed in the past. This helps me get into the mindset of our 9-12 users, what they like and how they act so I can better design for the user.
The next step in the process was drawing out the user flow and screens I wanted. Based on my research and user persona I knew we should probably include the following to test:
Some sort of “zoom” feature that makes panels easier to read on phones and tablets
A tutorial explaining the zoom feature
Opt in or opt out options?
A “zoom” button to toggle the feature on/off
(6 test sessions with 2 prototypes)
How do you feel about the size of the content?
Does double-tapping and entering comic zoom an expected response? Yes or no?
Do you prefer reading in full-page or in comic zoom?
What would you change about the experience?
Observation: Were they entering and exit comic zoom with or without frustration?
One kid thought it was tap to go to next panel. It took them a few tries to figure out swipe.
One kid was uncomfortable with the panel mode because he did not know what to expect when exiting out.
1 out 2 kids noticed the pop up and remembered what it said
One kid wanted to tap to go to next page
1 kid did not like panel view because could not see page numbers/progress
1 out of 2 kids preferred panel view because could see the details better
4/5 kids used the pinch method and settled on about 1/3rd of the page on the screen when asked how they would zoom in to specific boxes
3/5 kids said double tapping would probably zoom in when asked
2/5 kids wanted arrows to change panels rather than swiping
2/5 kids said they prefer the panel view, 2/5 prefer normal view, 1 unclear
1 kid had an issue with not being able to track progress while in panel view
Based on our usability tests we knew we needed to iterate and include the following:
Add arrows on either side of the zoomed in panel
Make tutorial animation stay on the page for longer
Add a longer delay between double taps for younger children who are less dexterous
Add a “zoom in” animation when the zoom button is first triggered to show context for the user
Develop a zooming animation that smoothly transitions from full-page to “comic zoom” view to provide context for the user.
More usability testing around auto opt-in to comic zoom and manual opt-in.
In hindsight, Comic Zoom is and continues to be a challenging project because of the amount of dev work involved to have a sufficient (realistic) prototype. Sometimes usability tests were invalid because the prototype was not working properly. Next time I would try to find a more robust prototyping tool so that we could do more usability tests well before dev needed to be involved. As such, I think we are close to a good experience, but it could be improved with more usability testing around on boarding the users to comic zoom in the smoothest way possible.