Long Beach Public Library
Product
Government Website
Role
Design Lead
User Research
Visual Design
Front-end Development
Product Summary
The Long Beach Public Library (LBPL) provides free and equal access to information, education, innovation, and community since 1896. During those 125 years, LBPL has grown to encompass 12 unique library locations providing access to essential services and amenities. LBPL operates Family Learning Centers to support lifelong learning, academic, and career success.
As the Lead Designer and front-end developer for Think Logic, I led the redesign efforts for the Long Beach Public Library website, including research, design, and front-end development.
Strategy
Defining the Problem
The City of Long Beach was transitioning to a new Content Management System. As part of that transition, the individual city departments were provided a budget to redesign their public websites.
We met with the library committee overseeing the redesign of the website to discuss their hopes for the redesign and to learn about what efforts they had made toward the redesign of their site. As a result of our initial meetings with leadership, we determined their main concerns about the current site and how that should inform our approach to the redesign.
Areas of Importance
- Current site had significant usability issue, including a lack of responsiveness
- The architecture of site content was confusing and provided challenges to users
- The back end of the CMS made manipulating content difficult and limited the options available to library staff
Forming a Hypothesis
User Research
During our initial meetings with the library website redesign committee, we found that the library had made several attempts to move forward with a redesign over the previous year. As part of their efforts, they had collected information about their users. I was able to make use of the information they had collected to produce user personas and user journeys.
Ideating a Solution
Visual Design Direction
Because the library site had not been updated for a considerable amount of time the site redesign committee approach the design phase with extreme caution. With that in mind, I established weekly meetings with the committee to review the design starting with style tiles to establish a visual direction through high fidelity mockups.
Once we had decided on a visual approach, I moved to wireframes to help establish how we would meet the needs of the library staff to more easily edit and create new content on the site. I used atomic design methodology to create reusable components that could be combined in a variety of ways to display specific content on a page as well as build complete pages.
Validating + Refining
Iteration
We iterated through the design by moving to clickable high fidelity mockups produced in Sketch and InVision. This allowed the committee to share the prototype with users to gain valuable user feedback.
Next Project
