BookNook: Designing a Mobile App/Website for a Local Bookstore

BookNook is a mobile and web app designed for a local bookstore, making the process of discovering and purchasing books faster, easier, and more personalized. By combining intuitive navigation with personalized recommendations, the app creates a seamless and enjoyable experience for users.

While completing a six-month online UX Design certification through Google, I explored interface design using Figma. As part of the course, I designed a specialized mobile app for a local bookstore called Book Nook. I created a high-fidelity prototype and an interactive video demonstrating the user flow. Later, I expanded the concept into a website version to refine the overall user experience across platforms.

Overview

Role

Responsiblities

Duration

UX Designer/Researcher

May 2023-Nov 2023

•Empathizing, Defining, and Ideating

• Building Wireframes

• Conduct UX Research and Test Early Concepts

• Create High-Fidelity Prototypes and Designs in Figma

•Empathizing, Defining, and Ideating

• Building Wireframes

• Conduct UX Research and Test Early Concepts

• Create High-Fidelity Prototypes and Designs in Figma

•Empathizing, Defining, and Ideating

• Building Wireframes

• Conduct UX Research and Test Early Concepts

• Create High-Fidelity Prototypes and Designs in Figma

Problem Statement

Goals


  • Minimize time spent looking for books

  • Personalized and Enjoyable Experience

  • Efficient Delivery Experience

Customers visiting BookNook, often spend more time searching than they’d like. The current in-store experience lacks personalized guidance.

Understanding The User

User Journey Mapping

Research

Usability Study Findings

Research Method: Usability Study

Abrupt User Flow: Personalized Search Quiz

BookChats feature: cramped and unnecessary

Technical Issues: Arrow not needed to scroll down, Unable to scroll down on homepage

For my first prototype, I created a Usability Study Plan to test my wireframes. Although the study was small-scale, participants provided valuable feedback. They found the personalized quiz too long and suggested making it more engaging. Some also noted confusion when navigating back to the home page.

1

1

1

2

2

2

3

3

3

Final App Design

BookNook App

After creating the Book Nook app interface, I refined the design further by developing a website version. I conducted another usability study to analyze what features to improve on in the website version. Scroll below to see how my design process grew and adapted from mobile to web.

From App Design to Web Design

Round 2: Usability Study Findings

1

1

1

2

2

2

3

3

3

4

4

4

HomePage layout was confusing

Personalized Quiz is lengthy

Recommendations Page is overwhelming

Provide descriptions for buttons such as "My Shelf"

Final Website Design

BookNook Web

What I learned:

Throughout this project, I learned the importance of refinement and why each step of the UX process was essential to the end goal. Having a strong foundation through the research and the empathizing phase, I was better able to design with users in mind instead of what would be aesthetically pleasing. I also learned and experimented with Figma while creating my wireframes. While I have taken a solo approach to designing in the past, I was able to learn how communication within a team can be beneficial for UX Designers through the “comments” I received from peers. Overall, this certification has broadened my design knowledge and equipped me with the essential skills needed to become a UX Designer.