Project

Design for social good: Amitaba free bookcase responsive website

Role

UX designer

Project duration

Mar. 2022

OVERVIEW

The product
Amitaba is a free book library, and it gives free humanistic and spiritual books to everyone throughout the country.
The problem
Amitaba currently uses a Google Form for interested users to order its free books. Users have to go through the book titles list and type the books’ names in the input box. In addition, users don’t know when their orders will arrive and how much the shipment is.
The goal
Design a responsive website for Amitaba to showcase all free books it offers and for users to easily choose and place an order.
Responsibilities
Paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

UNDERSTANDING THE USER

User research

Summary

I asked the people who volunteered for Amitaba and watched the real ordering process from Amitaba library to see what the user needs and Amitaba's expectations are.

The research revealed that most users feel frustrated when filling out the form if they have many interesting books to order. In addition, Amitaba doesn’t limit the number of free books that a user can get, so it needs a test to evaluate a trusted user.

Method

Online survey, interview

Questions
1.
How often do you order a book from Amitaba bookcase? What is your motivation for doing so?
2.
Can you describe the steps in your ordering process? What challenges do you face when you order from Amitaba library? How does it make you feel?
3.
Is there any way you think these challenges could be resolved? What can be done that you expect to meet your desire?
Personas
Based on the user research, I came up with a persona representing a group of uses for the next step in the empathizing phase. After that, I built a problem statement. Kuba is a private businessman who needs to know the shipment progress fees to know when his order arrives and how much he has to pay for his shipment.
Competitive audit
Before diving into the wireframing stage, I conducted a competitive audit to figure out how other organizations address the same problems as Amitaba and learn which information of a book that user wants to see on a page.

I targeted two indirect and one direct competitor and learned about the standard ordering process and some features added on the book detail page, such as download and foreread. Subsequently, I decided to add a download feature for users to download their interested books. I also added some necessary information that users would like to see, like pages, size, etc.

Starting the design

Sitemap
Because Amitaba is a non-profit organization, it needs to cut down the budget as much as possible. So it won't plan to build any mobile apps; a responsive website is a good fit for them. To construct clear and easy navigation, I first listed all the Amitaba page's features, then decided on a website structure. A hierarchy combined with a sequential structure works the best.
‍
I drew a sitemap with a starting point from the homepage, the parents' pages, and an ordering book flow. With sitemap support, designing across multiple devices is ensured to be consistent.
Paper wireframes

Next step, grasping the problem statements and according to the website structure, I started to dig into paper wireframing. Most users access Amitaba's website using their mobile phones; hence, mobile screen size is prioritized, next is the tablet size, and finally, desktop screen size.

I drew several versions of one screen, graded each section by stars scale, and combined all best-graded sections into one final version. Following the mobile screen paper wireframes, I rearranged elements on larger screen sizes, desktops, and tablets.

Digital wireframes
After ideating and drafting some paper wireframes, I created the initial design for Amitaba free bookcase using Adobe XD. The design focused on how users choose books from the list and complete their orders.

The homepage displays a list of books and has a search box for users to search books by name. I focused on digital mobile wireframes first, then I created other digital wireframes for tablet and desktop screen sizes for pages that have many elements.
Usability study

To determine the usability of the initial design, I conducted a usability study. I connected all relevant screens in the digital wireframes and made a low-fidelity prototype for the study. I built a research plan that included the project background, research goals, questions that I wanted to seek out, participants, scripts, and KPIs to evaluate the designs. I used the Maze app to conduct my unmoderated usability study. Gathering feedback from 6 participants, I came up with some insights to iterate on my designs in the next phase.

Parameters
Study type: Unmoderated usability study
Location: Anywhere, remote
Participants: 7 participants
Length: 5-10 minutes
Findings
1.
People cannot move back to the previous page in the ordering process.
2.
People feel confused with the blessing step and don’t know what to do with it.
3.
People don’t know that Amitaba offers all books free.
Refining the design
Mockups

After the first usability study, I dived into drawing mockups, and I iterated insights from highest to lowest priorities on my mockups. I chose green shades as principal colors for Amitaba pages because green establishes a feeling of friendly and relaxation for users. Considering accessibility factors, green cannot go with blue and red, so I chose distinguished green shades for different elements. A bold green shade is used for call-to-action and emphasizing content.

Prototype

Low fidelity prototype
High fidelity prototype
Takeaways
Impact

Users shared that the Amitaba free library tool truly helps replace some complicated steps before in the Google Form, and they feel more engaged with the Amitaba free bookcase.

What I learned

I learned that going through each step of the designing process is crucial to ensure a feasible solution with a valuable final product for users.

WORKABOUT