Project Overview
Lead the revamp of National Library Board’s website, to position National Library Board as a bold and dynamic organisation, serving as Singapore’s knowledge resource.
My Contributions
User Research, Prototyping, User Testing, Workshop Facilitation, Information Architecture, User Interface Design, Frontend Handoff
About the Team
2 Project Managers, 3 Designers, 5 Engineers
To build a one-stop gateway for all of National Library Board (NLB)'s vast wealth of resources, to position NLB as Singapore's Knowledge Resource.
Issue 1 — Vast wealth of resources not discoverable
The National Library has offerings ranging from workshops, talks and programmes, free-to-access digital books and online courses such as Udemy and Overdrive, Singapore Newspapers and more. However, NLB is seeing poor engagement with these resources as navigating to them has deterred many users from discovering them.
Issue 2 — Content architecture is not intuitive
Frequently accessed content such as library opening hours and details, online resources, and service offerings from NLB are not prominent and discoverable for users.
This resulted in users opting to use Google to search for their desired pages, rather than navigating through the website.
1. Facilitated and led the direction and discussion for the revamp of NLB’s website through conducting envisioning workshops with stakeholders within NLB, gathering and aligning design goals with stakeholders and the design team. (User Experience)
2. Led the design of the New NLB website revamp, with focus on improving experiences based on content discovery and accessibility, while addressing pinpoints identified during user testing. (User Interface)
3. Project handoff to developers through the use of design systems and flow diagrams to aid the transition from design to development. Handoff tools such as Adobe XD for interactions as well as Zeplin for styling handoffs were used.
4. Rigorous QA testing of site to ensure that viewing is optimal for mobile, tablet and desktop view.
NLB had prior User Experience case studies done by consultancies, which our team used to value add and validate our user research analysing NLB’s web experience.
Through our research, we identified two main pain-points of the website:
NLB often hold events such as workshops, classes and family friendly activities within their libraries — however, information pertaining to these events were not properly consolidated within the site. Thus it became difficult for users to discover ongoing events offered within the National Library.
NLB also has a range of Singapore related resources such as digital books, online enrichment platforms such as Udemy, access to subscribed databases for researchers — however, these were hidden within their website, which made discovery difficult for users. We wanted to integrate and surface these resources to act as a one-stop gateway for users to discover content.
High bounce rate from NLB website as content was not organised with user journey and experience in mind. Similar content would be scattered across different navigation bar items, resulting in a disorientating experience.
During COVID, newspapers were made free for the public to read online. However, the content was not readily made accessible to the public within the website, as a result, users heavily relied on Google and the use of bookmarks to get to their desired content. This resulted in a very negative view of the experience.
Information pertaining to Services and Help offered within NLB was not categorised, which created a tedious experience for users when searching for the required information. This is an example of a list of services offered within NLB.
Before we began designing the interface, we had to determine who we were designing for, and their priority within this revamp. We also had to consider the positioning of NLB as an organisation and what were the objectives of the organisation.
Based on their users, we developed 4 high level personas with very distinct goals and user flows — using those, we were able to design and build an experience around these target users to cater to their content needs.
Our team conducted a series of physical stakeholder envisioning and workshops to gather requirements which would inform decisions such as the Information Architecture (IA) of the site as well as to validate our user personas and journeys.
Building upon the need for content discovery, we consolidated a page to house all happenings within the National Library. This provided users a one-stop gateway to find happenings based on their interest.
The concept of this page was based upon a search engine for resources. Thus, understanding filtering logic as well as its experience was crucial in creating and facilitating a smooth user experience.
Content within National Library Board's website was not organised with the user in mind, but rather — it was organised based on the needs of the organisation. This resulted in lack of user centricity as items within the website was not synergised, creating a disconnected experience.
Based on the images, content such as Services are not sorted according to user behaviour, which results in a long list of services which users have to go through. Similarly, discovery of library information is tedious as it requires >3 clicks from the home page to reach the desired information.
To understand the behaviour of the users better, we looked at Google Analytics to determine which are the popular interactions within the website. Using the number of page views, we were able to determine which were the tasks and interactions to prioritise within the website.
After we identified and sorted through the list, we had to develop an information architecture with the user in mind — based on content discovery and personalisation. This process is important as it would determine how the users would navigate within the website and the vast amounts of content NLB has.
Based on the Information Architecture and popular interactions by users, we had to translate it into meaningful designs. This means that the user would need the least amount of clicks to reach their desired content.
Based on Google Analytics, one of the highest tasks users do within the website is to look for library details — mainly the opening hours, and due to COVID, people would also like to know how crowded the library is, which is why this information is readily available in the homepage.
Popular interactions such as accessing free SPH newspapers are also surfaced within the landing page to grant ease of access to users. A resource search bar is also added in the landing page to allow users to easily tap into the wealth of resources which NLB offers.
Based on the revised content architecture, we were able to organise the content within navigation bar to have a better focus for the user in terms of the four personas we identified previously. This ensured that the experiences we created addressed a pain point which was highlighted during our research.
The team also organised NLB's approach to 'Services' to present it in a more organised manner, based on different user needs and journeys within the library.
An experience was also designed to allow users to search for libraries within Singapore in an engaging manner. This also improves the visibility of some of the lesser known libraries, which helps NLB achieve greater readership among Singaporeans.
This project was extremely fulfilling as I had a part to play in building Singapore's learning resource and to inspire a new generation of users who would look to the National Library as Singapore's knowledge resource.
During this project, I also had the opportunity to learn how a web interface can have such a strong impact in the perception and the positioning of an organisation. Little details and decisions made with stakeholders ended up shaping this project to be much greater than originally envisioned.
Building and maintaining a design system for such a big website is new to me — there were many things to be considered, such as mobile responsive design and also designing for Accessibility.
As NLB positions itself to be an inclusive organisation, Accessibility was a priority for them. Thus, we had to achieve a rating of 7 or more when it comes to contrast values for text — this takes into account: colour values, font size and usage of fonts.
