Pages Bookshop App
Overview
I had the opportunity to work on a project as a part of the Google UX Design Professional Certificate program, which aimed to enhance the book-buying experience for readers of all kinds. The Pages Bookshop project was developed to simulate the experience of designing an e-commerce mobile app, catering to the diverse reading preferences of users by offering a wide variety of books in physical, ebook, and audiobook formats. My role in the project involved creating an intuitive and user-friendly interface that enabled users to easily find and purchase their favorite books in their desired format.
The end result was a project that allowed me to apply my UI/UX design skills to a project that prioritized the user's needs and preferences and provided users with a personalized and convenient reading experience.
Role: UI/UX Designer
Tools: Figma, Miro, Zoom, Pen and paper
Duration: 4 weeks
Methodologies: Competitive/Comparative Analysis, Information Architecture, Affinity Mapping, Persona Development, User flow, Journey Map, Storyboarding, Pen and Paper Sketching, Low-Fi to High-Fi Wireframing, Prototyping, User testing
Research
The Certificate program provided me with an array of user bios to consider for the research phase to help synthesize their information into insights and personas later on.
Goals to learn from research:
What features/experiences make reading enjoyable in readers’ eyes?
What’s your process for finding a book you want to buy?
What are the pain points that arise with readers using a book e-commerce app?
Insights from Research
From the user bios and asking these questions, there were some core things to consider from the user’s point of view:
Readers want a simple, uncomplicated way to search for a new book.
Readers want an e-commerce experience where they can find any book they want available in their preferred format.
Readers want an easy audiobook and ebook experience through an app.
Persona
Userflow
Design
Sketches
Taking a few minutes for each screen, I sketched out what could be the important screens to consider for the main user flow of purchasing a book. Below are the key screen sketches for the book purchase process.
Lofi-Wireframes
From the sketches, I created the first round of wireframes to start to bring the Pages Bookshop experience to life.
Usability Study # 1
Using Zoom for a moderated study, I developed a series of tasks to understand if the core features of the app was understandable and pleasant for users, as well as find out what I would need to improve. For this study, I had 5 participants attempt these tasks:
Use the search function to select a book you like.
Choose a book and complete the checkout process.
Open up an audiobook and change the narration speed.
From the study, I learned that:
Book search function is not intuitive. Users felt that the search function wasn’t “complete” and suggested making it function like it commonly does on other platforms that has a search function.
Some steps in selecting a book format and checking out are unclear. Users want the book format selection and the payment steps in checkout to be fleshed out.
Changing the audiobook narration speed is not clear. Users want the narration speed feature to be made more obvious by changing its location to be grouped with other buttons.
With the data and suggestions in mind, I made another iteration of wireframes changing the search function to be more intuitive, simplifying selecting a book format option, and making the audiobook narration speed obvious.
Hi-fi Prototype
After the revision of the lo-fi wireframes, I designed the first hi-fi prototype that ties in the branding of the app to make a warm, welcoming impression for users.
Usability Study # 2
For the second usability study, while using Zoom for a moderated study, I developed a series of tasks to understand if the core features of the app was understandable and pleasant for users, as well as find out what I would need to improve. For this study, I had 5 participants attempt these tasks:
Search and purchase a book.
Go to My Library and filter to show only Ebooks.
Go to My Library and navigate to Shelves, Wishlist, and Series.
From the study, I learned that:
While the search and book purchase process was improved to be simple, participants commented on the small size of certain titles and labels. To remedy this, I increased the point size of the smaller titles and labels to increase legibility.
Participants commented that button was slightly hard to read, so I adjusted the orange colors in the palette to give more contrast to be easier to read.
Navigation to My Library and its sub-menu sections was intuitive for users.
Final Prototype
From the resulting feedback and suggestions of the second usability study, I finalized the prototype to be an intuitive, contemporary, and overall user-friendly book e-commerce experience.
Style Guide
Reflections
Throughout the Pages Bookshop project, I had the opportunity to tackle a unique user need and gain a deep understanding of the pain points faced by book lovers who desire a variety of book formats. By utilizing research-driven design principles and a user-centered approach, I was able to conceptualize, test, and iterate a mobile app that effectively addressed these pain points and provided users with a personalized and convenient book buying experience.
Looking back on this project, I'm proud of what I was able to achieve within just 4 weeks. The Pages Bookshop app has given me valuable experience in creating intuitive and user-friendly interfaces. Moving forward, I'm excited to continue exploring new features and functionalities that can enhance the app's value proposition and make it an even more indispensable tool for book lovers everywhere. Features I’d consider including in the future are:
Adding advanced search functionality for users who wish to filter their search results down to narrow, specific options.
A feedback feature to allow users to suggest book titles not currently available.