NLB

Overview

As an avid library-goer and bookworm, I often found myself browsing through NLB’s website. However, despite using the website religiously, I had trouble navigating through it. After observing that others also experienced issues with the website, I decided to take matters into my own hands and improve the experience.

Disclaimer: I am not affliated with NLB in any way.

Heuristics Analysis

The first thing I did was to conduct a heuristics analysis of the current website. This would help in identifying specific problems within the website.

I identified a few key problems:

The website was largely disorganised
It was not aesthetically pleasing - the website looked outdated
The website sorely lacked any sense of brand identity. The fonts, colours, and graphics did not portray what NLB was about

Desktop Heuristics Analysis

Mobile Heuristics Analysis

Competitor Analysis

As there were no other library brands in Singapore, I looked at other library brands overseas to get a sense of what they were offering with their websites. The creation of these competitive profiles (usability, layout, navigation structure, content, design and performance) helped to assess current offers in this area.

Interviews & Research

Goals of my research

What users used the website for
How often did they use the website
What tasks did they find easy to accomplish
What tasks were difficult to accomplish
What they liked/disliked about the website
What they thought could be improved

To better empathise and understand the user’s point of view about their user experience, I conducted qualitative interviews with users aged 15 - 55. I chose this method as it allowed for a more personal approach, and I could see how they navigated through the website.

After the interviews, I transcribed the answers into little digital sticky notes, so that I could group the answers thematically.

It was from affinity mapping that I could see the most important issues and prioritise them during my design process.

From the affinity map, I concluded that the 3 main issues to work on were:

Navigation structure
Aesthetic
Event page function

Empathy Building

Using the data from the interviews, I defined 2 target group profiles to better empathise with my main user groups and prioritise my goals according to their needs.

User Journey Map

With the user personas in mind, it was easier to empathise with each of the users and craft a product that was better suited to their needs. I identified opportunities within their everyday tasks through a user journey chart, and took note of what they needed to achieve with each of these as well.

Information Architecture

The current Information Architecture (IA) contained multiple layers and was disorganised. Despite the large amount of content for the website, a lot of content was not clearly laid out for users to find. I worked carefully to define the current IA and meticulously mapped out the connections and hierarchies among each of the sublayers.

*Revised information architecture — laying out all the content more clearly*

User Flow

Before going into the actual wireframing and prototype, I wanted my idea of the redesign and restructure to be clear. This would help minimise any misunderstandings about design specifications.

I proceeded to identify key pathways and map out the user flows.

Wireframing

Taking into account my research so far, I decided to tackle these issues in my redesign.

Aesthetic to be cleaner and more modern
Establish strong branding
Events content should be given more focus
Menu bar to be have better structure
Footer to be more organised

I created a moodboard to keep the style and aesthetic of the design consistent.

I then sketched out some low fidelity wireframes before committing to high fidelity designs. This allowed me to play around with a few layouts instead of focusing on design details.

Finally I designed the high fidelity wireframes.

Prototyping

I also created a prototype so that users could visualise the end product better.

User Testing

I conducted a usability testing session with the initial group of users I interviewed to validate if the new designs would solve their problems.

The response was overwhelmingly positive — they enjoyed the new aesthetic and felt that it was easier to navigate through the website.

Style Guide

Now that the product had a good basis to start with, I started documenting each component used, and linked them all using XD’s Component & Library feature to ensure that a change made to one component will be reflected across all its variations.

This was done to make the lives of both developers and future designers easier if any new features or amendments were to be done later on.