National Library Board

● Type of project Web and App revamp for NLB
● Circumstances 2 week project at General Assembly
● My role Lead designer, Researcher
● Methodology Interviews, Contextual inquiry
● Tools used Figma
● Deliverables Persona, Customer Journey Maps, User Flows, Prototype

Background

Digital reading has seen yearly growth both globally and in Singapore. Even before the onset of Covid-19 pandemic, National Library Board (NLB) had been progressively building its digital offerings in line with the Digital Nation push. When the pandemic struck, NLB moved quickly to enhance safety measures and digital offerings, to encourage reading and lifelong learning from home during the circuit breaker and beyond.

This has accelerated the growth, spurring digital demand when physical movement was restricted, and thus reduced physical book loans. The eBook loans increased by more than 150% during the 2020 circuit breaker period as compared to the same timeframe a year ago.

1. Research

NLB’s Objectives

To give a brief overview, we begin by understanding NLB. First, we did our independent research to look at all the key objectives. From all these information we gathered, we streamlined NLB’s key objectives that are within the scope of this project to the following: Enhance digital offerings to support reading and learning from home.

User Objectives

To find out user objectives, we identified key tasks to learn more about user behaviours and what we should focus on. We then prioritise thinking about key solutions and validated them.

These are the key objectives of the users:

Discover new books for leisure and also to gain new knowledge
Needs an easy way to obtain and read ebooks
Prefers free or lower price points

The following outlines how we derived at our objectives.

User Interviews

With NLB’s key objective in mind, we conduct user research to establish a good understanding of NLB’s users that would guide us as well as help us in determining the task scope in the re-design. We conducted 5 user interviews to understand users mindset and behaviours. We used heuristic evaluation and usability testing to discover issues with the current system, and came up with a user persona and customer journey map.

Heuristic Evaluation

We did heuristic evaluation on NLB’s current website, and we prioritised the items which had major usability issues. The website and app appear like two different products from different entities. The interface on the two platforms is inconsistent and they are difficult to navigate. Hence, all these findings led to the scope of our Usability Testing.
*click image to enlarge*

Frame 7.jpg — Usability Testing

Due to the difference in website and app, we gave users the same tasks as a control factor. This enabled us to understand the user flow as well as qualitative and quantitative feedback.

2. Synthesise

User Persona

From our user persona, we focussed on the key digital offerings, which are their resources, their online programmes and account features. Due to Covid restrictions, the user now needs to book a slot to visit the library. Hence, one necessary feature we needed to keep in our scope was to plan a library visit.
*Click image to enlarge*

Customer Journey Maps

These are the specific insights we received from our user research that help us map out our users journey on individual platforms. As a start, we managed to identify the five stages of our journey map; namely: awareness, interest, discovery, action, and follow up. So from our customer journey map, we identified areas of opportunities for the UX team. These were translated into possible features that the UX team brainstormed through the users interest, discovery, action and follow up stages.
*Click image to enlarge*

Feature Prioritisation

We then put these opportunities through an action priority matrix, and focussed on features that were essential to our users completing the basic tasks but could improve the overall ease and experience in doing so. From our matrix, we then prioritised key solutions for the website that would like to improve and these are classified into these four key parts which are information architecture, homepage redesign, search, enlisting redesign as well as account personalisation.
*click image to enlarge*

Key Solutions for Website

From the Customer Journey Maps and Features Prioritisation, we then prioritised key solutions for the website that would like to improve and these are classified into these four key parts which are information architecture, homepage redesign, search & listing redesign and account personalisation.
*click image to enlarge*

Information Architecture

A card sort, tree test and survey were done to propose the new Site Map.
*click image to enlarge*

Redesign of pages

The Home, Search and Account pages were redesigned.
*click image to enlarge*

Key Solutions for App
Using the same approach, we derived our key solutions for the app: Refine Search & Listing, Streamline Navigation and Brand Consistency. Brand Consistency on both the platforms is achieved using the Style Guide, which will be shown below.
*click image to enlarge*

Search & Listing

*click image to enlarge*

Streamline Navigation

*click image to enlarge*

Style Guide

The purpose of this style guide is to help us achieve a consistent brand and voice, establishing a unified visual identity for both the website and app.

click image to enlarge

3. Ideate

Sketches

Sketching is a very efficient way of communicating design while allowing us to try out a multitude of ideas and iterate them before settling on one.

click image to enlarge

Wireframe-B&W.jpg — Wireframes

Wireframing is a critical part of the interaction design process. The aim of a wireframe is to provide a visual understanding of a page early in a project to get the project team approval before the creative phase gets under way. It is like a walkthrough and gives you an overview of how our website and app will work.
*click image to enlarge*

4. Prototype

Website Prototype

App Prototype

Validate

1. Validation by User Flows

The User Flows for the two major tasks (login and eBook search) on both platforms for current and redesign were plotted. Both platforms saw a significant reduction in the minimum viable count in the user flows. This means it is easier and faster for the user to navigate on the revamped platforms.

Click image to enlarge

2. Quantitative Validation

We conducted another round of usability tests for both website and app prototypes. For the website, SEQ scores have improved overall for each task, and there is a drastic improvement in the SUS scores we received for positive feedback on our four key areas of focus. The SEQ and SUS scores of the original mobile app were already pretty high. However, after doing our second UT on the prototype, there was still a general increase in the individual SEQ scores as well as the overall SUS scores.
*Click image to enlarge*

3. Qualitative Validation

These positive sound bites and quotes were recorded from the users during the second round of Usability Testings with the website and app prototypes.
*Click image to enlarge*

Refine

5. Takeaway

Challenges

With any group project, there is bound to have different opinions. This is especially so in design solutions since they are subjective in nature. I understand that the decisions made by the our team must meet two essential criteria:

1. It must meet the goal of the project.

2. It must move the project forward.

Hence, I took a step back, looked at the project from a macro view and see if the proposed solutions still answer the brief. Any discrepancies should be cleared, and a consensus decision should be made. However, it is important and also unlikely that all members of the team are on the same page all the time. When there is a disagreement, it is crucial to ensure that at least everyone understand the reasons behind the decisions. Hence, this project has taught me to react to different opinions and analyse the situation with faster response time. I am willing to be more adaptive and accept change.