UX/UI Case Study

Responsive public library redesign

Making Hong Kong Public Libraries easier to use across devices

HKPL offers rich resources, but users still face friction with everyday tasks like logging in, browsing the catalogue, reserving titles, and renewing books. This redesign focuses on clearer hierarchy, responsive layouts, and streamlined flows so the website feels more accessible, efficient, and consistent.

Guiding question

Can a well-designed digital experience make public libraries feel more accessible and relevant to modern users?

Core tasks

Platforms

Mobile and desktop flows

Approach

Refine the existing UI, not a full rebrand

01 / Context

Why HKPL was the right redesign challenge

Why HKPL

Community and education are core to the kind of work I want to focus on, and HKPL sits at the intersection of both. The site is a strong context for exploring cohesive, responsive design because users move between mobile and desktop for different library tasks.

Problem statement

Despite a wide range of resources, users encounter friction when logging in, browsing the catalogue, and renewing books. Key flows need to be simplified and made more cohesive across platforms without requiring a full visual overhaul.

Where the friction is

Dated interface increases cognitive load

Experiences differ across devices

Primary actions are hard to spot

02 / Goals

Success meant clarity, not a full visual overhaul

Experience goals

Simplify browse, reserve, and renew flows; keep the UI cohesive across devices; reduce abandonment by making tasks easier to complete.

Business goals

Make library services more accessible, increase awareness of digital resources, and sustain engagement beyond one-off outreach campaigns.

User goals

A less cluttered interface, lower cognitive load, and a clearer login process for both new and returning users.

Measured through stronger task completion, clearer user comprehension, shorter time on task, and improved satisfaction during testing.

03 / Research

Patterns emerged around search, accounts, and mobile expectations

Competitor analysis

What “good” library discovery looks like

Clean interfaces foreground book covers, clear CTAs, fast search, simple filters, curated collections, and rich item detail pages. Renewal and waitlist messaging needs to be transparent, especially when an action fails.

User interviews

Clutter drove abandonment

Users described desktop as outdated and overwhelming, while mobile felt cleaner but still required zooming. Login placement, long card numbers, small tap targets, and limited filters made everyday tasks feel harder than expected.

Affinity mapping

Navigation had to focus on primary tasks

The desktop site had too many nested links. Users wanted account pages grouped around holds, reserves, loans, and a visible Renew CTA rather than a broad redesign of every section.

Cross-device behaviour

For many users, the website is the library

Many users rarely visit branches and switch devices depending on the task: renewals on mobile, browsing and reservations across mobile and desktop. Consistency became a core requirement.

Synthesis

The redesign should not compete with HKPL’s existing identity. It should clean up priority tasks, make search and filters easier to find, and make account actions feel predictable across devices.

04 / Solution focus

Must-haves were chosen around the journeys users repeated most

Return countdown + Renew Now

A clear due-date countdown and renewal CTA reduce clicks and support users who currently create their own reminders.

Simplified responsive homepage

The desktop homepage takes cues from the simpler mobile experience while preserving HKPL’s existing visual branding.

Visible advanced search

Focused dropdown-based filters make advanced options easier to discover and reduce the need for long scrolling search pages.

Simplified flows documented

Renew flow

Reserve flow

Both flows were simplified and documented in detail through user-flow diagrams, with emphasis on predictable account entry points and clearer confirmation moments.

05 / Testing

Testing validated the flow direction and surfaced refinements

Mid-fidelity prototype

Users looked for login first

Participants expected to sign in before renewing or reserving. Labels, navigation groupings, small checkboxes, and missing confirmation context needed refinement.

High-fidelity prototype

All users completed both tasks

Renewal and reservation worked across mobile and desktop, and the design felt cohesive. Users still wanted stronger confirmation states, visible search and filters, and clearer hierarchy between Reserve and Add to Collection.

100%

completed renewal and reservation

validated device contexts

priority refinements identified

06 / Reflection

The strongest solution was practical, focused, and realistic

The main challenge was working within HKPL’s existing layouts and large content ecosystem while introducing improvements that could be realistic in a real-world implementation. Translating mobile layouts to desktop also required balancing generous desktop space with smaller-screen constraints while keeping both platforms aligned.

Core problem solved

Make renewing a loaned book and reserving a title straightforward and predictable by cleaning up existing patterns, clarifying labels, and restructuring key flows so users can complete actions with confidence.

07 / Images and charts

Add prototype screens, diagrams, and charts here

Prototype screens

Drop mobile and desktop mockups here

Research charts

User-flow diagrams

Final takeaway

The redesign makes online library interactions feel more findable, predictable, and approachable — without losing sight of HKPL’s real-world constraints.