Redesign Libropia

Redesign Libropia

Unsolicited redesign of Korean public library app

Unsolicited redesign of Korean public library app

Front-Page

My Role

My Role

UX Research, Interaction Design, Content Strategy

UX Research, Interaction Design,
Content Strategy

Team

Team

One-person project

One-person project

Timeline

Timeline

February ~ April 2020 (3 months)

February ~ April 2020 (3 months)

Problem Statement

Problem Statement

Libropia is a mobile app for Korean public library patrons. Libropia users could not only check out books from any affiliated libraries but also access to digital library services, such as a book purchase request and a drive-thru check out.

However, the majority of users decided not to take advantage of digital services, because of Libropia's complex registration process and user interface.

A librarian has to manually guide the registration process, which takes 15~30 minutes. This inefficiency decreases in a librarian's performance and delays in service. In addition, most users have trouble navigating through Libropia, due to its outdated and inconsistent user interface.

Libropia is a mobile app for Korean public library patrons. Libropia users could not only check out books from any affiliated libraries but also access to digital library services, such as a book purchase request and a drive-thru check out.

However, the majority of users decided not to take advantage of digital services, because of Libropia's complex registration process and user interface.

A librarian has to manually guide the registration process, which takes 15~30 minutes. This inefficiency decreases in a librarian's performance and delays in service. In addition, most users have trouble navigating through Libropia, due to its outdated and inconsistent user interface.

Project Goals

Project Goals

Number_1

Reestablish Libropia's registration process

Reestablish Libropia's registration process

Number_2

Redesign Libropia's information architecture and user interface

Redesign Libropia's information architecture and user interface

Number_3

Reduce Libropia's bounce rate and increase conversions

Project Process

Project Process

Deconstruct Current State User Research Strategic Analysis Define Problems Redesign User Testing

Deconstruct Current State

Deconstruct
Current State

To understand how digital library services are provided, I carefully inspected the current registration process, Libropia's user interface (UI) and information architecture (IA).

To understand how digital library services are provided, I carefully inspected the current registration process, Libropia's user interface (UI) and information architecture (IA).

Current Registration Process

Current Registration Process

Current Registration Process 2

(Click to view fullscreen)

(Click to view fullscreen)

Current UI of Libropia

Current UI of Libropia

(Click here to view fullscreen)

(Click here to view fullscreen)

Current IA of Libropia

Current IA of Libropia

Current Libropia IA

(Click to view fullscreen)

(Click to view fullscreen)

User Research

User Research

To gather insights on how library patrons are using Libropia, I interviewed 20 existing users and observed how they navigate through the app. In addition, I measured how long it takes to issue a digital library card for a new user. 

Based on the user research, I created a persona and a user journey map to put a face on Libropia's target users and visualize various aspects of their behavior and frustration.

To gather insights on how library patrons are using Libropia, I interviewed 20 existing users and observed how they navigate through the app. In addition, I measured how long it takes to issue a digital library card for a new user. 

Based on the user research, I created a persona and a user journey map to put a face on Libropia's target users and visualize various aspects of their behavior and frustration.

User Data

User Data

I looked into user data of Songdo Library of International Organizations and its five branch libraries.

I looked into user data of Songdo Library of International Organizations and its five branch libraries.

Demographics

Demographics

Out of all unique borrowers, 37.1% were in their 40s, and 57.8% were female. The actual gender ratio may different from the data I have, since one family member could use other member's library card to borrow more than check out limit.

According to my experienced colleagues, mothers usually come with their children and check out a bunch of books with their family member's cards. Thus, I decided to set women in their 40s as Libropia's target users.

Out of all unique borrowers, 37.1% were in their 40s, and 57.8% were female. The actual gender ratio may different from the data I have, since one family member could use other member's library card to borrow more than check out limit.

According to my experienced colleagues, mothers usually come with their children and check out a bunch of books with their family member's cards. Thus, I decided to set women in their 40s as Libropia's target users.

Check Out Methods

Check Out Methods

Physical-vs-Digital-Card_2

In addition, the data shows that 72.4% of books were checked out with physical library cards, instead of digital cards in Libropia. There are several reasons behind this figure.

First, librarians neglected to introduce Libropia to new users, since it is too much work for them. Second, new users just walk away without finishing the digital card issuance process, because it takes a too long time. Lastly, users simply prefer the physical card over the digital one, due to Libropia's complex UX/UI. 

