Background

As teens age, their pleasure in reading typically lessens, resulting in reduced frequency and interest, especially among older adolescents. These challenges in finding suitable books include diverse tastes, limited access to curated resources, a lack of high-quality literature visibility, peer pressure toward popular but less impactful reads, difficulty finding appropriate reading levels, evolving preferences, and insufficient diversity in the available literature.

It is critical to develop an inclusive app designed to facilitate teens and parents in discovering age-appropriate and diverse books, fostering a robust reading culture among adolescents of varying interests and preferences.

My Role

As the sole product designer for this project, I shouldered the entire design process from start to finish. Over the course of a month, I dedicated my efforts to conceptualizing, designing, and executing the project, ensuring its completion within the specified timeline. This involvement across all phases allowed for a comprehensive understanding of the project's intricacies and a focused approach to its successful execution.

UX/UI Goals

  • Design a user-friendly book recommendation system tailored for adolescents with diverse reading preferences and limited access to curated resources.

  • Develop an engaging user experience to motivate adolescents to prioritize impactful reads over less substantial books influenced by peer preferences.

Deliverables Produced

Research

  • Conduct Competitor Analysis:

    • Direct Competitors:  Goodreads, Bookly

    • Indirect Competitor: TikTok, Snapchat, Instagram

  • User Interviews

  • Affinity Mapping

Define

  • Create User Personas

  • Create Point of View and How Might We Statements

  • User/Task Flows

  • Sketching/Brainstorming Possible Ideas

Design

  • Brand Style Tile

  • Low-Fidelity Screens

  • Hi-Fidelity Screens

  • Prototype

Testing

  • User Testing 

  • Iterations/ Next Steps

Research

Competitive Analysis

I conducted a competitive analysis to delve deeper into existing apps and their offered features. I evaluated various aspects including user interface, functionality, user experience, and community engagement. The analysis encompassed three direct competitors: Goodreads, Bookish, and Bookly. Additionally, I included an indirect competitor, TikTok, due to its popularity among adolescents.

Key Findings

  • Goodreads stands out with its expansive book database, vibrant community engagement, personalized recommendations, and author-reader interactions.

  • Bookish focuses on curated editorial content, sleek design, and book discovery, albeit with fewer community features. 

  • Bookly provides a minimalist yet effective reading tracker, emphasizing goal-setting and progress tracking, ideal for users seeking a straightforward, goal-oriented approach.

  • TikTok’s design steals the show with a personalized feed, video creation tools, and the addictive nature of short captivating videos.

User Interviews and Affinity Mapping

I conducted interviews with seven adolescents to understand their reading challenges, simplify book discovery methods, and explore effective ways to measure book interest. After the user interviews, I utilized affinity mapping to reveal the following themes.

Click on arrows to enlarge image

Themes

Reading habits and preferences

  • Readers explore new books through varied methods including library visits, friend recommendations, online reviews, and book series exploration, valuing personal suggestions and library visits while also considering online reviews and sampling book excerpts crucial for discovery.

Factors that make a book exciting

  • Readers are drawn to books by renowned authors, captivating covers, and intriguing summaries, often relying on friend or online recommendations, and occasionally deciding based on the title, blurb, or sampling pages before delving into a new read.

Methods of finding books

  • Opting for personal recommendations for book discovery, many rely on friends' tastes, cherishing human connection and enriching discussions; however, limited access to social media can impact book discovery through these platforms for some individuals.

Overall, readers use various methods like libraries, friends' suggestions, online reviews, and sampling book pages to find new reads. They get excited by renowned authors, captivating covers, and intriguing summaries. Personal recommendations are highly valued for discovering books, emphasizing trust and human connections. Limited access to social media affects some people's book discovery.

Define

In general, the define phase of the design process proceeded smoothly. I chose a sequential approach, analyzing each project's results before determining the suitable method for the subsequent implementation.

Click to enlarge

Empathy Mapping

While I have experience teaching adolescents, their wants and needs are ever-changing, therefore, I opted to create an empathy map following the user persona to increase my ability to understand who I am truly designing for. 

Click to enlarge

Problem Statements

  • Customize the onboarding process to gather insights into individual user preferences and interests, ensuring a more engaging experience for new users joining the platform.

  • Design an interface that simplifies and intuitively guides users to effortlessly track their reading progress, enhancing the overall user experience. 

  • Innovate content presentation methods to cater to diverse user preferences within different genres, fostering an inclusive and captivating reading experience.

Site Map

Click logo to enlarge

Creating the sitemap required extra time, as I preferred a detailed approach, envisioning content for each screen, which I think significantly contributed to the subsequent wireframing process.

User Flow

