project showcase

Readi - eLibrary

Role

User Experience Designer

User research, wireframing and prototyping

Project type

Conceptual Project

Project duration

Oct - Nov 2021

Project summary

This is a conceptual project I designed to give everyone access to free books.

see it here→

Some details about this project:

After the client, Supermassic, found my portfolio by chance, I was sent an email to join the Supermassiv team as a freelance designer. I was happy to work on their interesting project! The client wishes to make music NFTs accessible to people who know all about NFTs , those who have no experience with them (like myself), and anyone in between.

I was given the task to design a "drop page" which is where music artists would share a link to their followers to follow and purchase their music NFT. I was given a list of goals and objectives, as well as their prior style guide which they wanted to simplify. I made several screens for the drop page which included a: screen with a launch countdown, purchase page, page to view current collectors and responsive versions of these screens for tablet and mobile.

After my designs were approved, a developer worked on the coding using my designs on Figma. I coordinated with the client and developer on any changes needed during the development process and refined my designs based on any coding issues that were brought up. My second task with Supermassiv was to create their landing page. I sent over wireframes based on their requirements and worked on final designs when those were approved. I sourced and edited illustrations on Adobe Illustrator and was able to transform their previous style into a cleaner, simpler aesthetic that they requested.

I will continue to add more details about this project soon.

Live Link TBD: The link to the live site will be added when the product is launched.

THE PROBLEM

Why an eLibrary App?

In our ever-changing digital world books have taken a new form in our lives. Ebooks are incredibly popular due to their convenience, cost, and how simple they are to buy or borrow and then read. For book lovers or anyone wanting to learn something new, books can get expensive, this makes gaining resources and information difficult for low-income people to obtain. Libraries have always been a major institution in most cities, the location we all know to have free resources and information as long as you have a library card, but these resources are not always easy for people to obtain, whether they have health issues, scheduling issues, or simply like the convenience of taking these resources on a device remotely, an app and website to allow people to borrow ebooks for free ensures that everyone has access to books.

The research

I conducted user research through a small survey to find out any issues people may have when trying to gain access to books.

  • The majority of respondents either go to their local library in person or use an app the library partners with.
  • Respondents mentioned that an app that meets their needs would sync across devices, so they can use a computer at home and read during commutes on their phone. It would not require uninterrupted internet connectivity due to cost of high speed internet or inconsistent internet during commutes, and it would be free.

Problem Statement

People who cannot afford books, afford high speed internet or travel to a library need a way to download free books and be able to read them without consistent internet connectivity.


Who is using this website?

I created two user personas based on the findings above, encompassing the demographics, frustrations, and goals of the survey respondents. One persona is a young teen who finds difficulty having access to affordable books due to his home life and schedule. Another persona is an elderly woman who has issues accessing books in person due to her health. These are two very different people with similar goals which would help me focus on vastly different needs.

The User

The Design Process

The user flow

Creating a user flow was helpful to create a very simplified path on this potential app before making too many design decisions. The entire objective on this app is to make borrowing a book as simple as possible and straightforward for the user.

The Site Map

This app includes a responsive website for multiple devices. I created a sitemap to create a full overview of usability. It helped to brainstorm which pages led to which, and how these pages would connect to complete the user goal: to borrow a book easily for free.

The user starts off at the home page, with an option to check current loans, browse new books, look at featured or recommended books, or to check on their user profile.

Paper and digital wireframing

Through user research, creating a persona, and creating a site map, I conducted a 15 minute sketching session to quickly produce design ideas which I then translated to Figma as a digital wireframe.

No items found.

Usability Study

Findings

I conducted a small unmoderated usability studies with five participants. Two men and three women between the ages of 26-40. I gave them several tasks to complete and vocalize any thoughts and frustrations they may have.

Research questions

  • Is there any place where users are getting stuck?
  • Does the user feel motivated to borrow a book through this app?
  • Is there a feature users would desire to make the experience better for them?
  • How quickly can users get through the tasks?
  • Is the website accessible?

