Redesigning the Los Angeles Public Library website & app — a UX case study

Godiva Veliganilao Reisenbichler
UX Collective
Published in
9 min readJan 8, 2019
Desktop, tablet, and mobile versions of the redesigned LAPL website, as well as the redesigned mobile app home screen.

A few months ago, I decided that I wanted to redesign the digital user experience for the Los Angeles Public Library (LAPL) to better showcase their wealth of resources and services. About a week into the project, I realized that I needed to scale back my ambitions…so I redesigned the Library’s homepage, their logo, and their mobile app experience!

Note: This independent project is not sponsored or endorsed by the Los Angeles Public Library.

(from left to right) Demos of redesigned homepage on tablet and desktop; demo of the redesigned LAPL To Go mobile app.
Full content of the redesigned homepage (desktop) with annotations explaining how the changes build on the existing LAPL homepage.
Simplified visual style guide used throughout the LAPL homepage redesign.

Why the Los Angeles Public Library?

I moved to LA three years ago for grad school, so I’ve become well-acquainted with what LAPL has to offer. Generally speaking, I *love* public libraries — not only because they provide many ways for people to access knowledge (through books, e-books, movies, public programs, etc.), but also because they serve their surrounding communities. For instance, LAPL offers classes to help people get their high school diploma, as well as resources to help immigrants gain American citizenship.

Libraries in general (and LAPL in particular) are a fundamentally human resource and a community service, and I wanted to take on the challenge of helping LAPL’s digital presence better meet their users where they are.

Creating A User Survey & LAPL’s Strategic Plan

To kick the project off, I created a brief user survey that touched on how LAPL’s users:

  • interact with the Library in-person
  • interact with the Library digitally (via the website and the mobile app)
  • think of the Library as a public asset
Screenshot of my original call for participation in this project via Twitter.

Despite my best efforts at sharing and spreading this survey via social media, it didn’t get as much engagement as I would have liked! I couldn’t in good faith build an entire project on my own assumptions from the small sample of responses to my survey…

…so, rather than throw up my hands in frustration, I figured that LAPL must have already done this kind of user research. And they did!

Key pages from LAPL’s five-year Strategic Plan, 2015–2020.

In their 5-year strategic plan for 2015–2020, LAPL outlines six major goals for their patrons, and for how the Library can contribute to the communities of Los Angeles. These goals are as follows:

  • Cultivate and Inspire Young Readers
  • Nurture Student Access
  • Champion Literacy and Lifelong Learning
  • Contribute to L.A.’s Economic Growth
  • Stimulate the Imagination
  • Strengthen Community Connections and Celebrate L.A.

With these research-identified and mission-driven goals in mind, I rolled up my sleeves to redesign LAPL’s homepage!

Deconstructing LAPL’s Existing Homepage

To get a sense of how the existing LAPL homepage is structured, I labeled each part of it according to the function it serves. Doing so made it easy to see what information was and wasn’t prioritized, as well as what we easy or difficult to interact with:

Formal breakdown of the existing LAPL homepage, showing what information is prioritized.

After doing this formal breakdown, I took a step back to see how this prioritization of information might align with how LAPL envisions its users’ interaction with the resources and services they have to offer:

LAPL Mission Statement and a phrase-by-phrase analysis of what it means.

To better understand the resources and services that LAPL has to offer, I did an initial content audit, visually juxtaposing the name of the service, with how it appears to users on the Library website:

Initial content audit of LAPL’s Collections, Resources, and Services, juxtaposing the name of the feature with how it appears to users on the Library website.

How does LAPL’s existing homepage compare to other public libraries?

Overview of existing LAPL homepage.
Overview of homepages of other public libraries (from left to right: San Francisco Public Library, St. Louis Public Library, Seattle Public Library).

To see what the public library digital landscape is like, I compared LAPL’s homepage experience to that of the public libraries in five other major U.S. cities. Some insights from this comparison were:

  • Each library’s Updates are most often put front and center, followed by Catalog Search / Search.
  • Imagery and icons are used to break up the amount of textual information on the page.
  • Seattle’s use of a sticky header allows the menu to stay in view while exploring other content on the homepage, which helps to avoid getting lost in all of the available information on the page.
  • San Francisco’s small page outlay + dropdown menu navigation isn’t very “up-to-date”, however, it makes the different avenues of information easy to digest.

User Stories & Homepage Content Strategy

Before putting pen to paper (or pixels to screen), I created personas and user stories that would help to anchor my design decisions to the goals and values of the Library and its users/patrons alike. By connecting user goals with the Library’s goals as outlined in the Strategic Plan, I can ensure that the homepage redesign is mutually beneficial.

Diagram of user personas and their corresponding user stories.
Diagram showing how user goals and LAPL’s strategic goals connect.
Diagrams showing how LAPL’s existing resources align with three of their six strategic goals.

In order to connect these strategic goals with what resources and services the homepage can connect users to, I conducted a partial content inventory. Keeping in mind how these resources and services align with the goals of the Library and its users alike, I revised how content is organized on the homepage, as well as how different pages are categorized.

Spreadsheet of revised site structure after conducting an initial content audit.

Sketching & Lo-Fi Wireframes

After revising LAPL’s homepage content and structure in spreadsheet form, I used diagramming and sketching to imagine what a more useful homepage content structure would be like in the abstract, for both the desktop and mobile version of the site.

Initial pen and paper sketches for new LAPL homepage.

