top of page

Houston Public Library Website Redesign

Google UX Certificate Design Project

INTRODUCTION

As a remote worker, I love to spend lots of time working at the Houston Public Library in one of their cozy nooks.
But after taking a look at the website, I discovered a not-so-user friendly format!
My Role
This was a personal project done by me alone for the completion of my Google UX Ceritification
 
- Personas
- Gap Analysis
- Information Architecture
- Wireframes
- UI Design
- Mockups and Prototyping
Summary
In this project I identified the main issues with the Houston Public Library website including confusing Information Architecture, a disconnect from user needs and a lack of accessibility considerations.
Problems with the original website
screenshot of HPL site.png
Low priority tasks emphasized
Two menus with repetitive elements
Low quality user experience
 
- Complex and unusual navigation
- Repetitive labels
- Low priority tasks are most visible (almost no one wants to rent a room or venue)
Vague navigation titles
The Solution
- An efficient and simple navigation system that aligns with most users' mental models
- Make most important priorities easy to find and accessible 

 
Outcomes
The improved website design allowed 37% more users to succeed in completing their desired tasks in under 30 seconds.
37% Success Rate
75% Success Rate

PROCESS

1
Discover
2
Analyze
3
Synthesize
4
Refine
5
Design

1. Discover

Initial Discoveries
I started my user research by taking a look at the stakeholder's (HPL) original website and their mission statement to understand their business goals.

Then I had a few conversations with current users of the Public Library System to find out what they typically go on the site to do and developed personas.

 
Mission Statement.png
Click to enlarge
 
Google UX Design Certificate - Persona [Template] (1).jpg
Google UX Design Certificate - Persona [Template] (2).jpg
Sorting top priority tasks
Based on my user research and research of the Houston Public Library's business goals, I was able to compile a list of the most important to the least important tasks.

I sorted them based on a voting survey I did with 30 people I gathered from Reddit r/houston

 
Screenshot 2022-10-09 184134.png
Click to enlarge
 

2. Analyze

Screenshot 2022-10-10 155904.png
Click to enlarge
 
Analyzing the discrepancies
I wanted to understand what the Houston Public Library website was prioritizing vs. what they really should be prioritizing to understand what it is they need to change.

I scored each task on a scale of 1-3, and highlighted the tasks that were the most important to the users and which ones needed urgent improvement.
Testing the current site
To take it one step further, I took the top 10 priorities and had 8 users complete them in an unmoderated test using screen recording to see how long it took them to complete each task.

Key Findings 

-a low overall success rate (%37) means that there is a need for a more straightforward organization method and an analysis of peoples' mental models and what they're used to.
- The lowest scores are in all the areas that require searching (%40),  which confirms that it's a high priority need that's very underserved.
37% Success Rate
30 second tasks Given:
1. You just moved to Houston and want to get a Library Card
2. You want to log in to your  account
3. You browsed a couple of books and want to put one on hold.
4. You want to find and register for an event at the library
5. You want to look for books specifically for teens
6. You want to look specifically for eBooks
7. You want to search the website to find genealogy info.
8. You want to see reviews on a book
9. You're doing a research paper and you want to find research
10. You want to see what events are being hosted in July

3. Synthesize

1_h3JP-tFGjeUyXtOc2VFOsA.jpeg
Card Sorting activity - mental models
I had 4 patient and willing participants do a card sorting activity where they sort 15 tasks into which tab they think it should go under to make the most sense. 

I wanted to create an IA that most matches user expectations
Information Architecture based on the results
Rough IA.png

4. Refine

Refined Sitemap and navigation
Mind Map (1).jpg

5. Design

Wireframes
Home page and two secondary pages to start the testing process
Index (1).jpg
Search Catalog.jpg
Featured events.jpg
Click to enlarge
 
Testing the wireframes
Using the new navigation structure and simplified interface, the 6 previous users and 2 new ones completed the tasks at a much faster and easier rate!

Key Findings 

-the success rate raised from %37 to 75% on most features!
- However, participants were still confused between "catalog search" and "global site search" since both were search features
75% Success Rate!
30 second tasks Given:
1. You just moved to Houston and want to get a Library Card
2. You want to log in to your  account
3. You browsed a couple of books and want to put one on hold.
4. You want to find and register for an event at the library
5. You want to look for books specifically for teens
6. You want to look specifically for eBooks
7. You want to search the website to find genealogy info.
8. You want to see reviews on a book
9. You're doing a research paper and you want to find research
10. You want to see what events are being hosted in July

FINAL DESIGN

High Fidelity Visual Design
- I used the Microsoft Fluent Design system in Figma for my main components
- I kept the same colors as the original website for user familiarity
- I changed "catalog search" to "search for books" to avoid confusion
Screenshot 2022-10-11 124920.png
I kept the format very similar across most sections of the website to avoid visual clutter.
I used the icons from Google's Material UI library
Index (3).jpg
I put the three most important tasks front and center. Events and Exhibits, Get a Library Card and Catalog Search.
Added the HPL Newsletter signup in a colorful eyecatching banner.
More advanced filters are on the side bar here
Search Catalog (1).jpg
A simple and minimalist catalog search with the option to filter type of object being searched for
Simplified and more professional footer
Several eyecatching featured events to grab the users attention.
Big red button for easy registration
Featured events (1).jpg
Similar format to Catalog Search results page

RESULTS

75% of new users were able to complete the main tasks under 1 minute each!
As opposed to 37% of the users of the original website.

*Study was done both times with 8 users

 

WHAT I LEARNED & NEXT STEPS

What I learned
Just changing the Information Architecture alone on a website can increase the user success rate dramatically. Putting the most important tasks front and center is good for the user.
Further simplifying and organizing the interface can yield even better results.
It's important to keep in mind the audience for the website. Many older people use the library, so they need a simple and straightforward process to avoid frustration.
Next Steps
- Create a responsive mobile version of the website

- Conduct further testing using the high fidelity mockups
bottom of page