The tasks

  • Prompt 1: Look at a book’s information
  • Prompt 2: How would you borrow this book?
  • Prompt 3: Go to the homepage after confirming the loan.
  • Prompt 4: How would you view your current loans?
  • Prompt 5: How did you feel about this ebook app overall? What did you like or dislike about it?

the outcome

Refining the design with mockups

The homepage has current loans at the top, the user can scroll through their current books to quickly read them. I also added a button to toggle between light and dark mode in an easy to see location, which would help with accessibility for users who have sensitivity to light. Users can look at recommended books or browse books of different categories further down on the app. Pages such as “Home, Loans, Seach, Favorites, and Profile” are always at a bar at the bottom, so users can always access important pages while browsing books. The app would potentially sync information whenever it is connected to wifi but would allow the user to browse as many books as data would reasonably allow. Users can download their borrowed books so they can read without consistent internet connection.

Hi-Fidelity prototype

The high fidelity prototype allows the user to toggle between light and dark modes and leads the user through the book lending flow.

User avatar clicks to profile

Search bar for users who know what they want

Categories for users who have some idea of the type of item they want or want to browse.

Popular items featured for users who have no prior preference for items

Bottom bar contains home, browse, favorites and cart buttons.

Scroll bar with menu categories fixed to the top

Filter button for more
specific needs

Item card with name, image, price, and a short description

Favorite button

Item description with
more detailed information.

Large add to cart button with price

Allergen information with illustrated icons

Toggle between pickup or delivery

Shortened item summary with option to add quantities

Tip option has set amounts with an additional option to remove tip or input a custom amount

Recent payment option is saved with an arrow to toggle options to change payment method

Order status changes based on stage of preparation

Timer with estimated
time order will be ready

A QR code makes it quick and easy for bakery staff to locate a customer’s order

Button to notify bakery of customer’s arrival

Points for rewards would encourage customers to order again in the future

Address with a button to link
to phone’s default map app

User avatar clicks to profile

Search bar for users
looking for a specific book

Easy-to-find toggle between dark and light modes

Recommended books
based on previous loans

Bottom bar contains frequently used pages such as: Home, Search, Loans, Favorites and Profile

Current loans front and center

Share button to send book link to others and a bookmark to read the book later

Book cover image with title and author

Tabs with book description and reviews

Buttons to borrow or preview book

Number of available loans

Tags with book categories and genre

Loan expiration timer with oldest loans at the top

Renew button to start process of extending the loan time

Return button to end loan early

Navigation bar with relevant pages

Hero image to set the tone of the overall website experience.

Large buttons with the top CTA buttons users are assumed to use.

Articles for users browsing the website.

Featured story to show adopters how
successful the shelter has been at matching
humans to animals.

Bottom bar contains home, browse,
favorites and cart buttons.

Filter buttons with typical pet finding characteristics

Pet listings have an image and major characteristics such as age, size, breed and activity level.

Personality traits, key information, breed details.

Detailed information with pet's
background and history

Adoption process and pricing

Similar matches

Conclusion

Takeaways

It is incredibly useful to compare existing apps and getting to the root of why they are designed a certain way. How can I improve this app? What is it missing? How can I redesign it completely? There were some things I learned that I never knew about ebook lending, for example, just because it is a digital file does not mean there are unlimited ebooks available. Because of licensing, each book is treated as a physical copy in which the library can only lend a limited number. It encouraged me to reach out to my own library’s app because they truly are a great resource. This is an app I’d enjoy continuing to improve because there are so many resources and possibilities users can potentially enjoy, for example, how would I design an audiobook option in this case study? If I were to spend more time on this project I would design the eReader interface with the problem statement in mind.


see it here→
Images sourced from unsplash.com and pexels.com. Book images and descriptions are sourced from strandbooks.com