#digital transformation #accessiblity

Redesign of the city library app

with onboarding to increase customer conversion

About our city library

The city library – called “Bücherhallen” is one of my favorite places in Hamburg. There are 32 libraries all over the city. Library customers and visitors enjoy over 1,7 million items in more than 30 languages and 13,000 events per year. According to the library’s report, with 4,8 million visitors per year, it is one of the popular institutions in Hamburg. 

DISCLAIM

The city library (Bücherhallen Hamburg) does NOT ask me to redesign their mobile app. This is a personal and study project from my UX Bootcamp by Designlab. 

Project goals

UX Research
UX Design
Visual Design
Usability test
TIMELINE

September 2021 (4 weeks)

TOOLS

Figma, Whimsical, Useberry, Slack, Google Doc, Google Sheet, Adobe CS, Zoom, Google meet

This is a fictitious project at UX Academy from Designlab.

Why redesign the city library app?

Currently, the website is the primary tool for library customers to search and manage their accounts. The responsive website works well on mobile devices and provides a full range of library services. But, to perform the task, users have to log in with their library card number every time, which is something people don’t remember.

There is a mobile app but unfortunately not fully functional. Quite a few primary features like view the availability or place a hold often don’t work. So, what happens when users would like to place a hold or renew a loan while waiting to pick up their children at school?

Statistic shows, about 68% of global users of all website visits in 2020 came from mobile devices. Additionally, the pandemic shows it clear, we need to have digital solutions for traditional in-person or physical only services and experiences. 

Consider the current situation with COVID, the digital transformation of many traditional services is more urgent than ever before. So, why not redesign the city library app to make the services more accessible and fluent between the digital and physical world?

The process

Discover

Learn about library & their services

In the research, I want to learn more about people’s experience with libraries in general and how the current experience with the website and app looks like for the city library customers. It is also important to find out what essential features to include for a seamless and easy experience for users to enjoy the full range of library services.

Research objectives

Understand the library landscape and competitors

The research showed, libraries worldwide mainly use third-party services for providing mobile apps. This is why almost all library apps in one country have the same standardized design/look. And the feature for download ebooks and audiobooks to read/listen to is never included. Users have to use a third-party app like Libby to access the books.

Consider these realities, I decide to focus on how to transform the primary library services into digital but not the reading part.

Find out the customers' experiences and needs

Because of the short time window, I was only able to talk to one single city library customer. But it was great to learn her experience with a kindle similar mobile device that combines bookstores and the city library ebook platform in one.

Additionally, the survey with 15 responses gives me a good overview of people’s experiences with their libraries in general, and what features they would like to have for a library mobile app.

Research Key Takeaways

About Libraries

60% of the survey participant mentioned that their library doesn’t have a mobile app.

Mobile apps of libraries usually don’t provide features for download and read books.

85% of libraries work with companies specialized in digitalizing library services. These companies provide standardized user interfaces and features that make these mobile apps from different libraries look the same.

User Behavior

Over 50% of participants love physical books more than digital- and audiobooks.

About 30% of participants love exploring books in the library more than searching online

About 50% participants use the app/website of the library to search books and manage loans

Users use often a third-party app or device to borrow and read digital books from the library.

Desired Features

15/16 participants want to search, make a hold, and manage loans with the mobile app.

12/16 Participants would like to download, read, or listening books

9/16 participants would like to view current and upcoming events in the library. 6 from 9 would like to make a reservation.

8/16 participants would like to book a study room in the app

Pain Points

Users are missing exploring books and reading in the library because of the pandemic.

Libraries often don’t have a mobile app.

Use the library website on the mobile phone is not convenient

Because of the pandemic, libraries need provide a better online services to make it easy for visitors and users.

Define

Focus based on the research finding

Who will benefit the most?

The persona presents one of the main library customer groups: parents with children. They are very active in using library services, spending time in the library with the kids, enjoy events together. And they are most likely using a mobile phone to manage everything because of the lack of time to sit and use a desktop computer.

What the new app can do & what to focus on first?

The user flow shows the full scope of features for the new city library app. Just like the current library mobile app, it includes all primary library services that customers can perform on the website are all included in mobile app: search, favorite list, place a hold, manage accounts. Additionally, customers can view events and make a reservation.

Define task flows for the usability test
Consider the current city library app is not working well and is quite familiar for most library customers, onboarding is necessary for the first launch of the new app. Therefore it is a primary task for the usability test.

Ideate

Hi-Fi Sketches to explore different possibilities​

In the sketches, I mainly focused on the onboarding and home screen. The onboarding sketches were about to explore different visual styles first. The content was decided later during the wireframing and prototyping. The home screen is the central place of user interactions. Therefore, I first focused on exploring different variations of the home screen. Other screens for place the hold and event spot reservation will follow the style of the home screen.

Have basic UI kits for Hi-Fi wireframing

The UI kits are based on the city library’s brand style but with minimal Glassmorphism effects. The goal is to have a modern look and mimic the real world so that library customers will have a familiar feeling when engaging with the app.

Prototype

How users will go through onboaring and explore the new library app?

The prototype shows the user journey from onboarding for first-time opening to explore the features. The onboarding focus on feature introduction. Users have the opportunity to go back and forth or skip anytime. Related to the current situation, users have access to every screen to learn about COVID restrictions information.

Hi-Fi wireframing key screens

Test & Revision

Test methodology

• Remote user test via zoom call and recording (3 participants)
• Useberry usablity test (10 participants)

Test objectives

Test finding & priority revision

The usability test showed that the “place a hold” was the single big pain point. 7/9 Useberry participants and 2/3 remote testers experienced some level of frustration or difficulties with the “place a hold” task. The most mentioned reason was the placement of the button. It was too far away from the book. 2/3 remote testers mentioned two onboarding screens have more information than others.

Conclusion & next steps

The four weeks design process went well. I was able to find the balance between UX and visual design. Overall, the onboarding catches users’ attention, and the home screen provides expected and engaging content to keep users scroll and click. Users also could easily perform the task. The issue with the placement of the “place a hold” button was easy to improve.

The predominant positive feedback from the usability test about features related to the current COVID situation shows the necessity of building a digital bridge between customers and traditional institutions (like a library) to improve the quality of services.

Next steps

Week 5/6 – user profile & accounts management (the green part in the user flow)
Week 6/7 – Favorite list & location

What I've learned

The storytelling of onboarding

Since users usually skip the onboarding, it is crucial to keep the onboarding process interesting (visually & content-related). As well as provide multiple ways for users to engage (click, swipe, back & forth) also let users feel free in their interaction with the app.

Use visuals to support user experience

For this project, visual design is as important as the information hierarchy in creating a good user experience. Library services like place a hold, renew the loan or manage loans and accounts, are complex in information architecture. Visuals are extremely helpful in this case to provide a clear hierarchy for users to follow.