Our user base of 9-12 year olds is our least engaged audience on Epic! and we’re not sure why.
Comic books make up a large percentage of what 9-12 year olds read on our platform, therefore it is very impactful experience for those users.
We know the current reading experience is not ideal.
Qualitative and observational research in classrooms tells us that users are pinching to zoom into comic book panels to read them one by one.
Kids are also holding the devices very close to their face in order to read
Kids have a difficult time finding their favorite comics easily and quickly
Make comic books easier to read on mobile (accessibility)
Make comic books more engaging long-term (motion comics, interactive comics)
Make finding comics on our platform simple and easy
Our users want a better comic book reading experience on mobile phone and tablet
If we create a better comic book reading experience, our book opens on mobile devices will increase overall and users will finish more comic books.
Show the comic zoom design to 9 to 12 year-old users
We’ll proceed if kids describe Comic Zoom as:
Makes it easier to read comic books (Qualitative)
Usable and understandable (Qualitative)
Predominantly a preferable experience to reading in full-page on mobile phones (Qualitative/Quantitative)
Not having any motion sickness due to animations (Qualitative)
Other data points:
Rise or fall of percentage of users who finish reading a comic (age 9-12) with comic zoom enabled. (Quantitative)
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.
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”
Meet Sarah, 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.