Standaard Uitgeverij is a big name in the world of Belgian publishing, with a vast collection of books as well as comics in their portfolio. Their brand includes famous Belgian comic series such as Jommeke, Kiekeboe, Suske & Wiske, and many more.
Prioritizing for the MMP
At the start of the project both Humix and the client agreed on one central thought. It doesn’t matter how beautifully designed the app would be, how great the features and onboarding worked, how large the database of comic books, if the reading experience was subpar, it would break the entire product. For the MMP, that’s what we focussed on. We set out to build a reading experience that was both fluid and intuitive, with little to no learning curve, allowing for users of a wide demographic to use the app, including young children who form a core audience for consuming comic books.
Understanding the anatomy of comic books
We focussed on the reading experience by first taking a closer look at how comic books (especially Belgian ones in this first stage) are defined. Comic books can be deconstructed into separate smaller elements, like so:
Book
Page
Strip (a set of frames set side by side from left to right)
Frame consisting of text and/or image
To preserve the reading experience from actual physical comic books, we looked at how the setup of a comic book issue affects the way it is read. We referenced works by Scott McCloud who’s written several books on how comics are constructed and how the structure of the individual frames affects the way a page is read. By looking into different popular comic book series we distinguished two types.
The ‘strip-based’ comics: originally published in newspapers strip by strip, where (almost) all frames are the same height/size and the overall page lay-out and relationship between frames is less established
The ‘free form’ comics: relationship between frames is established through differences in size, position, etc. The lay-out of each page varies.
Defining the reading experience
Strip-based comics allowed us to optimize for small screens.
We worked closely together with the development team who created an impressive algorithm that could automatically separate comic book pages into individual frames, allowing us to finetune how to move between frames. This way users would be able to move from frame to frame on smaller mobile devices, allowing to use the available screen real estate as efficiently as possible.
For free form comics, we wanted to offer users the option to view the page in its entirety and navigate the comic more akin to how a PDF reader works. They still have the option to go through the comic frame by frame, but acknowledge that navigating a free form comic in this manner would mean the relationship between frames would be lost.
Defining the reading experience
Strip-based comics allowed us to optimize for small screens.
We worked closely together with the development team who created an impressive algorithm that could automatically separate comic book pages into individual frames, allowing us to finetune how to move between frames. This way users would be able to move from frame to frame on smaller mobile devices, allowing to use the available screen real estate as efficiently as possible.
For free form comics, we wanted to offer users the option to view the page in its entirety and navigate the comic more akin to how a PDF reader works. They still have the option to go through the comic frame by frame, but acknowledge that navigating a free form comic in this manner would mean the relationship between frames would be lost.
For navigating the comic books we followed established and expected UX practices.
Tapping left and right to move back and forth between frames/pages, similar to how e-readers handle.
Tapping the center opens an overlay for additional options: a scroll bar for quick navigation, closing the comic to return to the library, settings, etc.
Finishing up the overall app
Once the reader experience was down and tested, we finished up the initial designs for the library. We studied competitors that had similar subscription formats to deduce the best practices for implementing what users would deem essential features for an MMP such as wishlists, sorting, marking as read/unread, recommended reads, etc. We divided the app into three sections:
A landing page where users could easily pick up where they left off earlier reading sessions as well as find recommendations for other comic books they might like
A wishlist where users could find saved comic books they want to (re)read
A search page where users can search specific albums or series
For navigating the comic books we followed established and expected UX practices.
Tapping left and right to move back and forth between frames/pages, similar to how e-readers handle.
Tapping the center opens an overlay for additional options: a scroll bar for quick navigation, closing the comic to return to the library, settings, etc.
Finishing up the overall app
Once the reader experience was down and tested, we finished up the initial designs for the library. We studied competitors that had similar subscription formats to deduce the best practices for implementing what users would deem essential features for an MMP such as wishlists, sorting, marking as read/unread, recommended reads, etc. We divided the app into three sections:
A landing page where users could easily pick up where they left off earlier reading sessions as well as find recommendations for other comic books they might like
A wishlist where users could find saved comic books they want to (re)read
A search page where users can search specific albums or series
As a result, we created a platform with an intuitive reading experience, which allows Belgium’s rich comic book history to reach a wider audience.
