Improving Donald Duck's Comic Reader mobile and tablet app experience to make it easier to read, more engaging, and more personalised.
By Kevin Bons | DPG Media NL © | Disney © Copyright
Project overview
Role: Lead UX/UI Designer | Duration: 6 months | Year: 2022
In collaboration with Donald Duck user-testers, the Donald Duck editorial team, Disney art-director, and Disney drawing artists, Product owner, UX-Researcher, 2x iOS & 2x Android Developers, & Backend engineers.
Introduction
Hi I am Kevin Bons, UX/UI Designer from the Netherlands at DPG Media for the Donald Duck brand which is licensed at Disney for over 25 years and responsible for the weekly paper edition of the Donald Duck. When this project started a year ago the Donald Duck released the Donald Duck mobile app. As the new lead designer I am going to be responsible for improving the Comic Reader experience across multiple devices and platforms. I am confident that by working together, we can improve the Donald Duck Comic Reader experience that is both enjoyable and accessible to all readers!
My role
I will be collaborating with the UX-researcher to hold user interviews focussed on the current app and gather insights from recent surveys. Also making various data requests to the Data-Analist to fully understand the how users are currently using the App.
Together with the Donald Duck editors team, art-director, and UX researchers we identify and prioritise the key issues. I will then create high-fidelity prototypes of potential solutions that will be tested with children from 9 to 12 years old. I am really curious to learn what the kids are up too this days, how their week looks like, where they find the time to enjoy reading Donald Duck and how long their parents allow them to be on the family iPad. Really curious how they respond to the interface changes in the app of their beloved Donald Duck app.
After this discovery and rapidly testing prototypes phase I work towards the final designs, the creation of the component states, update the design system and document all changes while I align regularly align with the product owner, app engineers teams and backend developers to test the technical feasibility to implement the new UX.
User-research
In app Survey • Investigating tracking & data reports • User-interviews • Competitor analysis • Study to best practises cross-device touch positions • User-flows • Validating prototypes.
Design process & challenges
• Investigating key issues, going trough the results of recent surveys and hundreds of AppStore reviews.
• Intense use of the Donald Duck app on various iPhones, iPads and Android devices, pin-pointing visual undesirables & inconsistencies .
• Writing the project hypothesis in collaboration with Product owner and defining the scope.
• Gather ideas and doing a competitive analysis of other mobile and tablet comic readers.
• Intense use of the Donald Duck app on various iPhones, iPads and Android devices, pin-pointing visual undesirables & inconsistencies .
• Writing the project hypothesis in collaboration with Product owner and defining the scope.
• Gather ideas and doing a competitive analysis of other mobile and tablet comic readers.
• Deep dive into the best practises for multi-touch interactions devices across multiple devices (iOS/iPadOS/Android).
• Mapping the current user-flow and wire-framing the ideal new flow with less steps.
• Iterating on various design solutions related to the Comic reader, pagination, recommendation and learning from Apple Human Guidelines and Material Design.
• Initiating design critiques sessions Duck editors and multiple iOS/Android engineers alignments to test the technical feasibility of the changes.
• Creating various prototypes to demonstrate touch interactions and testing Pre-Flight builds with colleagues at the office and with children of colleagues from the office.
• Creating various solutions to support interactive buttons for future Interactive Comics with Donald Ducks artists and editors at their office in Hoofddorp, The Netherlands.
• Design system mangement and component creation, documentation and final prototypes.
• Mapping the current user-flow and wire-framing the ideal new flow with less steps.
• Iterating on various design solutions related to the Comic reader, pagination, recommendation and learning from Apple Human Guidelines and Material Design.
• Initiating design critiques sessions Duck editors and multiple iOS/Android engineers alignments to test the technical feasibility of the changes.
• Creating various prototypes to demonstrate touch interactions and testing Pre-Flight builds with colleagues at the office and with children of colleagues from the office.
• Creating various solutions to support interactive buttons for future Interactive Comics with Donald Ducks artists and editors at their office in Hoofddorp, The Netherlands.
• Design system mangement and component creation, documentation and final prototypes.
Problem: Pictures are too small
The UI and layout of the Comic Reader forces the comic to appear very small and makes them unreadable, especially in landscape mode
Specifically, the Top-bar overlay (1), resulting in the top-bar overlapping the comic (2) and makes it impossible to see the complete comic at once. Margins around the content (3), Pagination (5), and the Bottom-bar (5) preventing the comic from being displayed in a larger size. Also the comic is not positioned correctly (5). Basically the user is forced to do an extra step within the Comic Reader to start reading.
Problem: UI options are cluttering
New tracking data reports gives us the validated insight that less then 1% of the readers are using the bottom-bar tabs (5). I assume they is little to no need to offer the readers extra information about the comic, to browse between pages from a different overview or to directly offer them an way to their personal read settings.
Problem: Touch gestures are confusing
Although the App shows beautiful reading instructions during the onboarding for first time users with these awesome hand draw animated touch gestures.. yet, even long time users of the app tent to confuse the enter and exit interactions for going into full-screen screen versus switching between page or panel mode, especially when zoomed-in!
Problem: Inconsistent look & feel
The comics (6) in the full-screen mode are positioned incorrectly and inconsistently when tested on other device screens. (iOS/iPadOS/Android).
Problem: Readers get stuck
When going into full-screen mode, the close button (7) gets hidden, resulting in confused readers not being able to find the exit icon. Resulting in the behaviour to simply close the whole app, an most often quit for the day.
The pagination (8) is not only blocking, the text position between the pages and panel-by-panel mode is inconsistently. Whoops.
Problem: No stimulation to keep on rading
At the end of every comic the reader cannot do anything else besides closing the reader (if they manage to find the close button) to return in the library and find another edition or comic to read. This feels as a missed opportunity to offer them something more directly, perhaps without the need to close the reader?
Maximum visibility & readability
By removing all the clutter that prevented the comics to be shown in full glory on often tiny devices the comics are now increased up to 165%! By practicing the content-first design principle to its extreme by designing around content the instant reading experience is more accessible then ever! In portrait ánd in landscape orientation.
Simplified UI
By simplifying the user interface I prioritised all the current options and features and made room for the comics to stand out. The touch gesture interactions to 'swipe-to-next or previous' panel while being able to pinch-in and pan around is now a snappy native experience and thats accessible and fun to use. Displaying the comic pages and panels as big as possible makes it now a Comic Reader that can truly deliver on a great reading experience, by default. Oh and you can now exit the reader from anywhere at anytime.
Other related improvements: Removing the margins around the comics and panels and ignoring the mobile platform given save areas. Completely removing the bottom-bar navigation. Removing background color and border from the top-bar overlay and updating the close button so that it is clearly and always visible for the users. Never get stuck ever again!
New minimal pagination mode:
The majority of our child test users preferred a visual indicator to communicate their position in the story. The new pagination now communicates "Just started", "Somewhere in the beginning", "Almost halfway", "Only a few pages to go", and "I made it to the last page". This is a different mental model than having to do the math when reading "Picture 3 of 6 on Page 23 of 44".
Keeping your place in the comic
Changes had been made to the Comic Reader to make it easier to keep track of your place. When you swipe to the next page, we'll now remember the scrolled position of every page you were on and restore you to that view when you swipe back. Perfect for staying locked with the story, or continue reading the next day.
Personalised recommendation
The new personalised recommendation feature at the end of every comic within the Comic Reader (1000+) was a big hit with the readers. Readers love to being able to read another story that was related yet unread to the one they just finished reading, whether it was about the same Disney figure or the same theme.
Lessons learnt
Thank you for reading! Working on this project was incredible fun and learnful time. The most rewarding moment was receiving that Wow! responses from our young test users when revealing the new solutions to improve the reading experience. I want follow up or extend this case in the future to add more insights, processes and the challenges slightly out scope related to inventing the interactive touch points that allows readers to interact with the panels for comics that have multiple storylines and/or different endings.
Some highlights and lessons learnt from doing this project: Most of the children where using previous generations mobile devices, many of them with a smaller screen of then their parents are using now. This made it extra important to get the most out of their small screens! The new design will address accessibility challenges by: Simplifying the interface and interactions between 2 different platforms. This was super challenging but totally worth it because it make it easier to navigate for mobile and tablet as well for users with cognitive impairments, as well making the controls more intuitive to use for users with motor impairments.
With all the new changes the Donald Duck comics are more accessible and enjoyable then ever. Doing user-interviews and collaborating with the UX researcher and children from 9 till 12 years was always super worthy to understand their todays needs to relax and meet their digital expectations. Collaborating with the Donald Duck artists and drawers while developing our first in-app interactive comic was fun and learning full to watch their whole analog & digital processes from close by.
Kevin Bons | LinkedIn
For Dutch readers
With over 10k+ reviews and a 4.8 out of a 5 star rating you can download the Donald Duck app yourself for iPhones and iPad from the Apple AppStore and for many Android devices and Chromebook from Google Play.
Note: This is for readers of the Netherlands language and requires an subscription.
