My library

Year
2019
Role
User Research
Wireframe
User Flow
UI Design
Overview
My Library is the mobile app of the Hong Kong Public Libraries. It provides a convenient channel for accessing Hong Kong Public Libraries. Users can search, reserve and renew library materials through the app. This redesign concept was aimed to improve its user experience and user interface to increase user stickiness towards the app and public library services.
Why I did this?
I'm not a book worm, but I enjoy reading and learning new things. I used to buy many books, but one day I realized I didn't have enough space at home to store my books. I therefore stopped buying new books and started borrowing books. That's why I began using the mobile app of Hong Kong Public Libraries.

I was shocked by the outdated and terrible user interface design of the app when I first used it. To be fair, I was still able to renew and reserve books through the app, which means the user flow of some key functions is acceptable. Apart from that, the overall user experience is not very pleasant due to poor navigation and design. I've therefore decided to redesign the Hong Kong Public Libraries mobile app.
Build empathy
I lacked the resources for in-depth user research, but I conducted 5 user interviews with colleagues. It is intended to understand more about their book lending experience, their behaviour and the pain points.

I built 2 personas based on the results of user interviews and my own personal experiences. The aim is to help focus on user needs and goals throughout the design process.
Define problems
I identified a set of problems by analysing the existing design and the data I had gathered through user interviews.
#1
Lack of visual hierarchy

Users might find it hard to read and digest the information

#2
Inconsistent design language

It increases unnecessary learning and confusion for the users

#3
Unreasoned architecture and navigation

It increases users' overall interaction and learning costs

#4
Insufficient item's information

It increases difficulties for user to make decision

#5
Lack of personalised suggestions

It lowers users' engagement and stickiness

#6
Meaningless information

It creates unnecessary noise and distracts users

Some screenshots of existing app
Set up directions
According to the problems I identified, I set 4 design directions for this project.
#1
Simplify

Simplify the app architecture and navigation

#2
Unify

Create and apply a consistent design language

#3
Optimize

Improve visual hierarchy and user flow

#4
Personalize

Suggest items based on users' preferences

Improve navigation
Most of the pages are hidden inside the side navigation menu. Also, because of the clumsy structure, user interaction costs have been increased and the overall user experience is affected.

My design solution

An overview for all your items
The original design separates user's items into different pages, yet it is not intuitive and efficient for users to browse. Users should be able to take the corresponding actions and check the status of their items in one place. Therefore, a tab menu and cards are used to provide users with an overview of their items.
Identify useful items with ease
It can be frustrating when users enter the details page of an item but there is no information about the item's content. The new design provides the item's introduction and content as well as the author's information, so users are able to identify items that are useful for themselves.
Suggest items you might like
The mobile app will suggest items to users, based on the categories they are interested in and their saved items.
Follow your favourite authors
Users will receive notifications when there are new items published by their following authors that are added to libraries.
Save items and share your lists
Users can save items to the lists they created and share them with friends or social media.
No more physical cards
In order to increase user convenience, users can quickly access service in libraries with their digital library card(s) after saving their account(s) in the mobile app.

Prototype

Interactive prototype →
What can I do next?
It is a really interesting side project to work on, but I have to pause it in this phrase due to limited time and resources. There are still many areas to explore, which are beyond the mobile app.
  • Conduct usability test
  • Add onboarding flow
  • Explore the potential of improving user engagement
  • Redesign the visual identity of Hong Kong Public Libraries
  • Simplify the registration process of Hong Kong Public Libraries

Work inquiry, question or something else?

Contact me