top of page

Case study :

book-ish (Responsive website)

Problems, Needs and Possibilities :

- Busy professionals who need to browse for recommendations /Inspiration for their next read/listen from different websites and social media book communities.
- The need to follow favorite writers, their favorite book series, and their friend's reading list
- The need to keep a log of what they read, and want to read or what they own.

Goal :

Design a responsive website of an online book store that let users keep track of their favorite authors, book series, ebooks, and audiobooks, as well as their reading log. 

showcase bookish1.png

My role in the project :

UX researcher and UX/UI designer leading the app and responsive website design from conception to delivery.

Responsibilities :

User research, Market competitive audit, User Journey, paper and digital wireframing, low-fi and high-fi prototyping, conducting usability studies, design iteration, etc.,

User research summary and Target audience

I conducted interviews and created empathy maps to understand the users I was designing for and their needs.
A primary user group identified through research was working adults who use various websites and social media to keep track of what they read and connect to other book lovers and their friend's reading lists. While also following their favorite book series and authors. I also added a section for the growing demand for eBooks and Audiobooks.


Persona A :


Persona B :


Design phase :

Paper Wireframe

Initial Concept :

Start the wireframe with user pain points
in mind.

For the home screen, I prioritized the personalization feature for users (new releases from favorite authors, book series, etc.,)

wf_crazy 8_edited.jpg

Desktop version

Design phase :

Digital Wireframe

In the initial design phase, 
I made sure to base screen designs on feedback and
findings from the user research.

On the profile page, with a Highlight for you, New releases on your radar, and quick shop features can help users save time on finding what they are looking for or what they have bought and as well as get a personalized recommendation base on their interest.


Mobile version

Bookish wireframe mobile_best sellers.png

Design phase :

Low-Fi Prototype

Using the completed set of digital
wireframes, I created a low-fidelity

The primary user flow I connected was for users to choose a book that they are interested in, then add it to a basket in a quick shop mode or click to get more information about the book, then have an option to either add it to a basket for checkout or add to a wish list. could be used in a usability study.

View Book-ish
low-fidelity prototype

flow_low fi.jpg
Main flow_low fi proto.jpg

Usabilities Testing and Refining the design:

Before and After usability changes
After the test, I moved the best-seller
section to the first fold and for easier access.

before 1.jpg
before 3.jpg
Bookish hifi mobile_Home.png

High-fidility prototype :

flow_hi fi.jpg
Main flow_high fi proto.jpg

Final screens mock up:

showcase bookish2.png
bottom of page