Redesigning Hong Kong Public Libraries Website


Note: This is just a concept made by me, not the actual product.


The Hong Kong Public Libraries aims to serve the public by providing services to meet the community's need for knowledge, information and research, to support life-long learning, continuous education and profitable use of leisure time, and to promote local literary arts.

About the website:

  • A network of 70 static libraries and 12 mobile libraries.

  • 14.90 million items, including books, audio-visual materials, newspapers, periodicals, CD-ROM databases, microforms and maps.

  • One of the largest computerised library systems in the world with Chinese and English capabilities.

  • Remote access to library services including telephone and web renewal service, online reservation service and email enquiry service.

  • Information about Extension Activities: The educational and recreational programmes such as reading programmes, storytelling for children, book displays, exhibitions and subject talks organised at the libraries. Promoting literary arts in Hong Kong: iterary awards and competitions, the Hong Kong Literature Festival and a wide range of literary activities.

General Thoughts

I noticed that the website UI is outdated and not user-friendly. The way information is presented made it difficult to navigate. As a book-lover, I decided to take the challenge of redesigning it as my first UI/UX case study ever.

Library is a big system and I can't really talk to the people who are in charge, so a deep level of understanding is difficult to achieve. However as an user and a designer I just hope to pinpoint the major problems, improve the experience, and design a better-looking version that would help connecting this wonderful system with people who enjoy books, encouraging the culture of reading.


UX Reseach

Art Direction


UI Design



Site Audit


User Flows



Usability Testing

Pain Points

1. Homepage

  • Long & confusing copy, small fonts, hard to read.

  • Too many clickable links.

  • Too much information on homepage, nothing is more highlighted.

  • Elements sizes are small, not responsive, too much space on the sides and too suffocating in the center.

  • Icon set is outdated, unattractive.

  • Inconsistent font system, color scheme (different look & feel when come to the e-resources which is good but needs different approach).

  • Button for mobile version on web version is unnecessary.

  • Social media links on top -> too much distraction.

  • Repeated links in footer and the navigation menu.

  • User flow is confusing, unclear.

Screen Shot 2019-07-04 at 10.04.20

2. Book list page:

Screen Shot 2019-07-11 at 1.12.03 PM.png
  • Main content is not centered.

  • Book covers are too small.

  • No ratings from previous borrowers.

  • Search bars are confusing.

  • "Clear Session" and "Search History" should only be shown when user already logged in.

  • Button for mobile version on web version is unnecessary.

  • The space is not maximized, there should be buttons for switching between list view and grid view.

  • Consider adding categories & sub-categories for genres.

3. Book information page

  • Main content is not centered.

  • Search bars are confusing.

  • The "summary/annotation" and "author notes" link to another website.
  • No borrowers' reviews/ratings.

  • Personal suggestions: Allow people to read ~10 pages on the page before borrowing (quick view)

  • Also consider adding new section: suggest other books in the same category / borrowed by same users.

Screen Shot 2019-07-11 at 1.58.25 PM.png


Screen Shot 2019-07-11 at 2.14.43 PM.png

Clover, 12 years old.​

Secondary school student.

Has come to the local public library for 3 years.

Screen Shot 2019-07-11 at 2.21.22 PM.png

Steve, 25 years old.​

Graduate student.

Started to do research for Master assignments in the libraries.

Screen Shot 2019-07-11 at 2.27.01 PM.png

Angie, 34 years old.​


Occasionally comes for old journals/newspaper researches

Goes to the libraries with her mom.

Never used the website.

Now using it to find summer events and programmes.

Needs scientific materials.

Not much of a reader.

Prefers to search for the books he needs online then comes and gets them.

Following an unsolved old crime case.

Searching for old articles related to the case.


Screen Shot 2019-07-07 at 11.04.37


Library wireframe_2x.png
Library wireframe book list page_2x.png

(to be continued)