Harris County Public Library Redesign
-
The Harris County Public Library has so many amazing services they offer to the community, but their website is a hindrance to people being able to easily find out the information they need to utilize their services. The library website is cluttered, unorganized, and difficult to find and use key features.
-
Redesign the local library website to make it more accessible for people of all ages and demographics to use.
-
-Time (only two months to complete)
-As this is a passion project, the true business limitations are unknown (how much time, effort, money can the Harris County Public Library dedicate to a redesign?)
-Limited resources for research and elements that could enhance the redesign, such as a photographer for new images.
-
Balsamiq, Figma, Zeplin
-
This case study is purely a passion project, and was not commissioned or implemented by the Harris County Public Library.
Where we began:
This project began by trying to use my online library account with the Harris County Public Library and getting frustrated running into "walls", having a hard time finding the information I was looking for, being logged out of my account every time I tried to find events happening, or being overwhelmed at all the information given when trying to put a book on hold. I love what the library offers a community and want it to be an accessible, easy, approachable, and enjoyable experience for everyone to use. Highlighted below are some of the issues I found and wanted to improve when redesigning the Harris County Public Library website.
Automatic Logging Out
This was a very obviously frustrating aspect of the user flow. If the user is logged in and goes to the home page, it will log out of the account every single time upon trying to return to the account, making the user have to input their information multiple times. This is very annoying and inconvenient, making the user want to quit exploring the website.
Visual Clutter
There is so much clutter on this page, it’s hard to know where to look. It is easy for a user to miss key information because they have to skim through so much visual activity.
Information Overload
This is the page the user lands on upon searching for a book. There is a lot of unnecessary information for the user on this page. Having to scan through all the given information on each book and the filter options is information overload for someone trying to accomplish a simple task, such as checking out a book.
User Persona and User Stories:
Tl;dr- Rebecca is a busy mom who wants to use the library more and needs the website to be efficient.
I chose to create Rebecca as my primary user persona. In my own research of attending the library and talking to library goers about what they feel is lacking within using the library website- She represented a group of people that would benefit from an HCPL website redesign and improved efficiency. I used her story, pain points, needs, and goals to guide the rest of my design decisions. I also came up with 5 other user stories I referenced throughout my redesign.
As a busy person, I want to look up the title of a book and find out immediately when it is in stock, and exactly where to locate it in the library, or to place it on hold.
As an avid reader, I want to see recommended books that I might enjoy.
As a library user, I want to see previous books I have checked out and when they are due easily.
As a library user, I want to easily find out what services my local library offers.
As a new neighbor to the community, I want to easily sign up for a library card.
Creating Solutions:
Accessible
-
Minimal
-
Welcoming
-
Accessible - Minimal - Welcoming -
When looking at my user persona and stories, I chose a few words I wanted the HCPL redesign to feel: accessible, minimal, and welcoming. I used those words when making all design decisions: creating my user flows throughout the website, deciding on the navigation structure, choosing color palettes and fonts, selecting images, and creating icons. I had in mind all the different age and ethnic demographics that will interact with the Harris County Public Library website and designed it with their needs in mind.
Below are screenshots of the original HCPL homepage (left), followed by my low, mid, and high-fidelity wireframes.
The Home Screen
I wanted the home page to feel very personalized. On the current website, the difference between being logged in and not having an account is virtually indistinguishable- there is little to no personalization until you dig deeper into your account.
I wanted to have notifications for any books due or books on hold coming up at the top, being the first thing the user views. I then prioritized events at your preferred library branch, followed by book recommendations based on books the user might have previously checked out or on what is currently popular to further personalize the home page.
I designed this so that users would have the most necessary, personalized information they need on their home page without feeling cluttered.
My Account
Similar to the home page- I wanted the account page to feel very personal and uncluttered. On the current HCPL account home page, there is the same information in multiple places, and each book listed that a user might have on hold or checked out has a lot of information next to it that doesn't seem necessary for the user.
I wanted to keep the focus on what is important to the user- dates and timelines they should be aware of, a place to store their bookmarked books, and include more personalized book recommendations to them.
Book Search
I was very excited to improve this screen. On the original HCPL website, the book search screen felt so cluttered with unnecessary information and, as the user, it felt overwhelming to achieve a necessary task of the library website.
I wanted it to appear visually uncluttered while having options that users could expand if they wanted to further define their search. I designed all the filter options to be available for the user, while also hiding them if they weren’t needed.
In the expanded breakpoints for desktop and tablet, I used the extra real estate to show different categories of book recommendations.
Style Guide:
Responsive Designs:
When creating different breakpoints for the Harris County Public Library website, I went back to Rebecca, my additional user stories, and the three themes I wanted the redesign to feel: accessible, minimal and welcoming. I thought about different uses and features users might have while using different devices. For example, as each breakpoint size increases, I often used that real estate to highlight different categories of book suggestions, hypothesizing that users on a desktop might be at a place to “browse” more versus being on the go and needing quick information from their mobile device. One of my complaints about the current website is the clutter, and I wanted every screen size to feel intentional, organized, and useful.
HCPL Home Screen
HCPL Account Home
HCPL Book Search
The Prototype:
Conclusions:
Moving Forward
If I was going to continue with redesigning the Harris County Public Library website, I would want to go back to the research phase to conduct more formal studies and gather more user insights, specifically having in mind what the different needs are of users who would access the websites from their phones versus users who would utilize the website on their desktop more.
I would then create more user flows for each of the breakpoints, additionally creating a larger desktop breakpoint as well.
One area I wish I had more access to in my redesign is a photographer to have more real-life photos of events and spaces of the different locations of the Harris County Public Library. I think that having more real images of the spaces would greatly benefit the website, and would advocate hiring a photographer for the website design.
I would also want to explore creating event page templates that coincide with the rebranding, as well as spend more time on a set of graphics that could be reused for various events that the HCPL holds.
Lessons Learned
My biggest challenge during the HCPL redesign was creating the entire rebranding for the website, as well as doing the research and creating the user flows completely solo. It was a lot in a matter of two months to take it on entirely myself. I work really well in a team context, and having other people working on the same project to use as inspiration and to bounce ideas off of, so doing the entirety of this project by myself was a good challenge.
This project was more focused on continuing to develop my UI skillset as a UX designer, and I never got to conduct formal usability tests for my designs. I tested my designs with family and friends in informal settings, but the project does feel incomplete without that data.
During this project, I learned much more about utilizing all the useful features Figma has for designers- components, variants, auto layouts, working with different grid systems, as well as I learned how to make all the icons from scratch within Figma. I got much more comfortable with the application and, through trial and error, found really good flows to get into and a good order of operations to use to make designing easier.