Reading Subscription App · Mobile Product Design · 2021

Bookland

A mobile reading experience built around discovery, habit and flexible formats.

Bookland is a mobile reading subscription app designed to help readers find relevant titles faster, switch between e-books and audiobooks, and build a more consistent reading habit through personalised recommendations and progress tracking.

UX Strategy Mobile Product Design Information Architecture Design System Handoff Ready UI

Product

Bookland mobile reading platform

Role

UX/UI Designer · End to end product design

Platform

iOS mobile app

Deliverables

Research inputs · IA · User flows · UI system · Mobile screens

01 Product Challenge

Helping readers move from interest to action.

Many readers want to read more but lose momentum during discovery, comparison and format selection. Bookland focuses on reducing that decision friction by organising books around intent, context and reading behaviour rather than forcing users to browse long lists with little guidance.

Discovery fatigue

Readers are often interested in books but unsure what to start next. The product needed a clearer path from browsing to commitment.

Format switching

Reading behaviour changes by context. A user may read at night, listen while commuting, and save titles for later.

Habit formation

The experience needed to make progress visible without turning reading into a task-heavy productivity app.

02 Research Inputs

Research was used to define the product direction.

The research phase combined competitive review, behavioural assumptions, reader journey mapping and product pattern analysis across subscription, e-book and audiobook platforms. I avoided unsupported claims and used the findings to shape design decisions rather than present unverified metrics.

Competitive review

Compared reading, audiobook and subscription experiences to understand how users discover, save, start and return to content.

Reader behaviour

Mapped common reading contexts including commuting, short sessions, bedtime reading and browsing without a specific title in mind.

Product opportunities

Identified opportunities around recommendation quality, saved libraries, reading progress and reducing repeated navigation.

03 User Problems

Design decisions were tied to clear user problems.

User problem	Design response	Product value
Too many choices	Use a personalised home feed with curated shelves, popular titles and recently viewed items.	Reduces browsing effort and gives users a faster starting point.
Unclear book quality	Surface rating, format, summary and social proof directly on the detail screen.	Improves confidence before starting or saving a title.
Reading drops off	Make saved books, progress and current reading status visible in the profile library.	Supports return behaviour and habit continuity.
Separate audio and e-book paths	Treat format as part of the same content experience rather than a separate product area.	Supports real reading behaviour across different daily contexts.

04 Information Architecture

A simple structure for browsing, saving and returning.

The IA keeps the main navigation focused on the highest value actions: discover, browse, save and manage reading activity. This avoids adding extra layers that would slow down book selection.

Bookland IA model

HomeRecommended
Continue reading
Popular this week
New releases

BrowseCategories
Genres
Authors
Audio books

Book DetailSummary
Rating
Format options
Add to library

LibrarySaved books
Current reads
Downloads
Completed

ProfileReading stats
Preferences
Account settings
Subscription

Step 01Open app

Step 02Browse recommendation

Step 03Review detail

Step 04Choose format

Step 05Start reading

Step 06Track progress

05 Final Mobile Screens

Core screens for the reading journey.

The final UI covers the primary journey from onboarding and account creation to personalised discovery, category browsing, book detail, audio playback and library management.

$Bookland Onboarding screen$

01OnboardingEntry point

02Create AccountRegistration

03Home FeedPersonalised discovery

04Browse CategoriesGenre navigation

05Book DetailE-book view

06Audio DetailListening experience

07Profile LibraryProgress and saves

06 Branding and Design System

Brand foundations for a calm reading product.

The branding system was added back into the portfolio to show the product as more than a set of screens. Bookland uses a warm editorial identity, calm green surfaces, bright highlight colours and simple reading-focused UI patterns to support discovery without making the experience feel noisy.

Typography

Regular Medium Bold

Roboto

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

Heading · 24pt Bold Subheading · 18pt Medium Body copy · 14pt Regular for descriptions, metadata and supporting text.

Colour System

Primary palette

#3D8B85

#F7B732

#F0A4A4

#F16C5A

Secondary palette

#D1A999

#F9CF03

#F9D0C0

#F23888

Teal supports primary brand moments, CTAs and active navigation states.

Gold is used for highlights, bestseller moments, ratings and promotional cues.

Coral is reserved for alerts, new arrivals and small attention points.

Wireframes and Low Fidelity Structure

Structure before screens

Before applying colour and illustration, the core layout system was mapped through low-fidelity wireframes. This helped define content priority across the home page, book detail, category browsing and profile library views.

Homepage

Book Detail

Category Browser

Profile Library

Book cards

Cover-first cards with short metadata, rating and format cues for fast scanning.

Recommendation modules

Reusable shelves for personalised, popular, saved and new release content.

Progress states

Library and profile patterns that show current reads, completed books and saved titles.

07 UX Decisions

Key decisions behind the product experience.

Recommendation first

The home screen prioritises personalised recommendations because the main problem is not access to content, but deciding what to read next.

One detail page per title

E-book and audiobook actions sit within the same title experience to reduce duplicated navigation and support flexible reading behaviour.

Progress as motivation

Reading stats are visible but not overbearing, helping users return without making the product feel like a productivity tracker.

08 Accessibility and Handoff

Built with implementation in mind.

The page has been reframed to show senior delivery thinking, including accessibility considerations and developer handoff requirements rather than only finished UI screens.

Accessibility considerations

High contrast between dark green surfaces and cream text.
Large tappable card and action areas for mobile use.
Clear hierarchy between title, author, rating and format actions.
Reduced visual clutter to support longer browsing sessions.

Developer handoff

Reusable components for book cards, shelves, buttons and detail modules.
Consistent spacing, radius and type scale across the screen set.
Defined colour tokens for primary, surface, text and accent states.
Screen annotations for navigation, saved states and format switching.

09 Outcomes

Designed as a complete mobile product workflow.

Instead of claiming unsupported business results, the outcomes focus on what was produced and how the work demonstrates product design capability.

Core mobile screens covering the primary reading journey.

Main navigation areas defined through IA and user flow mapping.

Key product behaviours: discover, read or listen, return to library.

Scalable visual system for a reading subscription experience.

What I would improve next

The next iteration would validate recommendation logic through usability testing, define empty states and error states, add subscription and payment flows, and test whether users understand the relationship between e-book, audiobook and saved library actions.