In addition, the data shows that 72.4% of books were checked out with physical library cards, instead of digital cards in Libropia. There are several reasons behind this figure.

First, librarians neglected to introduce Libropia to new users, since it is too much work for them. Second, new users just walk away without finishing the digital card issuance process, because it takes a too long time. Lastly, users simply prefer the physical card over the digital one, due to Libropia's complex UX/UI. 

Observation & Interview

Observation & Interview

The research was conducted in Songdo Library of International Organizations and focused on finding why users give up using Libropia.

The research was conducted in Songdo Library of International Organizations and focused on finding why users give up using Libropia.

Registration Process

Registration Process

I measured how long the digital library card issuance takes 10 times. The average time to complete the process was 21 minutes.

This convoluted process annoys users, because of its time-consuming procedure and the number of ID/PW to set up. As a librarian, I have to assist every user to register one by one.

I measured how long the digital library card issuance takes 10 times. The average time to complete the process was 21 minutes.

This convoluted process annoys users, because of its time-consuming procedure and the number of ID/PW to set up. As a librarian, I have to assist every user to register one by one.

Most Used Features

Most Used Features

Most-Used-Features_1

Based on interviews, I found "Digital Library Card", "Search / Reserve", "Added Libraries" and "Check Out Status / Loan Renewal" are the most used features in Libropia.

This means users are only staying in the Home tab, not using features in other tabs. Although Libropia provides a wide range of digital library services, users are only utilizing features related to checking out paper books. 

Based on interviews, I found "Digital Library Card", "Search / Reserve", "Added Libraries" and "Check Out Status / Loan Renewal" are the most used features in Libropia.

This means users are only staying in the Home tab, not using features in other tabs. Although Libropia provides a wide range of digital library services, users are only utilizing features related to checking out paper books.

Persona

Persona

Persona_6

(Click to view fullscreen)

(Click to view fullscreen)

User Journey

User Journey

User-Journey-Map_2

(Click to view fullscreen)

(Click to view fullscreen)

Strategic Analysis

Strategic Analysis

Although Libropia is a public library app, it does not mean Libropia can neglect what the private sector is providing to users. To understand where Libropia is standing and maximizing its strength, I reviewed products and services in the Korean ebook industry.

Although Libropia is a public library app, it does not mean Libropia can neglect what the private sector is providing to users. To understand where Libropia is standing and maximizing its strength, I reviewed products and services in the Korean ebook industry.

Competitive Analysis

Competitive Analysis

(Click here to view fullscreen)

(Click here to view fullscreen)

TOWS Matrix

TOWS Matrix

Derived from a SWOT analysis, a TOWS Matrix is aimed at developing strategic options from an external-internal analysis.

Derived from a SWOT analysis, a TOWS Matrix is aimed at developing strategic options from an external-internal analysis.

TOWS Matrix_1

(Click to view fullscreen)

(Click to view fullscreen)

Define Problems

Define Problems

Based on user research, I identified key problem areas in the overall user experience of digital library services and Libropia's user interface. 

Based on user research, I identified key problem areas in the overall user experience of digital library services and Libropia's user interface. 

Key Problem Areas

Key Problem Areas

Complex Registration Process

Complex Registration Process

To use Libropia, a new user has to create two sets of ID/PW (one for a library website and the other for Libropia), one access code, and one PIN. Due to this extremely complicated procedure, even my librarian colleagues have difficulty in the registration; and therefore, most new users simply give up using digital services.

To use Libropia, a new user has to create two sets of ID/PW (one for a library website and the other for Libropia), one access code, and one PIN. Due to this extremely complicated procedure, even my librarian colleagues have difficulty in the registration; and therefore, most new users simply give up using digital services.

Inconvenient UX/UI of Libropia

Inconvenient UX/UI of Libropia

Besides the registration process, Libropia has other usability problems. The purpose of having such an app is to unburden librarians' repetitive tasks, such as renewing checked out items. However, many users have trouble finding the features they want in the app and end up asking for help.

Besides the registration process, Libropia has other usability problems. The purpose of having such an app is to unburden librarians' repetitive tasks, such as renewing checked out items. However, many users have trouble finding the features they want in the app and end up asking for help.

Not Utilizing User Data

