Mobile App & Responsive Website Redesign
National Library Board (NLB), Singapore
Project Type: Group (team of 4), as a part of UXDI Course
Role: Co-Researcher, Co-Designer, Prototype (App), Partial role in Usability Test
Duration: 2 weeks (May 2020)
Tools: Sketch, InVision, Axure, Miro & Trello
Singapore, with 26 million visitors in 2019 alone and an overall
reach of 7/10 residents. The current app has 610,000 downloads
to date and 40.52 million books have been borrowed from the
library till date.
click on the section headers to jump to the section
Understanding the Goal
To understand why users use the app & other platforms of NLB, their motivations & pain points
while using the same.
Knowing the User
Who are the users?
In order to understand the quantitative data – the most preferred platform & the most frequently used features, we conducted a short survey.
To get more qualitative insight on the user’s experience using their preferred platform, which was the app, we conducted a remote interview with 12 participants.
Some user insights
Most of the users prefer using mobile app or desktop to access NLB services
The most frequently used features are to borrow books & ebooks, extend due date of current book loans and look for events)
They visit the library to pick up / return books or to study there
Most of the users fail to return book loans on the due date & end up paying fines despite receiving frequent reminders
Analysing the Scope
Since the library does not have any direct competitor, we compared the book pick up & return process with some e-commerce & food delivery services to see if there can be some other way to pick up / return books apart from going to the library.
Using Jakob Nielsen’s 10 general principles for interaction design, we evaluated the existing app & worked upon resolving the ones with the maximum severity rating.
We also conducted a usability test on the current app with 6 users, to understand the scope of improvement. We gave them 3 tasks including finding an ebook to borrow it, a physical book to reserve it and extending a current book loan. Below are some common issues that the users mentioned.
the book format is not very clear
there is no option to search within the ebooks category
it was difficult to locate loans, the most used feature
there were multiple icons of the same design, confusing the user about its content
Defining the User
Problem to Solution
Problem #1: Lindy needs a way to access her most frequently used features easily in order to save time wasted in locating the features.
Solution #1: Quick Access
With this editable tab, Lindy can choose the features she wants to see on her home screen.
Problem #2: Lindy needs a convenient way to return her book loans so as to avoid paying fines repeatedly & making a trip to the library just to return the books.
Solution #2: Pop-drop
This feature available to premium members will allow Lindy to drop the book loan & pick up the reserved book at the nearest pop-station of her choice.
Designing User Flow
The flow suggests the process of the most common actions that the user would perform on the app - searching for a book to borrow, extending an existing book loan & use the newly added pop drop feature. to drop the book at the pop station.
Planning the Sitemap
The flow below suggests the process of the most common actions that the user would perform on the app - searching for a book to borrow, extending an existing book loan & use the newly added pop drop feature to drop the book at the pop station.
Conceptualising the Features
Setting the Design Tone
As a team, we sketched out some designs based on the features ideated.
Version #1: We discussed & combined all the sketches to create the first draft of our prototype.
Testing the Prototypes #1
We conducted a usability test with 5 users using 5 tasks – 3 similar to the usability test conducted for the existing app and 2 new tasks using the newly added features – quick access & pop drop.
Version #2: We made design changes as per the design system and developed the interactions further to arrive at a high fidelity prototype.
Click here to view the prototype in browser
Testing the Prototypes #2
We conducted a second round of usability test with 5 users using all the 5 tasks as used for the earlier round.
We improvised further on the design & features and made changes as per the feedback received during the usability test – renaming Quick Pick to Quick Access, a more known term as it used in Google Drive as well and adding more details to QR code access.
Click here to view the prototype in browser
As per survey results, most users use either mobile or desktop. We applied the features & design used in the app for the responsive design for a website. The features like scanning the barcode were restricted to the app only, rest were carried forward to the responsive versions as well.
To develop and expand on identified features such as Seat Availability
To explore on the targeted groups to have a customised experience
To explore and research ways to make library experience more engaging (E.g. Book club)