Dallas Public Library
📚 Re-envisioning an outdated website so that visitors can easily find media, events, and locations on desktop and mobile
OVERVIEW
A space for learning & community
The Dallas Public Library website connects visitors to a wealth of services, from borrowing books to free online courses. The website also informs visitors about upcoming events at the libraries, like family activities, financial planning, and voting.
The Problem
Visitors find the website difficult to navigate due to its cramped resolution, inconsistent typography, and disorganized layouts. The site is only partially responsive, making it hard for mobile users to engage with content.
The Solution
Re-envision the website with cohesive layouts and clear navigation, enabling visitors to easily find information on their preferred platform.
Impact
- Designed a responsive layout that enables effective mobile browsing
- Consolidated three disparate layouts into a unified design
- Simplified the typography by reducing the nine original fonts to a unified pairing
- 100% of usability participants appreciated the updated layout, noting that information was easy to find
- 90% of participants appreciated the integrated map feature and its ease-of-use
DISCOVERY
Understanding library visitors
Usability Test
I first tested the website to identify key features and pain points. I guided five diverse participants through the Home, Catalog, Events, and Hours & Locations pages. While they liked the content, they expressed an overwhelming negative reaction to the navigation and layouts. One participant noted:
“Sometimes when information is laid out like this, you wonder if the website still works.”
Three disparate layouts
Participants felt lost because of the inconsistent layouts on different parts of the website.
Unresponsive and unhelpful table
Because of the cluttered text and lack of context, participants had difficulty discerning which libraries were relevant to them.
Desk Research
I then consulted primary source articles to explore demographic information about Dallas residents, library visitors, and the devices they use. A notable intersection is that lower-income residents often rely on smartphones for internet access and place high value on library services.
The desk research coupled with the usability test enabled me to identify user needs:
- Clear navigation – Visitors, especially those with lower tech-literacy, need to easily access information that is specific to their goals.
- Modern & unified presentation – They need the website to be engaging and cohesive across different pages.
- Mobile responsiveness – Visitors, especially those who only have access to a phone, need a functional and straightforward mobile layout.
- Multilingual support – They need information to be available in their preferred languages.
DESIGN
Brainstorming solutions
Comparative Audit
To explore possible solutions, I evaluated other library/bookseller websites in a comparative audit. They have similar elements, including a prominent search feature with adjustable filters and clearly described library services.
Comparative websites also enable visitors to find locations by interacting with a map or entering their city or zip code
Left to right: Barnes & Noble, Boston Public Library, Half Price Books, New York Public Library
Low-fi Prototype
Referring to the user needs and design patterns from other library websites, I crafted low-fidelity mobile and desktop prototypes with key features:
- Layouts that are responsive for desktop and mobile
- Cohesive content groupings with clear descriptions
- Expanded screen space; unified and modernized presentation
- Dropdown menu to switch languages
- Location search with an interactive map
TESTING & ITERATIONS
Providing more context for locations
I conducted 4 rounds of usability tests and iterations for the desktop and mobile prototypes, each with five participants of diverse ages and languages. Overall, participants found the experience to be straightforward but felt confused when navigating Hours & Locations. I improved on these areas in the high-fidelity prototypes.
Visitors need more context for the pins on the map.
Problem
3 out of 5 participants felt lost by the lack of context for pins on the map.
Solution
A numbered list of locations with details correlates with the pins on the map.
Visitors need to find locations more quickly and conveniently.
Problem
3 out of 5 participants found List View to be too long. Each location card occupies sizeable screen space.
Solution
Without pictures, each card occupies less space. A Show More button reveals cards in increments of five.
FINAL DESIGNS
An organized & cohesive experience
The redesign empowers visitors to easily find the information they need. A brighter and modernized color palette aligns with the original logo, components and layouts are standardized, and content is clearly presented and useful.
Visitors can quickly find a library via the map or by entering a location.
Prominent filter options enable visitors to easily browse events.
REFLECTIONS
Guided by feedback
I improved the user experience and navigation across four key pages. Usability testing enabled me to gain valuable qualitative feedback from participants. Looking back, I would also test for more quantitative metrics, like asking participants to complete a System Usability Score questionnaire, so that I can compare iterations more concretely.