Libby iPad app first run

In this post, I’ll look at the first run and setup experience for Libby, an app that lets people borrow and access digital content from their local library. 


The good bits:

  • Libby allows new users to explore a full range of available content without needing a Libby account or even a library card. All they need to do is pick a local library to see rich, curated content, which makes their first experience with the product immediately more actionable.
  • Setup for various things (like a library card and notifications) is distributed across the experience with multiple entry points, instead of all being demanded up front.
  • A lot of guidance is presented inline on pages instead of as separate (and easily-dismissable) overlays. For example, the setup flow for signing in to a library account is handled entirely in line within the Home tab, borrowing flow, or Settings tab.

To be improved:

  • There are some concepts, like the Shelf, that aren’t clearly introduced. The empty state of the Shelf, in particular, could better indicate what the Shelf is and, instead of telling people to go somewhere else to populate the Shelf tab with content, could instead bring actions for doing that into the empty state itself.
  • Some labels could be improved to be more actionable and less clinical for new users. For example, “Manage notifications” isn’t as clear that it’s about enabling notifications. And “Proceed” is a weird confirmation action label when trying to customize your Home tab.

Starting out in the app

First, the app opens with a minimalist, chat agent-style setup flow. There’s an initial message about what Libby offers, followed by a prompt to respond with whether or not you have a library card already. 

Screenshot of Libby app opening screen with a chat-style agent asking if the new user has a library card.

If you choose that you don’t have a card yet, the chat-style agent then responds with tips about how to sign up for a card, and then directs you down a path to “Find Libraries Nearby.” It’s not clear at this point that you can use the app in some form without a library card (it turns out you can). 

Screenshot of second message in libby setup flow

When choosing “Find Libraries Nearby”, location permission is requested so that Libby can find a nearby library. What’s nice about this is that it asks before popping up the standard system prompt, and also provides an alternative to search for a library manually. 

Screenshot of in-app request to use precise location to find local libraries

Choosing “Yes, Use My Location” pops up the standard system location prompt.

Screenshot of system prompt for location access

Once location access is granted, the app will render some local libraries as dots on a map. The chat agent says “Tap a circle on the map to see details about the branch.” You can tap any dot to see more details and set a library as your default.

Screenshot of Libby app showing a map of various local libraries
Screenshot of map of local libraries with one library selected and the options to set it as "My Library"

Once you navigate through the maps (or a manual search) to choose a local library, the app finally completes this initial setup, and loads the Home tab and main app navigation.

This Home tab shows rich, curated content from the local library, which is impressive considering the number of different libraries that the app probably has to scale to support.  Even though I hadn’t added my library card yet, there’s still an entry point to add a library card near the top of this screen, as indicated by the little inline chat agent message: “Add a library card for [selected library] so you can borrow titles and place holds.” 

Screenshot of Libby home tab showing some curated library content and a reminder to add your library card.

While the home page is richly populated, the initial states of some other tabs leave much to be desired. For example, the empty state of the “Shelf” tab is sparse and uses only a tiny coach mark telling someone to go to another tab and search for books. It doesn’t actually make it clear that the Shelf is where people will look to see books they’ve borrowed. This would have been a much better opportunity to bring the action of searching into the Shelf itself and to be clearer that this is where loans will live. 

Screenshot of the empty state of the Shelf tab

Borrowing a book for the first time

When you go to search for a book, the borrowing flow integrates prompts and reminders that a library card is needed to borrow a book. In this case I searched for a book called Drop Bear. We can see that I have the option to initiate the borrowing flow, even without a library card, but there’s a visual hint that I’ll need the card as indicated by a card icon with a “plus” sign overlapping it.

Screenshot of the detail page for the book "Drop Bear" by Evenlyn Araluen

If I choose “Borrow,” I’m taking to a new page with options for signing in with a card (the app only requires an account in the form of a library card; no centralized Libby account is required) or to get a card. 

Screenshot of the borrowing flow, with a thumbnail of the book I'll borrow and a prompt below it, inline in the page, to get a card or sign in with an existing card

Choosing “I Would Like A Card” sends me to the library’s website for ordering a library card. I’ll spare you that flow; let’s assume that I ordered a library card, received it, and have come back to the app to borrow this book. 

Now that I have a card, I will choose “Sign in with my card.”

Screenshot of borrowing flow where I need to enter my library card number

Once I enter my library card number, a second field for entering my card pin is revealed.

Screenshot of borrowing flow where I'm asked for a library card number, along with a pin

The instructions in this flow do a pretty good job of expanding inline to support the variety of formats a library card might appear in. Presumably there might be different fields that would be exposed for different kinds of cards.

Once you enter your card info and press “sign in,” the card details area refreshes to show that the information is being processed. What’s great about this experience so far is that the user has never had to leave this borrowing flow to go through the various steps of getting set up — every state appears inline on the same page.

Screenshot of the progress state as the borrowing flow signs in using the library card

Eventually, my library card account is confirmed and it appears under the book I want to borrow. The next actions I can take are to edit the card (such as by naming it), or “Next,” which presumably returns me to the borrowing flow. 

Screenshot of the borrowing flow with the library card confirmed

Hitting “Next” updates the page inline and reveals a large “Borrow” button

Screenshot of the borrowing flow for the Drop Bear book with a big "Borrow" action now enabled

Pressing “Borrow” then updates the page with a confirmation state that I have successfully borrowed the book. And here we see another inline prompt as a follow-up: A suggestion to turn on notifications (“Manage notifications,” perhaps not the clearest or most actionable label) in order to be reminded when their loan is due back. 

Screenshot of the borrowing flow for the book Drop Bear with an inline suggestion to turn on notifications
Screenshot of the system prompt for enabling notifications

If notifications are allowed, the page updates inline and now shows a standard set of next steps that someone can take — they can start reading their borrowed book, keep browsing for new books, or “Go To Shelf.” At this point, the Shelf may still be a confusing concept (it’s never formally introduced as the place where borrowed books will live), so this is something that might be confusing to people. 

But also notice that a sheet has appeared at the bottom of the page, inviting you to tweak the way that you’re notified about different things. Swiping up reveals a number of options and details about how notifications can be handled.  This settings screen has a lot of great, embedded guidance, including a snippet at the bottom of the page that shows what the different notifications types are.

Screenshot of Borrow confirmation screen after notifications are enabled. We can see the options to "Open Book," "Keep Browsing," and "Go To Shelf," but also a sheet peeking up from the bottom that invites the user to manage detailed per-notification settings.
Screenshot of expanded sheet of notifications settings
Screenshot of expanded sheet of notifications settings, scrolled to the bottom.

What’s nice about this panel is that it wasn’t created just for this one-time enablement of notifications; it’s simply porting in the same information and options as normally lives in the app’s Settings. 

Screenshot of notification settings that live in app settings

If I return to theHome tab after having added my card to the app during the borrowing flow, we can see that it has updated to show my card. 

You can also start customizing the Home tab at this point. For example, by removing some of the curated content sections the app displays for a given library by default. 

Screenshot of the Home tab with the option of removing a section of content