Due to time limitations, I focused solely on two critical user flows—account creation and onboarding—during this stage, and I credit the efficiency of creating these flows to the groundwork laid with the sitemap. In the future, I aim to streamline the action of "user clicks skip" into a single action, as it consistently leads to the same page.

Click arrows to enlarge

Design

Brainstorming

As this is a novel application, numerous factors required thoughtful consideration. My primary focus was to make the app appealing to adolescent kids, ensuring it is user-friendly and aligns with trends seen in other social media apps. Additionally, InkSphere had to cater to the preferences of adolescents, as revealed in interviews where most expressed a desire to track their reading habits and manage lists of books they've read or want to read. The design process commenced with the development of a feature map.

Feature Map

Click arrows to enlarge

In the project development process, I managed to incorporate all the essential features that were initially prioritized on my list. Unfortunately, due to time limitations, I was unable to extend the scope to include additional features that might have been considered desirable or beneficial. Nonetheless, it is my sincere intention to revisit and implement these supplementary features at a later stage, ensuring their inclusion and the overall completion of the project. This approach allows for a phased development strategy, ensuring that the core functionalities are in place first and additional enhancements are progressively integrated.

Low-Fidelity Wireframes

During the wireframing phase, II formulated a cohesive set of low-fidelity designs, gaining confidence from the well-defined screen concepts established in the sitemap creation phase. The aim was to create an app featuring an attractive design that adolescents would find user-friendly, with suggestions tailored to their preferences. In the final stages, I made subtle adjustments informed by valuable user feedback.

InkSphere Onboarding Process

Click to enlarge image

InkSphere Personalization and Reading Features

Click to enlarge image

Branding

I coined the name InkSphere. "Ink" reflects the roots of traditional storytelling, reminiscent of classic writing implements such as pens and quills. Meanwhile, "Sphere" represents an expansive and inclusive realm embracing diverse genres, perspectives, and readership—a vast literary space tailored for all teenagers. Additionally, I chose an analogous palette of blues to convey a contemporary yet serene aesthetic.

Usually, I'm not drawn to creating branding; I would prefer receiving branding and colors from a marketing team to integrate into my work. Surprisingly, this time, it was remarkably engaging, possibly because of my educational background, which made the subject resonate deeply with me.

Click to enlarge image

High-Fidelity Screens 

Click to enlarge image
Click to enlarge image
Click to enlarge image
Click to enlarge image
Click to enlarge image
Click to enlarge image

In general, I'm pleased with the appearance and ambiance of the frames. I incorporated a sign-up confirmation page to ensure users have clarity on the successful completion of their actions.

Testing

Methodology

I conducted in-person testing using my high-fidelity prototype. It proved intriguing to observe users' body language as they navigated through each task.

Results

Throughout user testing, all five participants completed tasks aimed at accessing the menu and contact information on the website. This evaluation allowed a comprehensive understanding of user interactions with these vital elements, providing valuable insights into the site's usability and accessibility in these specific areas.

Usability 

All users completed tasks focusing on:

  • Assessing how customizing onboarding boosts engagement by understanding individual preferences.

  • Evaluating the efficiency of the reading tracker interface for a more user-friendly experience.

  • Examining the effectiveness of content presentation methods.

Insights

  • One user mentioned that the three dots used to represent three screens were confusing as the user thought they should be able to swipe rather than press continue

  • Four users preferred the dark mode, one did not comment on it. 

  • All users stated that the reading tracker was simple and easy to understand

  • All users had suggestions for further features

Actionable Findings

  • High priority

    • Users want to see a comment and review section on the single book page.

  • Medium priority

    • Users would like to add further suggestions.

    • Users are interested in the possibility of creating book clubs with friends.

    • Users want to see a section for books similar to the one they are currently viewing.

  • Low priority

    • Users would like to see a "what's popular" section.

    • Users want to see a "see what friends are reading" section.

    • Users would like to see page numbers.

    • Users want a link to where they can purchase the books.

    • Users are interested in knowing how many books are in a series.

High-Fidelity Prototype

Click arrows to enlarge image

Iterations

User feedback (rated 4 out of 5) highlighted the demand for a feature allowing users to read comments from others. To ensure consistent design elements, I chose a grey background similar to the components found on the data screen.

Click to enlarge image
Click to enlarge image

In Summary

I consider this my most accomplished work so far. My proficiency in using Figma has notably strengthened, an area I aim to further develop. If I were to revisit, I'd prefer testing mid-fidelity screens and expanding the user pool beyond five for better insights and product enhancement. Additionally, I envision incorporating a content feed resembling TikTok, allowing users to share book reviews, albeit with strict moderation, given the app's young audience. With every project, I notice substantial progress, embracing continuous growth and evolution, and meeting the challenge I sought after.

Next Steps

  • Add Nice-to-Have Features

  • Add more genres to create a more personalized experience

Previous

Ozark Coffee