Not Utilizing User Data

In 2019, over 127 million library items were checked out. However, Libropia is not utilizing the enriched user data at all, other than showing the "Most Reviewed Books". As a public service provider, Libropia should recognize user data as a strategic asset and apply it in pursuit of public value.

In 2019, over 127 million library items were checked out. However, Libropia is not utilizing the enriched user data at all, other than showing the "Most Reviewed Books". As a public service provider, Libropia should recognize user data as a strategic asset and apply it in pursuit of public value.

Lack of Contents

Lack of Contents

As of 2019, over 25.6 million people have registered in public libraries. Yet only a fraction of them use Libropia, since it only provides basic check out services. With over 1000 affiliated public libraries, Libropia should provide quality contents that foster a culture of reading.

As of 2019, over 25.6 million people have registered in public libraries. Yet only a fraction of them use Libropia, since it only provides basic check out services. With over 1000 affiliated public libraries, Libropia should provide quality contents that foster a culture of reading.

UX/UI Improvement Opportunities

UX/UI Improvement Opportunities

(Click here to view fullscreen)

(Click here to view fullscreen)

(Since Libropia does not support English, I edited screenshots. Please refer here for the originals.)

(Since Libropia does not support English, I edited screenshots. Please refer here for the originals.)

Redesign

Redesign

On synthesizing the research and analysis, I revised the registration process to improve sign up experience. In addition, I redesigned Libropia's user interface to ameliorate user experience of digital library services.

On synthesizing the research and analysis, I revised the registration process to improve sign up experience. In addition, I redesigned Libropia's user interface to ameliorate user experience of digital library services.

Suggested Registration Process

Suggested Registration Process

Suggested Registration Process

(Click to view fullscreen)

(Click to view fullscreen)

By integrating series of sign up processes, I simplified the registration process. Users only need to remember one set of ID/PW to access both a library website and Libropia. Moreover, users no longer need the access code to add a visited library in Libropia, as they will be automatically added to the list. With this simplifed process, the average time to complete the registration is expected to be reduced to 8 minutes from 21 minutes. 

By integrating series of sign up processes, I simplified the registration process. Users only need to remember one set of ID/PW to access both a library website and Libropia. Moreover, users no longer need the access code to add a visited library in Libropia, as they will be automatically added to the list. With this simplifed process, the average time to complete the registration is expected to be reduced to 8 minutes from 21 minutes. 

Suggested IA of Libropia

Suggested IA of Libropia

Suggested Libropia IA-3

(Click to view fullscreen)

(Click to view fullscreen)

The suggested information architecture increases the visibility of Libropia's key features and improves navigation throughout the app. In the current IA, most of the features are crowded in the Home tab. To improve conversion rates, I grouped and spread them based on their relationships and users' conceptual model.

The suggested information architecture increases the visibility of Libropia's key features and improves navigation throughout the app. In the current IA, most of the features are crowded in the Home tab. To improve conversion rates, I grouped and spread them based on their relationships and users' conceptual model.

Wireframing

Wireframing

Wireframing_2

Style Guide

Style Guide

These fundamental elements make up Libropia's visual design language.

These fundamental elements make up Libropia's visual design language.

(Click here to view fullscreen)

(Click here to view fullscreen)

UX/UI Suggestions

UX/UI Suggestions

Home

For top-level destination, Libropia currently has a "Library", instead of a "Home." The major problem with this design is that there is no way to view a search result and a check out status of all libraries in a single page. Therefore, users are forced to move back and forth between different library pages.

My solution was to create a "Home" tab by integrating a universal search bar and a check out list. I also added personalized recommendations to encourage users to explore different books and increase conversion rate.

For top-level destination, Libropia currently has a "Library", instead of a "Home." The major problem with this design is that there is no way to view a search result and a check out status of all libraries in a single page. Therefore, users are forced to move back and forth between different library pages.

My solution was to create a "Home" tab by integrating a universal search bar and a check out list. I also added personalized recommendations to encourage users to explore different books and increase conversion rate.

Drawer

Through the user interviews, I found the most used feature in Libropia is the "Digital Library Card." As a librarian, I have helped hundreds of puzzled users in front of a circulation desk, because they could not locate the digital card in the app.

To provide a better user flow, I put the digital card into a navigation drawer along with shortcuts to a favorite library page, check out status and currently reading ebook.

