Streamlining Book Browsing Experience & Fine-Tuning Reading Comfort
Summary
A local novel platform needed to grow youth readership by giving seamless reading experience. Previously, the book browsing experience required the user to open a separate synopsis page, then navigate back if they didn't like it. I streamlined that decision into a single interaction by hovering a cover to reveal the synopsis and CTAs. Reading comfort was also addressed at the typography level to keep the user engaged and enjoy their long reading sessions.
Background
Storial.co is a local Indonesian online novel platform hosting stories exclusively from local authors. The platform combines reading, writing, and social features. The market is youth-first. The design problem should address cognitive load in browsing and reading experience.
Goal
Reduce decision cost in book discovery and optimize reading comfort, without restructuring the product.
Process
Problem
Finding a book takes a lot of mental effort in the user's journey with online reading. Through user interview, they usually pick from how appealing the book cover is, read the synopsis, and decide whether to continue reading or not. A filter could only go so far without presenting the deciding factor which is the synopsis of the book.
The most time-consuming and critical to the whole experience is reading experience itself. Through online source (Scott, 2022) we know that optimal line length in long text matters to keep the user engaged and have pleasing long reading sessions.
Browse Multiple Synopsis in One Page
Using hover tooltip, we ease the user's browsing experience. Instead of book cover → overview → start reading (2 interactions) and have to press "Back" every time, the hover tooltip showcases book cover, 8–9 lines of synopsis, social proof (views, rating, chapter count) and 2 CTAs. One to see book details and one to start reading.
Optimizing Reading Experience
Max line length capped at 75 characters per row on the reading page, tuned to a comfortable reading rhythm. Making the core journey pleasant to keep the user coming back to read more.
*)Prototype was fully delivered to client but the product did not go live. Development was outside project scope.