Case study: Library app redesign
Introduction
Hello 😄! My name is Fildzah Zata Syauqina Izzati, a product design freelancer and currently selling handicraft products online at byfildzah.com. In the last few months, I have been participating in a UI/UX design boot camp held by Dibimbing.id. This UI/UX case study is the final project of the boot camp.
Overview
iPusnas is an application created by the National Library of the Republic of Indonesia. However, some users have complained about how to use this application related to the interface design. Therefore, I chose this application as a case study for the final project UI/UX design boot camp. This final project aims to identify any usability problems and improve the user interface and user experience on the application to provide a better experience for users.
Role: UI/UX Designer
Scope: User Research, analyzing, user flow, information architecture, wireframing, mock-up, design system, prototyping, and usability testing.
Timeline: 3 weeks
Tools: Figma
The Process
In making products, we need a framework to produce appropriate products. In this study case, I will use a design thinking framework (empathy, define, ideation, prototype, and test).
Empathize
At this stage, we will do 3 main things; Planning the Research; Making Research guidelines, and Conducting the Research. This initial process is the stage to find the problems of the iPusnas App.
Background
Starting from my personal experience, since high school I like to go to the library to borrow a book. While in college, I found a large selection of books in the campus library, some of the collections were books that were difficult to find in bookstores. By borrowing books at the library, it makes it easier for us to find as much information as possible without having to spend a lot of money to buy several books.
Since the COVID-19 pandemic entered Indonesia in early 2020, various activity restrictions have been carried out. Several public places were forced to close to reduce crowds, including the library. The number of activities carried out online has led to an increase in the use of digital applications. iPusnas as the largest online library application in Indonesia has a great opportunity to increase the number of users during the pandemic. However, we need to know in advance the user’s perception of the application and the problems encountered. Therefore, I am interested in redesigning this application as a case study for the final project of the UI/UX design boot camp that I participated in.
Existing App
iPusnas is an application created by the National Library of the Republic of Indonesia. This application can be operated on several hardware devices such as smartphones and computers/laptops. The convenience offered by this application is the borrowed eBook service for free with a duration of three-five days. This application is also equipped with eReader features where users can read the eBook directly in the application without the addition of other applications. iPusnas consists of several ePustaka (ePustaka is a collection of institutions or publishers or persons that have collaborated with iPusnas). To borrow a book from a particular ePustaka, we must register to become a member of the ePustaka.
The National Library of Indonesia (iPusnas) application, which has been downloaded by more than one million users, received a rating of 3.6 (Google play store) and 2.9 (App store). Based on several reviews given by users, this application has many problems including access to information for users and others. Here are some reviews on the google play store:
Planning the Research
Objective
Our objective here is to find out or explore the motivation/habit/pain points/barriers when using the iPusnas App. We try to deep dive into the problem and find out the root cause. This is my research objective:
“Understanding user’s thought about iPusnas App”
Methodology
In this research, I used a qualitative methodology (In-Depth Interview)
Sample Specification
1. iPusnas users who have used the iPusnas application at least once.
2. iPusnas users who last run the application (maximum of 6 months ago)
3. Female/male
4. 20–30 years old
5. National Scale (Nationwide)
Key Information Areas
Key information areas are some of the main subjects that we want to explore in this research. These key information areas will be used as material to be processed in making a list of questions:
1. User Profile
2. General behavior when borrowing a book
3. General behavior when borrowed book through the online library app
4. Behaviour when borrowed book through the iPusnas app
Making Research guideline
After compiling the research plan, I made a research guideline for conducting In-Depth Interviews (IDI). This guide contains introductions, explanations for users regarding the interviews to be conducted, a list of questions based on key information areas and closings.
Conducting the Research
At this stage, I explore information about the user’s thoughts in using the iPusnas application. In this pandemic situation, the research process is carried out online using zoom.
Define
Competitive Analysis
Competitive analysis is useful to understand market trends, identify your competitors and evaluate opportunities. Competitive analysis in this research was carried out on 3 similar applications, namely Gramedia Digital, Gramedia, and Google Play Books.
Affinity Diagram
After doing the IDI, the insights obtained from these results are represented using an affinity diagram. Using an affinity diagram technique can help us discover embedded patterns of thinking by sorting and clustering language-based information into relationships.
To make it easier to find out the pain points experienced by the user, the problems are grouped in the following affinity diagram below:
User Persona
A user persona is a fictional character that represents the target user of the product. User personas help us to focus on identifying and solving problems experienced by users.
Customer Journey Map
A customer journey map is a popular UX method that allows discovering a lot of insights about users. We can reveal more details such as the user’s emotional transformation, pain points, and UX opportunities. Based on the results of the analysis, the user has many pain points in the process of choosing a book.
Problems
Based on the results of the analysis using affinity diagrams and customer journey maps, it was found 5 main problems faced by users. The book stock problem is ranked second, but it is ignored in this case study because it is a technical problem. Therefore, four main problems were taken as follows:
1. Users do not get book recommendations on the home page
“Buku yang muncul di home tuh kayak dari antah berantah…”
When they want to search for a book, some users already know what book they are looking for. However, the book you are looking for does not exist or is not ready to be loaned. Some other users have not decided what book to borrow when opening the application. Therefore, book recommendations are much needed for users, especially on the home page. The books that appear on the homepage are currently too diverse, not attractive, and not to the liking of the user. Users need book recommendations that match their preferences, popular books, or new releases books to get interesting book references.
2. Users don’t understand what ePustaka is
“ini maksudnya apasih? apa buku tentang biografi mereka gitu ya?”
iPusnas consists of several ePustaka. ePustaka is a collection of institutions or publishers or persons that have collaborated with iPusnas. To borrow a book in a particular ePustaka, the user must be a member of that ePustaka (just register once). The display on the ePustaka tab which presents many Indonesian state officials makes users confused. Users do not understand what ePustaka is and are confused when it comes to entering a password (to register as an ePustaka member for the first time). Therefore, it is necessary to have information about what ePustaka is and why users must enter a password when registering for ePustaka.
3. Users forget which books they want to borrow
“Suka lupa mau pinjem buku apa sebelumnya…”
In the process of borrowing books, users often run out of books or have to queue for a long time to borrow a book. So, users often forget about what books are interesting. Because the user does not have a record of this. Therefore, it is necessary to have a feature to help the user in managing the collection of books he wants to read someday.
4. The appearance of the application is not modern
“Tampilannya ngebosenin, kayak aplikasi jadul..…”
The iPusnas application is considered not modern and unattractive and for the main users. The choice of the type of book on the home page (generally an unpopular book or published more than 5 years ago) also greatly influences this assessment. In addition, the visual hierarchy that is not applied also makes this application look like an old application for users.
Limitation
- The design of the mockup and prototype is limited to the activities of choosing books, borrowing books (available books), and returning books.
- The UT process is carried out on activities to find books, use the wishlist feature and borrow books through the popular book recommendation feature.
Ideate
User Flow
User flow is used to describe the overall flow of users in using the product. The following is the user flow of the activities selecting books, borrowing books, and returning books:
Information Architecture
Information Architecture is a method used to arrange all flow, content, and design requirements in an application. The IA in this application, especially in the activities of borrowing books (choosing, borrowing, and returning books) are as follows:
Wireframe
Before making a mockup, I made a wireframe first to get an idea of the basic outline of the design that I would be working on. The following is a wireframe of the redesign of the iPusnas application:
Mockup
Mock-up is a high-level representation of a product design. At this stage, we create a combination of styles, typography, colors, and others. After going through several stages of research and ideation, here is a mockup design for the redesign of the iPusnas application:
To find out what improvements I made, I outlined the bullet points for each problem and compared the old design with the new design. The following is an explanation of the redesign of the iPusnas application that has been carried out in answering the four main problems in this research:
In addition to answering the four main problems, I also redesigned several items such as navigation bars, book detail pages, book information, book reviews, book return buttons, book category pages, and filter features. This change was also made based on insights from IDI (but not the main problem).
Design System
The next stage is to make a design system. The color selection in the application is based on the iPusnas logo (blue and green). While the use of illustrations, taken from drawkit.io. This illustration is licensed free for personal and commercial use. Making this design system will help us and the team in the future in developing existing designs.
Prototype
After the empathize, define, and ideate stages have been carried out, I create a Figma prototype. This prototype contains 30 screens which include activities to choose books, borrow books and return books. created using Figma.
To see the prototype of the Redesign iPusnas app, you can try it here:
Test
Usability Testing (UT)
The last step is usability testing. UT is useful for testing whether the new design that we create can help users complete their tasks. Like the IDI process, the UT process was carried out online using zoom media during the pandemic. Participants share their screens when using the prototype we created.
This UT was conducted to evaluate new designs on activities to find books, use the wishlist feature and borrow books through popular book recommendations.
You can see a more complete usability testing report here:
Task given
I asked the user to perform the following tasks. I do this by giving them scenarios, such as “Imagine that you are going to borrow a popular book on the iPusnas application. What would you do in the app to find the book.”
- Find books from the popular book recommendation feature
- Adding a book to the wishlist
- Borrow a book from the popular book recommendation feature
Summary insight
Based on the results of UT, all users managed to complete the first and second tasks well. While on the third task, the majority of users managed to complete it successfully. However, there are users who cannot solve it because of an internet connection error so that some buttons do not appear on the screen.
There are several problems or confusion experienced by users during the UT process, both in terms of design and language use options in the application. Solutions to problems found in the UT process can be seen in the design recommendations attached below.
After asking several questions and asking users to perform tasks based on scenarios in the UT process, all users agreed that the new design is better and looks more modern than the current iPusnas design. This is because the use of fonts, the layout that is easy to understand by the user, the selection of books displayed, and the visual hierarchy make the whole interface look more modern and attractive.
Design Recommendation
After doing the UT process, I made design improvements based on the recommendations for each task.
Appendix
http://dip.fisip.unair.ac.id/en_US/mengenal-lebih-jauh-mengenai-aplikasi-ipusnas/
https://www.ifla.org/node/93040
https://www.tandfonline.com/doi/abs/10.1080/19322909.2021.1913465
https://uxhints.com/ux-research/customer-journey-map-template/
Lesson Learned
During this research process, I learned a lot from users. It turns out that what I have in mind, is not necessarily something the user needs.
You are not your user
While working on it, I learned that doing a UI/UX case study is not easy. The process of working on this final project will be a lesson for me in the future. Of course, there is still a lot to improve on this design, please feel free to leave feedback or suggestions. You can also visit the linked in and Behance links below :)