Through the user interviews, I found the most used feature in Libropia is the "Digital Library Card." As a librarian, I have helped hundreds of puzzled users in front of a circulation desk, because they could not locate the digital card in the app.

To provide a better user flow, I put the digital card into a navigation drawer along with shortcuts to a favorite library page, check out status and currently reading ebook.

Book Detail Page

Currently, Libropia's book detail page only shows basic information and Call-To-Actions (CTAs) like "Add to Wishlist" and "Online Store" that are irrelevant to borrow or reserve books.

Therefore, I placed a detailed book description and CTAs including "Place Hold", "Borrow Ebook" and "Request a book purchase" in noticable places. I believe this change will have a positive impact on conversion rates.

Currently, Libropia's book detail page only shows basic information and Call-To-Actions (CTAs) like "Add to Wishlist" and "Online Store" that are irrelevant to borrow or reserve books.

Therefore, I placed a detailed book description and CTAs including "Place Hold", "Borrow Ebook" and "Request a book purchase" in noticable places. I believe this change will have a positive impact on conversion rates.

Library

I received a ton of feedback on how confusing and jammed the current "Library" screen is. The current interface contains over 25 buttons in a single screen with a confusing visual hierarchy.

For my redesign, I aimed to reduce the amount of buttons thrown at the user by grouping them into tabs called "About", "Library" and "Shelf." In addition, I modified the display style of featured items from vertical scroll to horizontal carousel for effectively use of space.

I received a ton of feedback on how confusing and jammed the current "Library" screen is. The current interface contains over 25 buttons in a single screen with a confusing visual hierarchy.

For my redesign, I aimed to reduce the amount of buttons thrown at the user by grouping them into tabs called "About", "Library" and "Shelf." In addition, I modified the display style of featured items from vertical scroll to horizontal carousel for effectively use of space.

My Shelf

Although Libropia's "Personal Contents" sounds like a place to view all borrowing items, it only displays borrowing ebooks. Users have to go into individual library pages to check a list of borrowing printed books.

To avoid this confusion, I switched the "Personal Contents" to a "My Shelf" where users could find a list of all borrowing items regardless of the format. I also added "Analysis" tab to promote user engagement by helping them to understand their reading habit and taste.

Although Libropia's "Personal Contents" sounds like a place to view all borrowing items, it only displays borrowing ebooks. Users have to go into individual library pages to check a list of borrowing printed books.

To avoid this confusion, I switched the "Personal Contents" to a "My Shelf" where users could find a list of all borrowing items regardless of the format. I also added "Analysis" tab to promote user engagement by helping them to understand their reading habit and taste.

Account

Libropia currently does not have an "Account" page, scattering related features accross the app. I discovered this design decision makes users struggle to find their account information, such as earilest due date, and often lead them to overdue.

To improve this experience, I created the "Account" page and integrated "Check out status", "Digital library card" and "Account settings." This will allow users to grasp their account status in a single page and reduce friction in user flow.

Libropia currently does not have an "Account" page, scattering related features accross the app. I discovered this design decision makes users struggle to find their account information, such as earilest due date, and often lead them to overdue.

To improve this experience, I created the "Account" page and integrated "Check out status", "Digital library card" and "Account settings." This will allow users to grasp their account status in a single page and reduce friction in user flow.

User Testing

User Testing

To validate my redesign, I asked eight library users to participate my user testing. For a realistic testing environment and unbiased results, I selected users who actually had come to borrow books and asked to perform predefinend tasks in front of a circulation desk.

To validate my redesign, I asked seven library users to participate my user testing. For a realistic testing environment and unbiased results, I selected users who actually had come to borrow books and asked to perform predefinend tasks in front of a circulation desk.

Predefined Tasks

Predefined Tasks

I used Maze, a user testing platform, to record actions of testers.

I used Maze, a user testing platform, to record actions of testers.

  1. Please present your digital library card to a librarian.
  2. Please check all of currently borrowing books.
  3. Please check currently borrowing books from Songdo Library of International Organizations.
  1. Please present your digital library card to a librarian.
  2. Please check all of currently borrowing books.
  3. Please check currently borrowing books from Songdo Library of International Organizations.
  1. Please search a book "The Testaments" by Margaret Atwood.
  2. Please place a hold on "The Testaments" at Haedoji Library.
  3. Please request Songdo Library of International Organizations to purchase "The Testaments."
  1. Please search a book "The Testaments" by Margaret Atwood.
  2. Please place a hold on "The Testaments" at Haedoji Library.
  3. Please request Songdo Library of International Organizations to purchase "The Testaments."

