Zine is a mobile app search tool that finds the availability of book formats across multiple platforms. It streamlines the search experience and allows users to keep track of their progress all in one place.
Role: UX/UI Designer Project Type: Individual Duration: 3 weeks
Readers often spend a long time waiting to borrow a digital book from the public library. The average wait time is 2-3 months, depending on the popularity of the book and the number of copies that the library carries.
How might we help readers provide available options of popular books with a long waiting list?
My solution was an all-in-one search app that optimizes the search experience by centralizing popular resources that allows users to keep track of their spot and favorite titles that they are interested. By having all the resources in one place, this app would save readers’ time and provide the necessary resources to help compare and evaluate other existing options.
01. Understanding the users
To learn and understand more about the readers, I embarked on a research journey to find out:
What made readers decide to use the library?
Do readers have a workaround when there is a long waiting list?
Are readers open to other formats?
How do readers decide which format to use?
Looking at existing survey data
From Pew Research Center survey results, readers were asked if they noticed the library's waiting list and if they prefer digital or printed format. Half of the people who borrow from the library noticed the waiting list. There is a possibility that it depends on popularity of book and the number of copies available. Most readers have no preference between digital and printed format, which shows they are either flexible or selects whichever format is the most convenient.
Learning from interviews
Next, I looked at articles and read interviews to find out readers' experiences borrowing from the virtual public library. From the insights, readers were frustrated with the experience and shared common pain points:
1. Frustrated with using with library websites’ search and browsing capabilities
2. Check out process involves multiple steps
2. Readers find workarounds in bypassing the long waiting lines by researching other options
“E-books have been mostly very good as an experience. The downside is that wait times for titles are often quite long, because people will troll the catalogues and put everything on hold.”
- E-book Reader
(Source: Washington Post)
Exploring the online forum
Understanding readers' attitudes is important to find how they decide and perceive towards the their given options. From the online forum, I gather feedback on readers' attitude towards resources, devices, and decision making. Many readers shared similar perception towards the convenience of e-books but was also willing to buy printed books.
1. Most popular resource to find e-books is the library - mainly because it is free and convenient
2. Most popular reading device is the Kindle
3. If readers love a title, they would own both the printed book and e-book
4. E-book and audiobook is for convenience and printed book is to keep and share
5. Lifestyle plays a role in determining which format to use
02. Meet the user
Laying out the user flows
Using insights from my research, I constructed user flow of what a basic start to finish journey looks like for the 3 key tasks to help readers reach their goal. The key tasks are: adding a library card, purchasing a book, and borrowing an e-book.
How will users use the app?
From Jane's perspective, I created a storyboard of how she may use the features to visualize a comparative experience to help her find the best option that fit her lifestyle. This exercise help illustrates the potential benefits and emotions when using the app.
03. Bringing the designs to life
The goal of the app is bridge the gap between resources and preferences into one platform that will help provide options when readers are on the waiting list. The 3 key focus are:
Search tool to streamline experience in finding printed books, e-books, and audiobooks in multiple sources
Visible waiting list status and availability to help readers keep track and compare the best available options
Recommend available titles based on reader's preference and frequent searched genres
Sketch to wireframe
Before I started diving into the design phase, I sketched out design patterns for the initial core screens that readers would mainly interact with.
Mapping out the wireflow
I created mid-fidelity wireframes and lay out the screens that users would go through when interacting with the app. This illustrates how the users will use the app and minimize the numbers of steps to achieve their goal.
04. Feedback & iterations
5 peers performed an expert review of the wireframes and identified positive aspects and areas for improvement of the design. The simple and clean design received positive feedback. However, there were several areas that needed improvement, such as educating users how to use the app, improving the UX language, and giving users more control.
Educate users - Even though participants were able to navigate through the app, they prefer to have a guideline to understand the functions and benefits of the app before using it.
Improve UX language - The choice of words for the CTA buttons on the search result page and borrow page are unclear
Provide distinctive CTA buttons - The buttons does not distinctly show there are 2 options
Improve search efficiency - The search feature should let readers know which library they are currently searching in. Overall feature should be added throughout the app for quick access, not only on the homepage
UI Design Inspirations
For the color palette, I was inspired by the colors from the Antelope Canyon. The soothing warm and cool colors give it a sense of enlightenment and comfort, which represents how reading can make people feel. Having a clean and simple interface is what I value as a designer so there was no hesitation that those would be the foundation of the design. I also added illustrations to give it a more playful and "human touch" to tie in with the casual activity.
Then, I applied my mood board and style guide to create my high-fidelity wireframes. The designs were iterated based on the feedback that I received to improve the user interface and user experience.
1. Educate Users
I created onboarding screens that will appear in the beginning after new users create an account. This gives them an overview of the features and benefits of using the app so users will know what to expect. Visual storytelling catches people’s attention and allows them to process information more quickly so I added illustrations to help make text based content to be more engaging.
2. Improved UX language and CTA buttons
There were areas for improvement for the language and button design to provide more clarification. To improve the UX language on the buttons, I selected words that were commonly used or seen in other digital products.
For the book page, I replaced the words "Search Prices" to "Shop."
For the borrow page, I replaced "Place on hold" to "Add to waitlist."
For the buttons, instead of using 1 color for two different buttons, I used an additional color from the color palette to differentiate the button actions.
3. Improved Search Efficiency
The search tool was only placed on the homepage, so when users want to search for a new item they would have to go back several page. To improve the feature,I added a search icon at the top of the book page. By clicking on the icon, a search page will appear, which will allow users search for a new item without going back to the homepage.
04. Final Designs
I developed a high-fidelity prototype to present the end-to-end experience of a reader adding an additional library card, searching for a title, look through the given available options (Borrow and Shop), and then borrowing the e-book from the library.
I would conduct a usability test with several participants to evaluate if they understand the concept of the app and investigate additional findings on how it will be used in their daily life. This will allowed me to improve the app in the next set of iterations to align with what users are looking for.