8 minute read
Project Summary
The Read Another app is a purpose-built digital tool designed to facilitate the tracking and management of children's reading habits and book-related activities. This app is tailored to support parents, guardians, educators, and children in creating a nurturing and engaging reading environment that fosters a lifelong love of reading.
Task: Research and design for a robust, full-featured app within an 80-hour time constraint.
Role:
UX/UI Designer
Duration:
8 weeks
Tools:
Figma, Adobe Photoshop, Maze
Deliverables:
Competitive analysis, User interviews, Personas, Wireframes,
Flow diagrams, Prototype, Usability study, High-fidelity
Problem
In today's digital age, children have access to a vast array of books and educational resources. However, parents, guardians, and educators often face the challenge of managing and tracking their child's reading progress, preferences, and developmental needs.
Solution
To address these challenges, there is a growing need for a user-friendly, all-in-one children's book tracking app. This app should enable parents, guardians, and educators to efficiently monitor a child's reading progress, discover age-appropriate books, and provide a platform for children to engage with reading material while making the entire process collaborative and enjoyable.
Discover
Research Insights
I came to the solution by conducting user research, competitive analysis, and secondary research to validate the problem( View: Research Ramp-Up). I first created a research plan and met with five people who had experience working with kids to discuss their thoughts on the problem. To reach a wider range of people, I posted a survey on social media.
Through my research, I discovered how to:
Empathize with parent’s experience with finding new books for their children.
Learned about the benefits of reading early in childhood.
Identified competitors and evaluated their strengths and weaknesses.
100%
of participants explained that reading young opens their imagination, expands their world, and prepares them for learning.
57%
of participants said they ask other parents for book suggestions for their children.
33%
of participants said they bought a new book that was too difficult or too boring for their child.
Define
Define the Story
I used a couple of approaches to understand my user’s needs and identify their pain points. By combining these tools, I was successful at diagnosing my user's current experience and defined a solution grounded in a holistic understanding of their needs and emotions. To shift the focus from a problem-centric approach to a solution-centric mindset, I created How-Might-We Statements to frame the solutions more in-depth.
Defining the story helped me determine the following key features:
Virtual Bookshelf: Users can create virtual bookshelves to organize and categorize children's books, making it easier to manage and access the reading materials.
Personalized Recommendations: Based on a child's age, reading level, and interests, the app offers personalized book recommendations to encourage diverse and engaging reading.
Reading Logs & Progress Tracking: The app allows users to maintain reading logs for each child, tracking the books they've read, including the number of books read, reading levels achieved, and reading time.
Discussion and Reviews: Parents and children can share reviews and discuss books within the app, fostering a sense of community and encouraging thoughtful reading.
Persona: Humanizing the research helped me empathize and bring awareness to my user’s motivations, frustrations, and overall goals. (Click the image for more information)
Journey Map: I learned how to have a holistic view of the parent by uncovering moments of both frustration and delight.
Storyborad: Storyboarding allowed me to communicate the flow and functionality of a solution in a more engaging and relatable way.
POV/HMW: I took an insight from my research, determined the need, and used my persona to discover the solution. This process also allowed me to start brainstorming what features were needed in the application.
Feature Map: These documents allowed me to think through different types of tasks users needed to take, what actions were important, and where the information could be accessed.
Define the Architecture
I brought clarity, aided in communication, and provided a structured overview of the user experience and system architecture with a site map and a user flow. These steps helped me identify potential pain points or areas where users might encounter challenges or confusion within the application.
Design
Visual Design
I started thinking about color palettes, typography, logos, and imagery to build a brand identity. My intentions involved emphasizing how color choices, imagery, and overall aesthetics evoke specific emotions and create a meaningful connection with the user. I used design principles such as balance, contrast, unity, and hierarchy to create a visually harmonious and well-organized interface to later test for usability.
The shape of the logo was also inspired by how a parent and a child will huddle close together as they read. Parents often say “read another” to their children to encourage them to keep reading, especially if they find enjoyment in a particular subject.
Read Another branding reflects the attributes of joy, learning, and bonding.
Wireframes
I utilized Figma, a collaborative design tool, to create wireframes for Read Another. I established the primary structural components including the placement of buttons, navigation bars, and content sections. I decided to break up the pages for each task flow so users could navigate through the different pages, ensuring a logical and intuitive progression. This structure especially helped me when I sought out feedback on the wireframes. I participated in group critiques with a UX community on Discord, discussed my design decisions with a mentor, and tested a prototype with real users. Seeking feedback ensured I refined the initial design, made necessary adjustments to improve usability, and addressed any identified issues.
Fidelity Concepts
Low Fidelity
I started by defining the basic structure and layout of my design using low-fidelity wireframes. I focused on key elements such as navigation, content placement, and overall screen structure without delving into visual details.
High Fidelity
Next, to elevate the wireframes to high fidelity, I added visual details. This involved incorporating colors, typography, images, and other graphic elements that contribute to the overall aesthetic appeal.
Scan in a book flow
The goal of the Virtual Bookshelf Feature is to organize and categorize the children’s physical books virtually. Once a child has a book they would like to start reading, the user can easily scan the bar code, search for the title, or enter the information manually. Once the database finds the book, the user can add it to their library.
Record reading time flow
In addition to a virtual library, Read Another also features Progress Tracking. One way to see progress is by tracking reading times. A child and parent can begin reading together and start a timer. When they are finished, they will update the page they are on and add the time stamp to the history log.
Search for a book flow
Read Another provides Personalized Recommendations in-app for users to add to their wishlist. These are books the user does not physically have yet but might want to buy later. This feature is great for parents who might not know what new books to get for their child.
Tested for Usability
In order to demonstrate how a returning user would use the app on a mobile device, I created a video of a high-fidelity prototype.
Using the high-fidelity prototype, I tested three task flows on eight users to measure their usability and identify any areas of improvement. The tasks were critical functionalities within the app and covered a range of user interactions, from organizing books to tracking progress and expressing interest in future reads. View the testing result graphic here.
Ensuring representation from the app's intended audience was crucial for obtaining relevant feedback. Five out of the eight participants were parents ( all adults between 30-48) whom I conducted remote meetings with to discuss the prototype. I used Maze.co to test with the rest of the anonymous participants. Due to the time constraint, I was not able to test with a child between the ages of 8-13. I believe if I was able to set up a meeting with a child and parent, I would get more reliable results.
75% Average Success
Task: Create a new shelf in your library and add your first book by scanning the barcode.
Observations:
Participants spent around 15 seconds on the explore page looking for the library. They said they thought the plus button would help them create a new shelf instead of going to the library screen first.
Creating a new bookshelf resulted in a high misclick rate of 81%. The prototype was not performing properly
77% Average Success
Task: Log a reading with your new book.
Observations:
The majority of participants completed the flow without any issues.
The only notable pain point was in the book sheld list. Participants clicked the mini book instead of the details button to open it.
62.5% Average Success
Task: Search for a new book to add to your wishlist
Observations:
Participants had a lot of questions about what makes the wishlist and library different.
Comments about adding the search bar on the explore page were often brought up.
The icons in the prototype did not function properly, resulting in poor intuitiveness. 66.7% misclick rate.
Priority Revisions:
Errors in how the prototype was built were a big setback for the usability test. For the time I had left, I focused on improving the links between screens and components on Figma. I changed the plus icon on the explore page to a search icon instead since it was the most obvious pain point. Overall, people responded well to the tasks and enjoyed the concept. The usability test helped me learn how crucial it is to prepare the prototype to get the most out of the time with testers.
If I had more time:
I would animate the splash screen to help introduce the app in a more fun way. With added movement, the brand will feel more playful.
I would test other cool features such as the share button and the comment & review a book function.
I would further refine the design and make refinements to the process of adding new books.