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.
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.,)
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
Design phase :
Low-Fi Prototype
Using the completed set of digital
wireframes, I created a low-fidelity
prototype.
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
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.
