About

BookNook is an e-commerce mobile app for easy search, order and delivery/pick-up of books.

Deliverables

User Experience | User Interface | Wireframing | Prototyping

A grid of iphones showing the user interface of a book ordering app.
my role
User Research, Information Architecture, Wireframe, Low & High Fidelity Prototype, Visual Design
tools
Adobe XD, Adobe Illustrator, Adobe Photoshop, Google Sheets
project duration
September 2022 - October 2022

about the project

BookNook is an e-commerce mobile app designed to help make books easily accessible – either delivered to your doorstep or to be picked up in-store.

the problem

Time is one of the most valuable assets, yet one we cannot buy. For working adults going to bookstores has become increasingly rare with how busy their lives are. Even when they do manage to take time out of their busy work days, when they get there the store may not even have the book they're looking for.

the goal

Create an e-commerce app that allows users to search for, check the availability of, buy and get home delivery or in-store pick up of their favorite books.

design process

To ensure I followed a user-centric approach to this project, I followed the steps in the below mentioned design process.

An icon showing three people for the step 'Empathize' in the process.
An icon showing a funnel and document for the step 'Define' in the process.
An icon showing a light bulb for the step 'Ideate' in the process.
An icon showing a desktop and tablet for the step 'Prototype' in the process.
An icon showing a document and pen for the step 'Test' in the process.

Empathize

I conducted primary research and secondary research to understand what issues users are currently facing when buying books - offline and online. The target audience for the primary research was working adults – in different stages of their career. I conducted telephonic interviews with 7 people.

A box describing why people felt the process of finding a book in store takes too much timeA box describing the lack of availability of books in stores sometimes
A box describing why books are hard to find because they're poorly organized.

define

user persona

Next, I synthesised my findings to define who my user is, map out their journey and create a site map to help inform my design.

A user persona that describes the ideal customer the app should focus on

user journey map

I used a User Journey Map to identify the gaps the users may be currently facing when looking to adopt dogs online.

A table of different actions users will take to buy a book on the app and what their tasks will be at each step as well as how they may feel

ideate

paper wireframes

As a first step I drew paper wireframes to ideate the design of the app. Creating multiple versions of the same screen helped me figure out what all the possibilities would be for this page. For the home screen I prioritized easy access to information. Stars were used to identify which features would be most important to take forward.

A sketch of multiple screens showing the ideation process

digital wireframes

Taking into consideration the insights gathered from my research, I crafted digital wireframes.

Screens showing the digital wireframes

prototype

low fidelity prototype

After recreating the wireframes digitally and taking into account the users feedback, I made the necessary changes to the low-fidelity prototype. For example, based on my research, people who visited bookstores found it hard to find a book or find similar books. The search bar and recommended options are meant to help the buyer get to what they need quickly and efficiently. One of the pain points that users repeatedly mentioned was a fast and efficient way to purchase books. The progress bar allows users to see how many steps there are to finish checkout. Also, they wanted the flexibility to either have the books delivered to them or pick it up in-store.

Screenshot of different screens connecting with each other in the low fidelity prototype
Link to the low fidelity prototype

usability test of the prototype

I conducted usability studies remotely with a diverse audience to understand what parts of the app were working and what needed improvement.

About the Book: would like to be able to click on the book to know more as opposed to having a separate button for it.
Delivery types: this feature was not critical and users felt a normal delivery time would be sufficient. It's making the page very busy.
Recommendations: These can come at the bottom of the screen to avoid taking up so much space.

high-fidelity prototype

I incorporated the above mentioned feedback to improve the final designs of the page. I kept the visual design clean and simple as that's how I would like the process to be. I've kept the navigation on top for easy access and buttons clearly distinguished by color to make it clear.

Grid of the app's user interface
Grid of iPhones with the app's user interface of the checkout process

learnings & next steps

learnings

I learned that one should never assume what the users are thinking as it may be totally different than one's own assumptions. I also see the value in gaining feedback and iterating designs accordingly to help create a more refined product.

next steps

I will conduct further interviews to see if the experience has improved for users. These interviews will also help determine what features users may want to see going forward.

“I love this app for its simplicity and aesthetic. It's easy to use!”
Need something similar? Let's join forces and create something that fits your users needs.