UI/UX Case Study: iPusnas (Digital Library App) Redesign
Overview
iPusnas digital library, provided by the National Library, offers convenient access to high-quality eBooks through a user-friendly eReader. The application is compatible with Android and iOS platforms, enabling users to read anytime and anywhere.
iPusnas aims to address the needs of Indonesian society seeking to improve their education and personal development. Providing easy access to quality library materials aims to foster a greater interest in reading and broaden knowledge among people from all walks of life in Indonesia. iPusnas also serve as an effective platform for users to search for reference materials or explore renowned literary works that may be challenging to find in traditional libraries.
Within the iPusnas platform, users can discover a diverse range of book collections, including fiction and non-fiction, textbooks, and magazines. These users can freely download all iPusnas collections through the Play Store or App Store.
While the iPusnas app already offers valuable features, there is room for improvement to ensure optimal user experience. These enhancements primarily focus on refining the UI/UX design to make it more intuitive and user-friendly.
Goals
The purpose of redesigning the iPusnas application for the Android version is to enhance the quality and user experience of accessing the digital library. Additionally, through the redesign process, it is expected to provide a more modern, fresh, and appealing interface to increase user interest in using the application. Based on the results of the UI/UX audit I conducted, several areas for improvement were identified in the application, including an unfamiliar icon, uncomfortable navigation bar placement, an iterative process, and the lack of implementation of UI/UX Laws.
Challenge
Based on the tests I conducted with the participants, some findings need to be addressed. It was found that there are repetitive flows and the navigation bar is less informative and unfamiliar to users. Additionally, users expressed that more effort is needed to understand the application and the positioning of the navigation bar doesn’t feel natural. Discomfort also arises when users try to bookmark pages, while the overall appearance of the application appears untidy. Lastly, users encountered difficulties in providing comments, giving ratings, and sharing the books they are currently reading.
My Role
As a UI/UX designer, there are several tasks that I perform:
- Researching users and understanding their needs for the iPusnas application, both in terms of functionality and interface design.
- Identifying existing issues in the iPusnas application and making recommendations for improvement.
- Creating user flows, wireframes, and a UI style guide.
- Developing interactive prototypes to demonstrate how the iPusnas application can be used and provide a better user experience.
- Conducting testing on the design and prototypes to ensure that the redesigned iPusnas application meets user needs.
Design Thinking
In the process of redesigning the iPusnas app, I adopted the design thinking method as a design approach to help me understand user needs and generate solutions to user problems.
A. Empathize
The empathy stage is the initial phase in design thinking that focuses on gaining a deep understanding of user needs and challenges. Through observation and interviews, we can gather valuable insights and perspectives from users regarding their experience using the application. This stage allows us to develop empathy for users and uncover valuable information that will inform the design process and help create solutions that truly address their needs.
Before conducting the interviews, I ran a UI/UX audit of the iPusnas application, and the results are as follows:
- Repetitive steps in the app: When a user who has not logged in tries to borrow a book with a specific title (when they are already on the book borrowing screen), they will be redirected to the login page. However, after the user logs in, they will be taken back to the home screen and will have to enter the book title again in the search bar.
- Uncomfortable navigation bar placement: The navigation bar in iPusnas is located at the top of the screen. The placement of the navigation bar in the app is not user-friendly, causing discomfort in using the app. The thumb zone considers the ergonomics of users operating their devices with their hands. Areas that are more easily accessible by the thumb are considered the most ideal for placing interactive elements such as buttons or menus. In user interface design, considering the thumb zone is important to ensure that important interactive elements are placed in areas easily reachable by the thumb. This helps improve user comfort and efficiency when using the application with one hand.
- The lack of implementation of Jakob’s Law in this application is evident in the use of unfamiliar icons and the unconventional placement of the navigation bar. This indicates that the app does not adhere to Jakob’s Law, which states that users tend to feel more comfortable with familiar interfaces. Therefore, it is important to follow design conventions commonly used by users to create a sense of familiarity and comfort when using the application.
The outcomes of the interviews I carried out with the participants closely mirrored the results obtained during the initial UI/UX audit, substantiating the identified shortcomings and reinforcing the need for redesigning certain aspects of the iPusnas app. The key findings from the interviews are as follows:
- There is a recurring flow that confuses users and leads to repetitive steps in the application.
- The navigation bar lacks informative labels, making it difficult for users to understand its functionality.
- The navigation bar’s layout is unfamiliar to users, causing confusion and making it harder to navigate.
- Users find it challenging to understand the application and require extra effort to familiarize themselves with its features.
- The placement of the navigation bar feels unnatural and hampers the overall user experience.
- Users encounter difficulties when trying to bookmark pages in books.
- The overall appearance of the application lacks organization and a neat presentation.
- Users face challenges when trying to leave comments, provide ratings, and share books they are reading.
These findings provide valuable insights for the redesign process of the iPusnas application. By addressing these issues, the goal is to improve the user experience and make the application more intuitive and user-friendly.
B. Define
In the Define stage of the design thinking process, a deeper analysis will be conducted on the data obtained from the Empathy stage. The goal is to determine the problem focus that needs to be addressed in the application development, taking into consideration the needs and desires of the users, and ensuring that the chosen problem will provide significant benefits for the users.
1. User Persona :
After that, I created user personas based on the collected research data. These user personas provide a comprehensive overview of the users’ identities, behaviors, goals, and pain points in using the app.
2. User Journey
Through user journey mapping, I can visualize the overall user experience, from the start to the end, in order to identify key moments, challenges, and opportunities that can improve the user experience.
C. Ideate
The Ideate step in design thinking involves the brainstorming process to develop creative ideas for solving previously identified problems. In this stage, I created user flows, sitemaps, and wireframes based on the user stories as follows
1. Flowchart
I created a flowchart to visually represent the sequential steps and decision points in the process. The flowchart illustrates the logical flow of actions and interactions between different system components, providing a clear and structured overview of how the process works.
2. Information Architecture
To ensure the effective organization of content and information for users, I implemented the noun + verb method. This approach involves using nouns to represent the elements presented to users and verbs to indicate the actions they can perform. By adopting this method, the interface becomes more intuitive and user-friendly. Users can easily understand what is being presented to them and quickly grasp the available actions they can take. This approach facilitates a seamless user experience by aligning the interface elements with user expectations. Overall, the noun + verb method enhances usability and enables users to interact with the application more efficiently.
3. Wireframe
I created an intuitive and easily understandable interface. The navigation bar is strategically placed, with a clean layout and easily accessible buttons and features. This allows users to effortlessly bookmark pages, provide comments, rate content, and share it with others. These wireframes serve as the foundation for the improved development of the iPusnas app.
D. Prototyping
In the prototyping phase, I went through three steps: lo-fi, style guide, and hi-fi. The lo-fi prototype was an initial, simplified version used to explore design concepts. The style guide was performed as a design guideline to maintain visual consistency. The hi-fi prototype was a detailed and interactive version that provided a realistic user experience.
1. Low-Fidelity
After completing the rough sketch phase, I proceeded to the stage of creating low-fidelity designs. In this phase, I designed the user interface (UI) with more details and obtained a clear visual representation of the desired look. The goal was to create a simple yet informative interface, allowing users to understand and interact with the application’s functions easily. This process involved choosing the layout, positioning elements, and selecting appropriate UI components to ensure an optimal user experience.
2. UI Style Guide
In the process of redesigning this application, I used a style guide as a design reference to ensure consistency. The style guide played a crucial role in improving the visual appearance and design style of the application, making it consistent, professional, and demanding to users. With a well-integrated style guide, I could ensure that every design element, including color choices, typography, icons, and layout, remained consistent throughout the app. This helped create a harmonious user experience and aligned the overall aesthetics of the app.
3. High-Fidelity
After going through several stages such as understanding user needs, problem identification, idea generation, and creating low-fidelity designs along with a style guide, I proceeded to develop high-fidelity designs as follows :
4. Prototyping
A prototype is a simulation of the final design of a product that is designed to provide an interactive experience for users. In this project, I used Figma as a tool to create a prototype that represents the visual appearance and functionality of the application. Users can explore various features and menus, and perform actions such as clicking buttons, inputting data, and observing the changes happening on the screen. With this prototype, I can test and validate the design concepts that have been created. Please click the link below to try the prototype :
E. Usability Testing
After creating the prototype, I conducted usability testing with 3 participants. These participants had prior experience using iPusnas and provided reviews of iPusnas before the redesign. The purpose of this usability testing was to validate the design I had created and assess if it addressed the users’ needs. In the usability test, I provided several tasks with realistic scenarios and accompanied them with follow-up questions. The tasks given were as follows:
- Login
- Find a book
- Like
- Borrow a book
- Check the book in the “Read” and “Favorite” menu
- Add a bookmark
- Leave comments and ratings
- Share a book
The follow-up questions were as follows:
- How was your experience using this redesigned app?
- What did you like about this redesigned version of the app?
- What did you dislike about this redesigned version of the app?
- How does the layout of this app compare to the previous version?
- How pleased did you feel using this app compared to the old version?
- Would you recommend this redesigned version of the app to others?
Result
The results of the usability test indicate that the majority of the tasks I assigned to the 3 participants were completed easily. Out of the 8 tasks given to the participants, 6 of them were completed without any obstacles and quickly, while the other 2 tasks took a considerable amount of time, and some participants were unable to complete them at all. The two tasks that posed difficulties were “Task 2: Find a book” and “Task 5: Check the book in the ‘Read’ and ‘Favorite’ menus.”
Following the test, the next step was to conduct interviews and ask the prepared follow-up questions. Based on the feedback from the three participants, the following conclusions can be drawn:
- According to the participants, the redesigned version is considered user-friendly.
- The app has a clean layout, a modern appearance, and well-chosen colors, and it is not boring.
- The icons used in the app are familiar, ensuring that participants do not feel confused when using them.
- The placement of the menu bar is easily accessible, making it convenient for participants.
- Participants expressed their intention to recommend the redesigned app to others.
- However, one aspect that the participants didn’t like is the absence of a navigation bar on the book borrowing screen.
Based on the testing results, there are several changes that I made:
1. Replace the “enter” icon with the “search” icon on the keyboard.
2. Add a navigation bar on the borrowing screen.
Conclusion
The app redesign I have implemented has effectively addressed the problems and frustrations encountered by users when using iPusnas, as demonstrated by the results of the Usability Test conducted with 3 participants. Through careful analysis of user feedback and insights gained from the testing process, significant improvements have been made to enhance the overall user experience. The redesigned iPusnas app now offers a more intuitive and efficient interface, allowing users to navigate the digital library easily.
