The new comic book reader for Standaard Uitgeverij

The new comic book reader for Standaard Uitgeverij

User Experience

Inclusive Design

Several mobile devices showcasing the strips.be app.
Several mobile devices showcasing the strips.be app.
Several mobile devices showcasing the strips.be app.

The client

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. 

The goal

With the dawn and rise of the digital age, Standaard Uitgeverij wanted to host a platform that would allow users to browse their entire comic book library as well as offer them an opportunity to highlight series users might not be familiar with. At the end of this project, we wanted to launch an MMP (Minimum Marketable Product) that would offer these essential features and left enough room for expanding into additional features in the future.At this stage, the MMP would have to be optimised for mobile devices with minimal screen real estate. 

With the dawn and rise of the digital age, Standaard Uitgeverij wanted to host a platform that would allow users to browse their entire comic book library as well as offer them an opportunity to highlight series users might not be familiar with. At the end of this project, we wanted to launch an MMP (Minimum Marketable Product) that would offer these essential features and left enough room for expanding into additional features in the future.At this stage, the MMP would have to be optimised for mobile devices with minimal screen real estate. 

With the dawn and rise of the digital age, Standaard Uitgeverij wanted to host a platform that would allow users to browse their entire comic book library as well as offer them an opportunity to highlight series users might not be familiar with. At the end of this project, we wanted to launch an MMP (Minimum Marketable Product) that would offer these essential features and left enough room for expanding into additional features in the future.At this stage, the MMP would have to be optimised for mobile devices with minimal screen real estate. 

What we did

Implement a fluent, intuitive reading experience 

Provide an easy method for users to keep track of their reading progress 

Make it easy for users to navigate Standaard Uitgeverij’s library and find both new and known comics to complement their interests 

Our approach

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: 

  1. Book 

  2. Page 

  3. Strip (a set of frames set side by side from left to right) 

  4. 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. 

Strip-based (left): the comic follows a strip by strip structure where all content stays within its own frame and all frames within a strip have the same height. (“F.C. De Kampioenen”, Hec Leemans). Free form (right): a page has no clear structure. There is overlap and frames within frames and content is not confined to its own frame. (“Impénétrable”, Alix Garin).
Strip-based (left): the comic follows a strip by strip structure where all content stays within its own frame and all frames within a strip have the same height. (“F.C. De Kampioenen”, Hec Leemans). Free form (right): a page has no clear structure. There is overlap and frames within frames and content is not confined to its own frame. (“Impénétrable”, Alix Garin).
Strip-based (left): the comic follows a strip by strip structure where all content stays within its own frame and all frames within a strip have the same height. (“F.C. De Kampioenen”, Hec Leemans). Free form (right): a page has no clear structure. There is overlap and frames within frames and content is not confined to its own frame. (“Impénétrable”, Alix Garin).

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. 

Three mobile screens showing part of a Jommeke strip: one with a single frame, one with a strip and one with a full page.
Three mobile screens showing part of a Jommeke strip: one with a single frame, one with a strip and one with a full page.
Three mobile screens showing part of a Jommeke strip: one with a single frame, one with a strip and one with a full page.

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 

The results

A ready to market MMP with the expected functionalities for an e-reader subscription service

An e-reader specifically designed for comics with two reading modes (frame by frame and page by page) to support the two distinct comic styles for different mobile devices 

A familiar navigation system for moving through comics with ease, without cluttering the screen real estate for mobile devices 

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.

What the client said

“The collaboration with Humix was a game changer for STRIPS.BE. Their UX/UI expertise, combined with our market insights, turned the project into a true success—surpassing even our boldest expectations.”

- Walter De Roeck, Director of IT & Innovation at Standaard Uitgeverij

Some of our other cases

Toyota Belgium

Accessibility audits guide Toyota Belgium towards an inclusive website

Toyota Belgium

Accessibility audits guide Toyota Belgium towards an inclusive website

Toyota Belgium

Accessibility audits guide Toyota Belgium towards an inclusive website

Torfs

From data to design: optimising the navigation menu at Torfs

Torfs

From data to design: optimising the navigation menu at Torfs

Torfs

From data to design: optimising the navigation menu at Torfs