Designing Clean and Simple Library App — Library App UI/UX Case Study
I did a challenge where is designed an app within 5 days of the deadline. The app would be a library app that will help the users to do their library activities.
Overview
This study case is part of a challenge and it runs for 5 days. The challenge is to design a library app that has these features:
- Search for books
- Reserve books
- Receive notifications when the books are ready for pickup
- Sharing a Tip
- Participating in Discussion
Challenge
Some of the challenges that I faced during the process are:
- The time to finish the study case is only 5 days long
- I’ve never been into a library membership and don’t know much about how some activities are being done in the library
- There are no decent apps that serve the same function and goal in my country and I never use such an app
Design Process
I’m using the Design Thinking method since this method is perfect for any user-centric project. Due to time limitations, I won’t do the testing phase.
Empathize
Before jumping into the persona, I need to do some research first to make sure I found some real and organic problems that might be useful for me since I don’t know enough things about library apps and what are users’ expectations while using the app. During this phase, I’m trying to find out what is the user’s problem whenever they want to deal with the library. Since the time is limited and there is not many similar and relevant app available in my country, I decided to do some online research. I chose to find a similar app on google play and look out for some findings and insight that I might find there. Turns out there are not many library apps that serve the same purpose as the app in the challenge. So I’m trying to find information as much as possible from the app that I thought is relevant enough to the challenge by scrolling through the review section of the apps to find the user's frustration.
After doing some research on the app, I found some problems and insights that might be useful for the persona that I will build. Those findings are :
- Users need an app that simplifies the process of doing some tasks (Searching for books, reserving books, returning books, borrowing books, holding books)
- The information on the books needs to be clear and straightforward for users to scan through it in the list
- Users need a clear list of collections and an easy way to navigate some recommendations in alphabetical order
- Books need to be put under a tag so they able to search books by tags
- Users need a place where they are able to see their borrowed books and keep track of the loan duration
- Users need to be notified whenever the book that they put on hold becomes available to borrow
- The app needs to be easy to navigate and lag-free.
- Logging in using a username since users don’t remember their library card ID number
Define
Using the information that I gather already, I’m able to define some users’ problems and tackle some of them.
First, I defined the persona. This persona will be the main focus of this app. The persona is defined based on some research and assumptions.
Then, I defined the How Might We. This will help me to ideate some of the features that I will build in the app.
Ideate
Now moving on to the ideate phase. By using some information that I’ve defined in the previous phases, I will ideate some of the solutions which I will deliver later in the app.
First, I define the information that will be included across the app. I’m using information architecture to help me define the information and where it should be placed.
Then, I defined the user flow. This diagram shows how the app will be used. To make it easier to read, I’ll split the user flow by each of the main menus
Then I will define the look and feel of the app. I did this because I want this app will give users a feel of the app and make their experience as immersive as possible. So, I made a mood board that consists of photos that I took from the internet. This mood board will help me to define how this app should look for the users.
Based on the mood board, I’ve defined some of the look and feel that will be used in this app.
Color
The main color that I’ll use in the app will be brown. After some ideation process, here’s what color I chose
Typography
Since the app is about the library, I’ll use two types of typeface which are serif and sans serif. The serif will be used as the header or title while the sans serif will be used as the body. I do this because I want this app looks modern while also still aligning with the library feel.
After some ideation process, I chose DM Serif and DM Sans as the typefaces that I’ll use. The reason I chose the fonts are that the look is similar and complements each other since they come from the same family.
Feel
What comes first whenever we hear the library? Well, it must be a place where everyone keeps quiet, polite, and proper. The library is also a place where thousands of information and literature are stored, so the place needs to be neat and organized to keep the place clean and tidy.
So, the app will be simple and clean. The information in the app also needs to be organized as well by simplifying all the information, scrapping off information that’s not relevant to the app, and putting them in the right place. All of the information in this app will be aligned left since it’s how the books are written and read.
Prototype
In this phase, I will define the prototype of the product which will be the final results of this test.
First, I defined some of the guidelines that will be used in the prototype process. I’m starting with defined numbers that will be used in the project. I did this because I want to achieve a consistent design in every point and pixel. Here are the numbers that I used in this project
Then I defined the colors. Some of the colors are already defined in the previous phase, so I need to expand the color palette to accommodate some of the cases in the app.
As the last step of defining guidelines, I defined the typography by using the typeface that I chose in the previous phase before. Since I’m using two different types of typefaces, I decided to use the serif typeface for the header and subheader and the sans serif as the body.
Move on to the wireframe. To get the idea of the app as soon as possible, I drew the wireframe on paper. Here are some of the scratches that I did
Then I defined the spacing and margin of each screen. Here are the results
Finally, I made a mockup of each screen of the app. Here are the results
Then I’m connecting the mockups to make a prototype, you can try the prototype here
Closing
Explanation
There are some decisions that I've made during the design process, here are some decisions that I've made and why I made that decision:
- Consistent spacing makes the grouping clear
By making the spacing consistent, I’m able to tell the users which component belongs to which group. This is how Law of Proximity is applied to my designs - Make the users not confused by decreasing the options
Options are confusing, especially if you have a lot of them at the same time. So, limiting the option that users face will help users to make their choice faster and easier. This is how I applied Hick’s Law to my design - Focus on one task at a screen
One of the methods that I use to make the design easy to access is to make the screen only serve one purpose. I did this to almost every single screen that I designed. I don’t want the users to get overwhelmed by using the app that I designed so making it simpler by limiting the purpose of each screen will help the users to use the app I designed - Make the button easy to access
Fitt’s Law states that “The time to acquire a target is a function of the distance to and size of the target”. That’s why I made all of the buttons as near as possible to the user's thumb so they easily did the task or action. This is how I applied Fitt’s Law to my design - Using the same components helps users learnability
I design components as closely and similarly as possible to others to make the users easy to learn my app while also keeping consistency inside the app. By using a similar component, users tend to remember some of the components easily and would feel familiar with another component
Conclusion
Let’s take a look back at the persona. Is my design help my persona? Let’s compare their frustration and the solutions I’ve designed
- The books he wants to borrow are usually borrowed by another library member
To overcome this point, I put information about book availability on the book detail screen. This will help him to see if the book is available or not - Needs some recommendations of similar books if the book he looking for is borrowed by another library member
I’ve put some recommendations based on the user’s interest in the home screen. The reason I put it on the home screen is simply because the home screen is the first screen the users will see and scroll. So putting some recommendations on it will keep the users scrolling the app since it’ll catch their attention - Needs to go to the library just to check if the library has the title that he wants to read or borrow
Well, this user needs a search feature and I already made it for them. The search feature also comes with a category, author, or tag section which will also help them to find what to read next. It also comes in an alphabet section so users will easily find a book they want - Lost track and forget the day to return the book he borrows
Don’t worry, I put the loaned book information at the top of the home screen to make sure the users remember the book they borrowed.
Reflection
After doing the challenge, I found that I need to design some success or error screens to let users know that their tasks are done or failed. Also, my wireframe is messy, so I need to learn more about wireframing so I can do a better wireframe in the future.
