reading app

Bookbdz Book Recommendation / Tracking App

Tiime

8 Weeks

ROLE

Researcher & Designer

Tools

Figma,  Photoshop, etc.

Project Overview

Reading is a hobby and sometimes an essential part of a person’s day. The issue when it comes to reading is what to read. Sometimes not finding a good book to read keeps people from actually doing it. This project seeks to find a solution to that problem.

Research

Problem

It’s hard to find good book recommendations

Research Goal

We want to know what readers need in order to find a good book recommendation

Research Method

Surveys and Zoom interviews

Participants

Avid and casual readers

Competitive Analysis

I looked at some of the video services that offered a product similar to youtube. The three direct competitors were Netflix, Hulu and Prime Video. I also looked at Audible, Scribd and spotify as  indirect competitors.  They also offer services that can help people sleep.

Direct competitors (Goodreads and storygraph)

Follow similar standards : search function, community section, book tracking, reviews, a version of personalization

Lacks intuitiveness and the ui is a bit clunky

Indirect competitors (Book of the Month, Kindle Unlimited, Amazon)

Focused on one area such as a subscription for monthly books or just buying a book at a time

Survey

I conducted a user interview with avid and casual readers to find out about their pain points in finding book recommendations. I also sought to find out what they look for as well.


I conducted a user interview with avid and casual readers to find out about their pain points in finding book recommendations. I also sought to find out what they look for as well.

Survey Results Key points
Interview Key points

Persona

I created the persona based on the feedback from the research. Her goals and frustrations were pulled directly from the research. Her demographic info was also pulled from the research participants’ demographics.

We took the data from the patient interviews and the practitioner surveys. We decided to name the patient persona Nicole and the practitioner persona Jessica. Each persona highlights the needs and wants of each group.

Information Architecture /UI Design

Information Architecture
/UI Design

Sketches

I created the app structure with the standards I found from the competitor analysis. It has the search function, personalization, community and tracking components. I created the sketches with the research and persona in mind. The sketches helped me to block out the core parts of the layout.

Wireframe

The wireframe became the building block for the app layout. I wanted to include key items that the user would need in the home/dashboard area. I chose yellow and deep purple as the colors for the brand. Books are a source of comfort for many people. I wanted the app to have a welcoming vibe. I named the app Bookbdz (Book Buddiez). I created one wireframe and then created the high fidelity designs from that.

Key Screens

We decided as a team of the key screens that had to be created with the research as our guide. We made a home page, sign-up pages, browse practitioner pages, and a practitioner profile page. The individuals could join as a practitioner or individuals. Further user testing made it known that we needed to make it clear to practitioners what their part in Elana would be. The logins screens are for the practitioner.

User Testing

3 Participants were invited to participate in the user testing. The tests were conducted over zoom and useberry. They were given a scenario to work with.

Test Goals

Sign up for bookbdz and complete the survey
Find the book Arsenic and adobo
Put it on hold from your local library

Scenario

You are looking for a way to find new book recommendations. Your friend suggests that you download and try Bookbdz. Bookbdz is a book recommendation and tracking app. You decide to see if you can find a book called Arsenic and Adobo which a co-worker suggested to you.

Usability Test Results

We created a design system and color palette for the website. We used the current colors from the logo as inspiration. The design system had a layout guide and an icon library so that we could have cohesion in the design of our screens. We updated and added color to our wireframes.

Key Insights Affinity Map

Revisions

The revisions were based on the results of the user test .
I made a list from the feedback I was given. Some were immediately actionable. Others were problems I had to
create a solution for. The changes are listed below:

The changes are listed below:

Move the want to read button or change it

  • Add tag line book recommendation and reading tracker

  • Change survey input into dropdown

  • Change info entered to info selected or change wording

Final Prototype

Next Steps

Design community flow and reading tracker flows

Design library and discover flow

Design favorites or tbr (to be read) flow

Key Takeaways


Let the research guide the UI designs

I tried to make sure the final UI reflected the research. This project is really fun and it would be easy to get carried away

Don’t get lost in the details

There was a lot that could have been done with the project. The scope was really large. I had to keep reminding myself to stay within the constraints.