BOOKISH
The Product
Bookish a bookstore app that help people buy books & materials online, so they can skip stores as well as in-store lines and the payment process is streamlined. The app strives to help people use their time effectively avoiding delays and inconvenience because of in store crowd.
The Problem
Busy people and locals find it hard to visit store for books and materials. Distance, In-store crowd and Time taking process are the key pain points here.
The Goal
Design an app for bookstore customers to be able to order books and materials online so that they can make most of their time by avoiding in store crowd and traveling to store.
My Role
UX designer designing an app for Bookstore from conception to delivery.
Responsibility
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the User
-
User research
-
Personas
-
Problem Statements
-
User Journey Maps
Research
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was people who just wanted to buy books and have to travel far to just do that and some of them were busy adults who have to struggle to find time. The customers confirmed that it was a bit of a problem to visit the store but research also revealed that along with time, there were other factors that bugged people. Other user problems included In-store lines, long payment process. No clue about out of stock items.
User Pain Point
User Persona
Shreya
Age: 24
Education: DU Graduate
Hometown: UP
Family: Lives Alone
Occupation: Primary Teacher
Shreya is a busy primary teacher Who needs an effective and a fast way to buy exam materials and books Because after work it’s hard for her to find time to visit the store.
About Shreya.
Shreya is a primary teacher in a private school. She's preparing for a competitive exam that would help her to get promoted to higher level. There's a local bookstore where she easily finds all the material she needs, old and new and at cheaper cost.
But sometimes she gets frustrated and tensed because of long queues at the main counter and her missing visits to the store because of other work and stuff.
Goal
-
To learn and prepare for competitive exam.
-
Being able to access materials/books regardless of weather or busyness.
-
To make the most of her time after Job.
Frustration
-
"Sometimes I got busy with other stuffs that I don't find time to visit the store."
-
"And most often than not, I've to spend quite some time standing in a long queue to get my book."
-
"It would've been of great help if I could just order the books online and have them delivered to my house."
Personal Quote
"I've always believed that with little efforts you can change anything, in a good way."
User Journey Map
Get to Know Shreya
Mapping Shreya’s user journey revealed how helpful it would be for users to have access to a dedicated bookstore app.
Starting with the Design
-
Digital Wireframe
-
Low-fidelity prototype
-
Affinity Mapping
-
Usability Study: Findings
Digital Wireframe
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
Low Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was viewing In stock items and checkout to the final screen, so the prototype could be used in a usability study.
Affinity Mapping
Usability Study Findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. .
Round 1 Findings
-
Users want App language feature to be more easily accessible.
-
Users want a way to check In-stock items
Round 2 Findings
-
There is a need for a screen reader.
-
Users want to have labels beneath the icons in In-stock screen
Refining the Design
-
MockUps
-
High-fidelity prototype
-
Accessibility
MockUps
Early designs allowed for some customization, but after the usability studies, I added In-Stock feature as a button on the top screen. I also revised the design so users see all the options when they first land on the screen.
Early designs allowed for some customization, but after the usability studies, I added labels beneath the icons. When a user hover over the icon of Add to cart and Checkout, the written text show up that informs the user what this button does and hence it eliminates the user confusion and smoothens the journey.
High Fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for ordering books and checkout. It also met user needs for app language feature as well as more customization.
Accessibility Considerations
1
Used high color contrast for users with low eye vision to see clearly.
2
Used icons to help make navigation easier.
3
Used App language feature for users whose first language is not english.
Takeaway
While designing the Bookish app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs. And I have learnt what users want is always going to be different from ones assumption about users need.
Impact
The app makes users meet their needs everyday with less to no efforts even with their busy schedules.
Quote from one of the User
“The app made the books and materials so accessible and at the same time leaves me with an opportunity to make most of my time- studying. I love it.”
Next Step
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Thank You!
More Projects are coming...