The product:
The responsive website gives users a great experience across different device screen sizes providing an efficient way to reserve books to pick up at the library.
Project duration:
April 2022 to May 2022
The problem:
Book lovers and university students are frustrated due to time wasted at the library to search for books. They need an efficient way to reserve books for pick up at a convenient time.
My role:
Lead UX designer designing a responsive website for Obafemi Awolowo University Library from conception to delivery.
The goal:
Design a responsive website for Obafemi Awolowo University library (OAUL) that allows users to reserve books for pick up at a convenient time.
Design tool:
Adobe XD
Responsibilities:
•Conducting interviews
•Paper and digital wireframing
•Low and high-fidelity prototyping
•Conducting usability studies
•Accounting for accessibility
•Iterating on designs.
User research: Summary
I conducted interviews and created empathy maps to understand the user I am designing for and their needs. I discover that the target user group which include the University students and also the community book lovers need more efficient way to reserve their favorite books before going to the library to pick them up.
The research revealed that university students are frustrated by the amount of time wasted in going to the library and wait while their books is being searched for.
User research: Pain points
Book lovers wasted their time at the library to wait for their favorite books to be looked for
Platforms for reserving books are not equipped with assistive technology.
Text-heavy website with low fidelity images are often too difficult to read and understand
Persona: Shane Ahuja
Shane is a busy professional and book lover who needs to easily find and reserve books online because he wants his book to be available for pick up at the library on their arrival at the library.
Mapping Shane's user journey revealed how helpful it would be for users to be able to reserve their favorite books for pick up at the library.
Sitemap
Reserving books to pick up was the primary pain point for the user. So, I created a sitemap bearing this user problem mind.
My goal here was to make strategic information architecture decisions so the hierarchical structure I chose was designed to make the user flow simple and easy.
Paper wireframes
Next, I sketched our paper wireframes that represent the skeleton of the library website keeping the user pain points about reserving books in mind.
Paper wireframes screen size variation(s)
Most of the targeted users will access the website with devices of different screen sizes. Thus, there is need to design a responsive website to give the user a great responsive experience.
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research.
Digital wireframes screen size variation(s)
Elements are ensured to scale and able to function properly across different screen sizes.
The responsive designs provides an easy way for users to search for their favorite books using the search bar which is easily assessible.
Low fidelity prototype
To create a low-fidelity prototype, I connected the screens involved in the primary user flow for reserving books to pick up. The user flow starts from the homepage and ends with the user confirming their book reservations. The prototype could be used in a usability study.
The low fidelity prototype could be experienced via the link below;
Usability study:
The usability study helped to assess how easy it was for participants to complete core tasks in the design.
Parameters for the usability studies include;
Insights from Usability study:
User satisfied with being able to reserve books
Some users not interested in "Most requested books" section of the homepage
Iterating the design
I changed the homepage section for "Most requested books" to "Collections" because not all users were interested in the books that were most requested in the library.
Before usability studies
After usability studies
Mockups
Some Desktop versions with their screen size variations.
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for reserving books. The high fidelity prototype could be experienced via the link below:
Accessibility considerations
Takeaways
Impact:
Keeping a simple, short user flow was key to making this website user friendly. "Good user flow. Easy to navigate". - Samuel Olive
One quote from peer feedback:
"The app made it so easy and fun to reserve and pick up books"
What I learnt:
The most important take away for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
UX design is about solving the user problem by providing a solution which gives the user a great experience. Usability studies and peer feedback are great tool which help influence each iteration in the design.
Next steps
Let's connect