Heat Map Analysis

Heat Map Analysis

I focused to see if testers were able to find CTAs and navigate through the prototype.

I focused to see if testers were able to find CTAs and navigate through the prototype.

Digital-Library-Card

Digital Library Card

Search-Bar

Search Bar

Place-Hold

Place Hold

Request-a-book-purchase

Purchase Request

The heat map proves that most testers were able to find CTAs and successfully complete the tasks. Although some users had been lost due to radical changes on user interface and information architecture compared to those of original design, they ended up finding the buttons and pages there were looking for.

The heat map proves that most testers were able to find CTAs and successfully complete the tasks. Although some users had been lost due to radical changes on user interface and information architecture compared to those of original design, they ended up finding the buttons and pages there were looking for.

Results

Results

Thanks to a detailed usability report of Maze, I was able to pull off actionable insights. 

Thanks to a detailed usability report of Maze, I was able to pull off actionable insights. 

(Click here to view fullscreen)

(Click here to view fullscreen)

According to the usability report, only one tester gave up a task which requires to jump between different library pages. Yet she had only visited one library; thus, she did not have a clear understanding of integrated digital library services. Other than that, my redesign increased the visibility of the most used features in Libropia. Testers were able to accomplish essential tasks related to borrowing printed books from public libraries. I believe this redesign would resolve confusion and unburden librarians' repetitive tasks.

According to the usability report, only one tester gave up a task which requires to jump between different library pages. Yet she had only visited one library; thus, she did not have a clear understanding of integrated digital library services. Other than that, my redesign increased the visibility of the most used features in Libropia. Testers were able to accomplish essential tasks related to borrowing printed books from public libraries. I believe this redesign would resolve confusion and unburden librarians' repetitive tasks.

Learning

Learning

Spend enough time on sketching & wireframing

Spend enough time on sketching & wireframing

I did not spend enough time on sketching and wireframing, because I thought I had a clear idea of what the final redesign would look like. However, while I was creating interfaces and interactions, I constantly interfaced weak points that go against my redesigned information architecture. I had to go back to sketching over and over. I could have saved a lot of time, if I spoted those weak points in earlier stages.

I did not spend enough time on sketching and wireframing, because I thought I had a clear idea of what the final redesign would look like. However, while I was creating interfaces and interactions, I constantly interfaced weak points that go against my redesigned information architecture. I had to go back to sketching over and over. I could have saved a lot of time, if I spoted those weak points in earlier stages.

Don't completely disregard the original solution

Don't completely disregard the original solution

Since main purposes of this unsolicited redesign was to practice my visual craftsmanship and to wear different hats of a product designer, I changed a lot of things from the original design. If this project were an acutal redesign work, I would have respected some of original interactions and design choices to minimize confusions.

Since main purposes of this unsolicited redesign was to practice my visual craftsmanship and to wear different hats of a product designer, I changed a lot of things from the original design. If this project were an acutal redesign work, I would have respected some of original interactions and design choices to minimize confusions.

What's Next?

What's Next?

Redesign ebook reader & audiobook player

Redesign ebook reader & audiobook player

Since I had been more interested in improving experiences of the registration process and the check out process, I did not cover an ebook reader and an audiobook player in this project. If I should advance this project, I would definitely redesign them as well.

Since I had been more interested in improving experiences of the registration process and the check out process, I did not cover an ebook reader and an audiobook player in this project. If I should advance this project, I would definitely redesign them as well.

Explore Augmented Reality (AR)

Explore Augmented Reality (AR)

As I proceed this project, new ideas were popping up. Showing a shelved book location using AR technology is one of them. I believe adopting the technology in Libropia will significantly imporve book searching experience, as many of library users do not know how to read call number.

As I proceed this project, new ideas were popping up. Showing a shelved book location using AR technology is one of them. I believe adopting the technology in Libropia will significantly imporve book searching experience, as many of library users do not know how to read call number.

WOW! Time really does fly when you’re having fun.

AeroSpecConnected Device UX
Shelf OrganizerService Design