Eslite Bookeys
Consumer Lifestyle · Mobile App · Hong Kong

Eslite Social App

Social book discovery app for Eslite HK — community reviews, two complete visual styles, and a dark mode built for readers

Client
Eslite Hong Kong
Agency
Skywind Inc.
My Role
UX/UI Designer
Timeline
2018
Platform
iOS
Project Type
New Product
01 · Context

A cultural institution going digital

Eslite is one of Asia's most beloved bookstore brands — a cultural institution that expanded beyond books into stationery, fashion, food, and crafts. For its Hong Kong presence, Eslite needed a mobile app that could serve as a community platform for book lovers, while also reflecting the brand's evolution into a broader lifestyle destination.

The core tension: how do you honour the tactile, nostalgic experience of browsing a physical bookstore — the smell of ink, the weight of a new spine, the quietness of the stacks — in a digital product? And how do you extend that to Eslite's newer lifestyle identity without alienating the core literary audience?

02 · UX Strategy

Three decisions that shaped the design

01 · Community First

Social before commerce

Book lovers are intrinsically social — they recommend, argue, annotate. I led with a community review layer rather than a product catalogue, so the app feels like a reading club, not a retail channel.

02 · Dual Style Direction

Two complete aesthetics for client validation

Rather than committing to one aesthetic before stakeholder alignment, I designed two production-ready visual styles — Modern Cultural and Paper Nostalgia — each targeting a distinct facet of Eslite's brand identity.

03 · Reading Context

Dark mode as a first-class feature

Book readers read at night. I treated dark mode not as a toggle afterthought, but as a dedicated reading-optimised experience with its own contrast ratios, type sizing, and ambient colour palette.

03 · Visual Style A

Modern Cultural — cosmopolitan energy

When we think of Eslite today, it's not just a bookstore — you can find modern stationery, local fashion brands, mini craft stores. It combines merchandise with modern culture, where diverse groups of people gather around quality living. This direction visualises that evolution.

Style A · Modern Cultural

Geometric, editorial, open

Linear shapes and geometric patterns communicate the cosmopolitan breadth of modern Eslite — a space for readers, designers, travellers, and tastemakers alike. The visual language is intentionally non-literary: it signals that this app is for your whole lifestyle, not just your bookshelf.

  • Clean geometric grid with high-contrast typographic hierarchy
  • Modular card system supporting books, events, and lifestyle picks
  • Bright, airy palette appropriate for Eslite HK's urban shopper
  • Bold cover art presentation as the primary visual anchor
Eslite Modern Cultural — home, discovery, and community screens
Community Layer

Reviews, discovery, and social sharing

The community section lets readers write structured reviews, follow other readers' shelves, and receive personalised recommendations. New arrivals and curated lists are surfaced through a feed model — familiar to social app users, but anchored in literary intent.

  • Structured review format with multi-dimension rating (plot, writing, pacing)
  • Follow and shelf system for social discovery between readers
  • Push notification design for new arrivals and special member offers
  • Staff picks and editorial curation integrated into the social feed
Eslite Modern Cultural — community review and social discovery screens
04 · Visual Style B

Paper Nostalgia — the original bookstore soul

People who love reading often love the physical book itself — the ink-paper smell, the texture of a magazine cover, the quiet footsteps inside a library. This direction doesn't try to replicate those sensations digitally; it constructs a visual atmosphere that resonates with them.

Style B · Paper Nostalgia

Tactile, warm, and unhurried

Where Modern Cultural accelerates, Paper Nostalgia slows down. The visual system uses warm earthy tones, texture-evocative background treatments, and serif-inflected typography — giving every screen the quality of a well-worn reading journal.

  • Warm sepia-adjacent palette evoking aged paper and leather bookmarks
  • Texture-inspired background layers adding analogue depth
  • Serif-inflected typography lending literary credibility
  • Quieter visual hierarchy that lets book covers breathe without competing
Eslite Paper Nostalgia — brand layout and UI screens
05 · Dark Mode

A reading experience designed for night

Dark mode was a brief requirement, but I treated it as a product feature in its own right. A reader finishing a chapter at midnight has very different needs from a shopper browsing new arrivals at lunch — the interface should know the difference.

Dark Mode · Reading-Optimised

Not inverted — redesigned

Rather than inverting colours with a system toggle, I designed dark mode with its own visual logic: reduced blue-light emission, generous line spacing, warm dark backgrounds (not pure black) to soften contrast, and type sizing recalibrated for sustained nocturnal reading.

  • Warm dark surface (#1C1C24) rather than pure black — reduces retinal strain
  • WCAG AA+ contrast ratios maintained across all text sizes in dark palette
  • Cover imagery desaturated slightly so it doesn't break reading immersion
  • Full feature parity with light mode — nothing hidden or degraded
  • Consistent with both Modern Cultural and Paper Nostalgia style directions
Eslite — Dark mode iPhone and iPad reading view
06 · Visual Design

Full app overview

Both style directions at scale — one shared UX architecture, two distinct identities

Eslite — Isometric full-product view across both visual styles
07 · Design System

Two palettes, one shared system

Both visual styles were built on the same component library and spacing grid, with only colour tokens and typeface weights swapped between them. This meant presenting two fully production-ready directions to the client — without doubling the design effort.

Modern Cultural Palette
Deep Navy#1A1A2E
Cultural Gold#E8C547
Warm White#F5F0E8
Urban Blue#2C5F8A
Paper Nostalgia Palette
Dark Ink#3D2B1F
Aged Paper#C9A87C
Cream#F2EAD3
Leather#7A5C44
Typography
  • Modern Cultural: Outfit (headings) · Plus Jakarta Sans (body) — contemporary, geometric, open
  • Paper Nostalgia: Playfair Display (headings) · Source Serif (body) — literary warmth and weight
  • Both systems use a 4pt baseline grid with 16px body minimum for comfortable reading sessions
iOS Dark Mode Community UX Dual Style Direction Retail Brand Identity Hong Kong
Next project
Wing CRM
View case study