I used Sketch to translate these pen and paper sketches into the first very rough wireframes of the desktop + mobile versions of the LAPL homepage. By blocking out different page areas, and sequencing them according to what information is a priority to both the Library and their patrons, these wireframes begin to give a sense of the structural changes I am making to the homepage and its content:

Lo-fi wireframes of new homepage.

Information Architecture & Rethinking Visual Style

Before creating higher fidelity wireframes, I wanted to better define the structure and form that the new homepage would take on. To define the structure of the homepage, I mapped out a simplified information architecture, showing what content will be accessible from the homepage:

Simplified information architecture, showing how the new site navigation reorganizes content on the homepage, as well as what resources + service will be featured in the body of the homepage itself.

To define the form of the homepage, I took the opportunity to flex my visual design muscles and create a brand new logo and logotype for LAPL. The new visual style was largely based on the Library’s Strategic Plan publication, as well as the visual language of the mosaics on Central Library’s tower:

(from left to right) An overview of the existing visual style of the LAPL homepage/website; my initial sketches/experiments for a new logo/logotype and overall visual style; the mosaics on Central Library’s tower, on which the new logo is based.

Mid-Fi Wireframes

Building on the initial lo-fi wireframes, the mid-fi wireframes contain high-level content, as well as some experimentation with how the visual style could be applied to the homepage look-and-feel. The modular grid structure is inspired by the Seattle Public Library’s homepage that I analyzed in an earlier research phase.

Mid-fi wireframes, showing variations for both the desktop and mobile versions of the homepage.

Rethinking the Mobile App: LAPL To Go

Functionally speaking, LAPL To Go (the Library’s mobile app for browsing the catalog and checking your library account) does everything that it needs to do. But if the LAPL mobile app is an extension of (and concentration of) the Library’s homepage, then it’s important for me to consider how the web redesign would be reflected in the mobile app experience.

Analysis of the existing LAPL To Go app, showing the user flow for putting an available book on hold for pickup at a library branch of the user’s choice.
Initial sketches + mid-fi wireframes for redesigned LAPL To Go mobile app.

High-Fi Wireframes & Interactive Prototypes

Using ProtoPie, I was able to create interactive prototypes using the high-fidelity wireframes I created in Sketch. Previously, I had only used Keynote (which works but can be tedious and limiting to use) and InVision (which I had used up all of my free projects on), so I tried out a bunch of new prototyping apps. ProtoPie was the one that gave me the flexibility I wanted to make my hi-fi wireframes interactive. Check them out below!

Desktop Homepage Demo ↘︎

Demo of high-fi interactive prototype for the redesigned LAPL homepage (desktop).

Tablet Homepage Demo ↘︎

Demo of high-fi interactive prototype for the redesigned LAPL homepage (tablet).

Mobile Homepage Demo ↘︎

Demo of high-fi interactive prototype for the redesigned LAPL homepage (mobile).

LAPL To Go: Mobile App Demo ↘︎

Demo of high-fi interactive prototype for the redesigned LAPL To Go mobile app.

Next Steps & Conclusions

Now that I’ve redesigned LAPL’s homepage and one dimension of their LAPL To Go mobile app, I feel like I’ve just taken the first step in redesigning their entire digital user experience. The logical next step is to figure out how all of the pages across the LAPL website can be redesigned to harmonize with the homepage, both in structure and form.

After considering what most pages on the existing site look like compared to the homepage redesign, I took a first pass at sketching out what other core pages could look like:

Overview of what most pages look like across the existing LAPL website.
Initial pen and paper sketches showing how existing page types could be re-structured and re-formatted to harmonize with the homepage redesign.

If I were to do this project again, what would I do differently?

Well, where do I begin?! Since I did this project completely on my own, without the support of a budget, a team, or direct access to LAPL users/patrons, I had to make some informed assumptions based on the precedent that LAPL has already set. I worked on the project anywhere from 10–15 hours per week over nine weeks, so I also had to make the most of the time I could give to it.

If I had all of the support and time that an official project with LAPL would make possible, here are a few of the things I would do differently:

  • Expert Interviews & User Research: While I was thankful that I could access LAPL’s 2015–2020 Strategic Plan to anchor my project to the research and insights that they’ve already collected, it was not an ideal method of design research. I would love to work directly with LAPL leadership, interview librarians at different branches, and conduct a more thorough and interactive study of how LAPL users interact with the Library digitally.
  • Card-Sorting & User Testing: Conducting a card-sorting exercise with LAPL leadership, librarians, and LAPL users would have been very useful when mapping out the new information architecture (and probably would have helped me to arrive at a more streamlined navigation scheme). Testing my prototypes with users early on in the process would have also helped me to clarify what content should be featured on the homepage.
  • Content Strategy: I would have liked to work directly with LAPL programming and strategy teams to inform how the website homepage can better showcase the resources, services, and programs that the Library wants to promote.

✨📖✨ Thanks for reading! If you have any questions or feedback, feel free to leave them in the comments or send them to godivareisen@gmail.com.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Godiva Veliganilao Reisenbichler

https://portfolio.godiva.reisen/ Interaction + UX Designer. Alum of Media Design Practices @ Art Center & WashU. Currently @ Aurora Innovation. she/they.

Responses (1)

Very nice read, Daniel. I personally am close to obsessed with user flow diagrams and have made them an essential stage of virtually every project I start working on these days. It’s also great that we got specialized tools out there nowadays that…

--

Really great article from a lay-person‘s perspective. I’ve done poor man versions of flows for years but this succinct approach will really help me moving forward. Thank you.

--

thankyou for the insight!

--