Project overview
The product:
BookWorm Haven is a mobile app designed to connect readers by enabling them to share and explore book reviews within a community-focused platform. This app promotes literary discussion and mutual learning among book enthusiasts.
Project duration:
April 2023 - Ongoing
The challenge:
The challenge for this project revolved around devising a user flow that seamlessly allowed users to select books they had read and compose reviews for each. The focus was on creating an intuitive pathway that smoothly guided users through book selection and effortlessly transitioned them to the review creation stage.
The goal:
The goal for this project was to create an intuitive user flow for selecting books and composing reviews, to create a seamless experience that boosted user engagement, simplified sharing reading experiences, and enhanced overall satisfaction through an intuitive design.
My role:
UX Design, User Research, Information Architecture, Usability Testing, Prototyping and Wireframing.
Responsibilities:
Conducting user research to inform design decisions, implementing logical and user-friendly content organization, executing usability tests, gathering feedback to validate design solutions for seamless and intuitive user experience, and creating interactive prototypes and wireframes for effective communication and iterative design refinement.
Starting The Design: Digital Wireframes
Engaging Home Screen Design
The initial design of BookWorm Haven's home screen featured sections for Most Read, User Interests, and Best-Selling titles, along with personalized recommendations to boost engagement. The home screen included a search bar for quick access and a consistent bottom navigation bar with icons for Home, Lists, and Library, streamlining and personalizing navigation.
Title Details Screen: Enhancing Book Engagement
After choosing a title from the Home screen, users would arrive at the Title Details screen which displays the book’s cover image, author, ratings, and options to add to a list or purchase. It also includes a brief overview of the book, enhancing engagement.
Review Details Screen: User Interaction and Insights
After clicking "See Reviews" on the Title Details screen, users would land on the Review Details screen where they could view top reviews, scroll for recent reviews, or interact with the “Write a Review” text link. The screen also includes a graph showing review counts and star ratings.
Review Creation Screen: User Feedback Input
After tapping the “Write a Review” text link on the Review Details screen, users would be directed to the Review Creation screen to rate the book, create a review title, and to insert their review.
Review Input Screen: Finalizing User Feedback
Users would be directed to the Review Input screen from the Review Creation Screen after engaging with text boxes to craft their review title and content.
Review Summary Screen: Editing and Submission Options
After submitting their review, users would land on the Review Summary screen where they could edit their review or submit it by tapping the “edit” or “submit” buttons.
Review Confirmation Screen: Acknowledgment and Exploration
After submitting their review, users encountered the Review Confirmation screen, which displayed a thank-you message, enhancing satisfaction and acknowledging their contribution. This screen also featured a title card with the book cover, title, author, and rating, along with a list of similar titles to encourage further exploration within the app.
User Research: Understanding The User
User Research Summary
Twelve users were recruited via LinkedIn and personal contacts to participate in the research. Participants selected based on having previous experiences using Goodreads, LibraryThing, Wattpad, Litsy, and other apps and/or websites whose overall goal is to foster a sense of community engagement among book enthusiasts.
User Research Pain Points
User research has highlighted key pain points encountered by previous users of similar apps and websites. These issues included challenges in effectively navigating and engaging in discussions, potential disappointment due to limited book variety and recommendations, complexities in submitting reviews, missed opportunities for author interaction, unsatisfactory personalization features, and technical glitches during virtual book club sessions.
User Personas
Jamal C.
Age: 45
Location:Location: Chicago, Illinois
Educational Background: Associate's degree in Business Administration
Occupation: Small Business Owner
Background: Jamal is a dedicated boutique bookstore owner. He's been a lifelong book lover and believes in the power of literature to enrich lives. He enjoys connecting with his local community through book-related events and discussions.
Goals: Jamal aims to discover an online platform that complements his efforts as a bookstore owner. He seeks a space where he can engage with readers, share his insights, and recommend books from his store's collection, enhancing his store's sense of community.
Frustrations: Jamal often faces challenges in finding digital avenues that facilitate meaningful connections with readers. He's frustrated by platforms that prioritize quantity over quality and miss the essence of personal and local book communities.
Motivations: Jamal is motivated by the prospect of finding a platform that aligns with his commitment to fostering book communities and looks forward to extending his store's presence, engaging with readers beyond his physical location, and contributing his expertise to enrich the literary dialogue.
Daniel R.
Age: 19
Location: Seattle, Washington
Educational Background: High School Graduate
Occupation: Student and Part-Time Retail Associate
Background: Daniel is a student and Retail Associate. He has a growing interest in books beyond his academic requirements and aims to find a platform that introduces him to new reading experiences and allows him to connect with others who share his newfound passion.
Goals: Daniel's goal is to discover an online haven where he can explore books outside of his school curriculum. He seeks a space that not only provides book recommendations but also connects him with fellow readers who can guide him in his literary journey.
Frustrations: Daniel often struggles with locating platforms that cater to his entry-level interest in books. He's frustrated by platforms that assume a higher level of prior knowledge and engagement, making it difficult for newcomers like him to engage meaningfully.
Motivations: JDaniel is motivated by the opportunity to join any platform that welcomes readers of all levels and backgrounds. He looks forward to connecting with others who can introduce him to diverse literary worlds, recommend accessible titles, and accompany him on his reading adventure.
Usability Study
Usability Study Objective:
The objective of the usability study was to assess how easily users were able to navigate and interact with the first iteration of the BookWorm Haven mobile app. User interactions with the prototype were observed and analyzed to identify pain points and areas for improvement.
Usability Study Methodology
The usability study employed remote usability testing sessions to evaluate the overall user experience of the prototype's first iteration. A group of twelve participants were recruited via Linkedin and Dscout, and were selected based on their prior experiences in using websites or mobile apps similar to BookWorm Haven to learn more about, view, and leave reviews for their favorite book titles.
Testing sessions were moderated by members of the research team. Participants were tasked with using the first iteration of the BookWorm prototype to learn more about, view, and to leave reviews for a selected book title. Participants' interactions with the first iteration of the prototype were observed, allowing for the identification of usability issues and insights into user behavior. The methodology aimed to gather comprehensive feedback to inform the iterative design process.
Usability Study Findings
The usability study identified several key issues affecting user experience on the BookWorm Haven platform. Users struggled with making out smaller book cover images, which made it difficult to see details and reduced engagement. The lack of book titles, author names, and review numbers caused confusion about content. Additionally, the absence of essential buttons like 'back', 'share', 'download', and 'bookmark' hindered user actions and engagement. The interface's large touch targets led to accidental taps or difficulty in selecting items, impacting user satisfaction and ease of use.
Affinity Mapping
Affinity Map Insights: BookWorm Haven's usability study reveals key areas for improvement. Inadequate cover sizes and mismatched touch target sizes affect engagement and create visual clutter. Additionally, the lack of essential information causes confusion, while issues with touch target optimization impact usability.
Content Clarity:
Lack of book titles, author names, and review numbers causes confusion about content.
Interaction Design:
Absence of essential buttons ('back', 'share', 'download', 'bookmark') hinders user actions and engagement.
Limited options to toggle between different top and recent reviews restrict user interaction and exploration.
Touch Target Optimization:
Small touch targets lead to accidental taps or difficulty in selection.
Large touch targets dominate the screen and do not align well with other elements, impacting usability.
User Journey Map
Insightful User Journey
The user journey map was created using insights from the initial usability study. The map visualizes user interactions, emotions, pain points, and enhances understanding. Its results aided the design team in identifying areas for improvement, streamlining the user experience, and ultimately leading to a more user-centered design.
User Research: Pain Points
Pain Point:
Inadequate cover size (117x170px) made it hard for users to see details, potentially reducing engagement. Lack of book titles, author names, and review numbers could lead to confusion about the content.
Pain Point:
Previous design lacked visual elements like book covers and titles, leading to a less engaging user experience. The absence of options to toggle between different review views limited user interaction and exploration.
Pain Point:
Large touch targets (48px) could lead to a cluttered and less visually appealing interface, especially when combined with other elements like the keyboard.
Pain Point:
Small cover size (117x170px) limited visual appeal and recognition. Lack of essential buttons like 'back', 'share', 'download', and 'bookmark' hindered user actions and engagement.
Pain Point:
Small touch targets (48px) could lead to accidental taps or difficulty in selecting items, reducing user satisfaction and ease of use.
Pain Point:
Large touch target stars (48x48) could dominate the screen and may not align well with other elements, leading to a less cohesive design.
Pain Point:
Large touch targets (48px) and small book cover sizes (42x68px) could lead to a visually unbalanced and cluttered interface, impacting user engagement.
Refining The Design
Pain Point(Screen One): Inadequate cover size (117x170px) made it hard for users to see details, potentially reducing engagement. Lack of book titles, author names, and review numbers could lead to confusion about the content.
Design Solution: Increased the cover size to 180x266px, enhancing visual appeal and allowing users to better recognize and select books. Added book titles, author names, and review numbers to improve information clarity and help users make informed decisions. Updated the bottom navigation with clear icons like 'home', 'lists', 'library', and 'profile' to improve navigation ease and provide quick access to essential features.
Pain Point (Screen Two): Small cover size (117x170px) limited visual appeal and recognition. Lack of essential buttons like 'back', 'share', 'download', and 'bookmark' hindered user actions and engagement.
Design Solution: Increased the cover size to 180x266px, enhancing visual appeal and making it easier for users to recognize and select books. Added a 'back' button to improve navigation, allowing users to return to the previous screen effortlessly. Included 'share', 'download', and 'bookmark' icons to provide users with valuable actions, enhancing their engagement and interaction with the app.
Pain Point (Screen Three): Previous design lacked visual elements like book covers and titles, leading to a less engaging user experience. The absence of options to toggle between different review views limited user interaction and exploration.
Design Solution: Added book title cards with covers, titles, authors, and review numbers to enhance the visual appeal and interest in the app. Introduced a toggle feature for review views to provide users with flexibility and control over their reading experience. Included icons for commenting, liking, and reporting reviews to encourage user engagement and feedback.
Pain Point (Screen Four): Small touch targets (48px) could lead to accidental taps or difficulty in selecting items, reducing user satisfaction and ease of use.
Design Solution: Reduced the size of touch targets to 36px, improving user accuracy and reducing the likelihood of accidental taps, enhancing the overall user experience and satisfaction.
Pain Point (Screen Five): Large touch targets (48px) could lead to a cluttered and less visually appealing interface, especially when combined with other elements like the keyboard.
Design Solution: Reduced the size of touch targets to 36px, creating a cleaner and more visually balanced interface, improving overall aesthetics and usability. Ensured that all elements, including the keyboard, fit on the screen, enhancing user convenience and reducing the need for excessive scrolling or adjustment.
Pain Point(Screen 6): Large touch target stars (48x48) could dominate the screen and may not align well with other elements, leading to a less cohesive design.
Design Solution: Resized touch target stars to 36x36, creating a more balanced and harmonious layout, improving the overall visual appeal and user experience. Optimized white space between elements to enhance readability and visual clarity, making it easier for users to navigate and interact with the app.
Pain Point Screen 7): Large touch targets (48px) and small book cover sizes (42x68px) could lead to a visually unbalanced and cluttered interface, impacting user engagement.
Design Solution: Reduced touch target sizes to 36px, improving visual balance and reducing clutter, enhancing the overall user experience. Increased book cover sizes to 60x90px, making them more visually appealing and easier to recognize, improving user engagement and interaction. Added navigation buttons like 'back to review' and 'back to titles' to improve user convenience and help them navigate the app more efficiently.
Mockups
High Fidelity Prototype
Usability-Driven Prototype Design:
Utilizing insights from the usability study and affinity mapping session, the high-fidelity prototype embodies a user-centric approach that seeks to address the usability issues gained as a result of analyzing the insights from the user research and pain points from the first round of usability studies.
Accessibility Considerations
Text-to-Speech Compatibility: Provide compatibility with text-to-speech software to allow users with reading difficulties or visual impairments to listen to the content.
Contrast Testing: Perform contrast testing to confirm that all text and graphical elements meet the necessary contrast ratios for readability.
Interactive Feedback: Provide clear and instant feedback when users interact with buttons or elements to enhance the user experience.
Next Steps
Continued Usability Testing: Identify overlooked issues, validate improvements, and enhance user experience based on fresh insights from real users.
Improve UI: Elevate UI to enhance user interactions, simplify navigation, and cultivate favorable experiences by providing users with a design that offers a seamless interactive design, intuitive navigation, and user-centered aesthetics.
Design for Fingers: Ensure touch targets are appropriately sized and spaced for easy interaction on mobile devices to enhance user experience by reducing accidental taps and improving accuracy.
Takeaways
Impact: BookWorm Haven creates a nurturing environment for readers by fostering engagement through intuitive navigation, promoting literary discussions and by providing a seamless platform for exploration. The app has the potential to elevate user satisfaction by transforming the act of reading into an interactive, immersive, and shared experience for all users.
What I Learned: During the process of designing the app, I gained valuable insights into user behavior and preferences. Conducting user research and usability testing revealed patterns in user interactions, helping me refine the app's design and information architecture for intuitive navigation.