Libby

Diving into e-readers, e-commerce, and review platforms, I sketched out and created wireframes for Libby’s key screens. This research process involved both a deep study of the app's functionality and a broad heuristic analysis.

When developing sketches into wireframes, I truncated lengthy flows and unified the app’s disparate visual language to create something more cohesive. I was focused on making the book search, book borrowing, and book reading experiences as straightforward as possible.

In addition to making the existing experience clearer, I also wanted to explore adding a social component to Libby by introducing reviews to the book discovery process.

In Libby, connecting the user’s account with a library card is an essential part of onboarding. The existing interaction is lengthy and could be more easily streamlined.

The original screen opens with a question in an attempt to make the process conversational. I felt that this step was unnecessary – either way, you’re being prompted to search for libraries. The new screen simplifies this two-step process, giving the user quicker access to the app and providing a more typical landing page experience.

In the current app , the user was presented with a skeuomorphic picture of a library card after onboarding. While I appreciated the weight of the moment, the information displayed wasn’t too useful to the user, nor did it need to exist as its own discrete screen.

The focus of my redesign was to better display books the user has borrowed, reserved or reviewed. Clear, action-based language is augmented by colored labels that give more visual emphasis to books that are nearly-due or overdue.

The existing app’s discovery experience didn’t do much to drive user discovery. Taking inspiration from apps like Goodreads, Pinterest, and Letterbox, my idea was to emphasize the review aspect of the app and make Libby’s discovery process more social. I divided the Discover screen into three parts – search, reviews, and browse. This content is shown to the user before they enter their search term.

For the search page, I took inspiration from apps like Letterbox, Audible that need multiple layers of filtering and refinement. Some apps use the top level navigation to filter mediums, but I kept it as a way to filter genres to continue the established pattern.

At one point, the two sub-CTAs were connected to the eBook and Audiobook options, but I felt that the desired medium would be a later decision in the app flow. That’s why I went with this simple push up modal featuring simple, conversational copy that guides the user through the interaction.

After successfully borrowing a Book, the user is notified that the book has been added to My Shelf. The user is also given the option to read the book now, bringing them to the reader view, or continuing to browse.

Libby’s old reader felt clunky, had oddly placed key information in multiple type weights, and generally adds complexity to something that should be much simpler. I took notes from e-readers like Kindle and Google Books, boiling down the essential interactions to Libby’s existing functionality.

The Bookmark interaction was a tricky issue to solve — as a binary button, it was a different interaction than the other tabs. The original app has a skeuomorphic element below the top navigation that’s confusingly close to the way one views bookmarked pages. I solved that by moving the Bookmark to the bottom nav by the pages control.

The Notes tab is fairly simple, displaying the user’s highlights and bookmarks. Having two interactions labeled ‘Bookmarks’ was too confusing, and it didn’t communicate that it also shows the user’s highlights.
‍
When designing the Display modal — I changed the name from Font to Display, as Font is a category — the main challenge was balancing the many interactive elements in a way that doesn’t take up too much vertical space. My final result is clearly labeled and visually unified.

I went through multiple layout solutions when designing the My Books landing page. Before, the page visually resembled a gallery. The page wasn’t very functional, nor was it labeled accessibly. This layout allows the user to scan relevant details more easily. I added in the chips from the Library Card page to provide some at-a-glance information.

I went through multiple layout solutions when designing the My Books landing page. Before, the page visually resembled a gallery. The page wasn’t very functional, nor was it labeled accessibly. This new layout allows the user to scan relevant details more easily. I also added in the chip elements from the Library Card page to provide some at-a-glance information for the user.

I had to first decide how these reviews would be filtered. I experimented with putting the filters behind a Filter button, but realized that there was only one kind of filtering going on – I decided to go with the pill filters, as to continue that design pattern.

It was a challenge to display information about the reviewer and the book without that information clashing in the typographic or visual hierarchy. Because of this, I bolded the first paragraph of text and separated the review with a different color background.

I went through seven apps to observe how they treated the review writing screen. Some options (like Amazon) were tightly directed, while others were more open (Letterboxd). Some were on trays, and others navigated users to a dedicated page.

Earlier copy was more direct, but I rethought the it to be more conversational. I decided to keep the review on a single background, as to reinforce the connection between the review and the rating.