TinyTales is an iPadOS app that catalogs children’s stories from independent authors and illustrators. As the TinyTales library grows, it is becoming difficult and time consuming for parents to find specific content.
TinyTales wants to make it easier for parents to find a great story to read to their kids in the least amount of time possible.
This student project was a modified 5-day design sprint assigned by Springboard. The goal of this project was to gain exposure to lean UX processes and learn how to rapidly build and test high fidelity prototypes. I chose this particular challenge from BitsizeUX because I know a lot of people within the target demographic and would be able to quickly recruit test participants within a short period of time.
This was an independent design sprint so I didn’t have a team to collaborate with. I was responsible for synthesizing existing research, mapping out userflows, wireframing, visual design, rapid prototyping, and conducting high-fidelity user testing.
34 year-old Mother of James (6) and Kayla (4)
The user persona was provided for this assignment and gave me a broad overview of Claire’s behavior, frustrations, and goals. I learned that she perceives story time as a way to spend quality time with her kids and inspire a love of reading and learning.
Claire values stories that are not only entertaining, but educational too. She struggles to find stories about specific topics of interest or to support concepts her children are learning at school. It is also challenging to find stories that are age appropriate and relevant to her kids’ current life experiences.
Claire’s biggest pain point is that she spends more time looking for a story to read to her kids than actually reading it. She would love to be able to quickly assess how long the story will take to read too.
The BitesizeUX Design Sprint Challenge included: challenge goals, project constraints, Claire’s persona, quotes from ten user interviews, and a 9-minute audio of a user interview. Initially, I made a bullet point list to synthesize the research highlights but converted it into user stories so that I could better understand the pain points from Claire’s point of view:
An affinity map helped me rough out the phases of Claire’s user journey and pin point some of the major themes that emerged from the research:
Most parents read to their children right before they go to sleep so it’s important for them to have an expectation about how long the story will take to read. Often, parents are also reading to multiple children who range in age so finding a story that will accommodate varied interests and comprehension levels is also a concern.
While reading helps stimulate imagination and provides family-centered entertainment, most parents also want to gain some educational value out of their stories. They seek topics of interest that have some substance or are relevant to the child’s current life experience.
Parents rely on each other and schools to get recommendations that are age appropriate. They tend to purchase a lot of books or swap them with family members and friends.
I performed a lightning demo to explore existing solutions from other companies that are addressing similar problems.
My first instinct was to perform a Google search specifically for children’s reading apps. This yielded some niche results like audiobooks, interactive reading, and story personalization products.
One of the apps that stood out to me was Tales2Go, a streaming audiobook service, because it was promoted by Scholastic Books, is used by educators, and has an extensive library of stories that are categorized by age, genre, learning level, topics, sources, etc.
Some remarkable features were:
Next, I searched for Amazon Kindle in the Apple App store and discovered multiple subscription based reading apps. Nook caught my attention because it promoted collections and sharing recommendations. This made me think about what some of the users said about swapping old books with their friends and families:
I also wanted to explore apps that allow people to discover and share new content. Spotify immediately came to mind due to its mission to help people discover new music.
I used a technique called Crazy 8’s to ideate some solutions for my critical screen. The goal was to produce eight different solutions within 8 minutes. I played with different ways that I could display the menu home page and offer filtering options for the search. Since this was the focus of Claire’s pain points, I designated it my critical screen. The exercise felt clunky and frantic but I tried to come up with different visual hierarchies for the information.
The lightning demo exposed me to different layouts and design features so that I could determine my critical screen.
However, since I didn’t define one until after the exercise, I decided to backtrack and go further in depth to study library and search features on other reading apps. This time, I downloaded them to an iPad instead of just relying on my phone.
I looked at three more apps to collect more ideas for my critical screen: Kindle, Apple Books, and Epic, a reading app for children. Epic had addressed some of the problems I was trying to solve so it was really helpful to study the architecture of a direct competitor.
My final 3-panel sketch solution:
To help me frame out an outline for the storyboard, I created a rough site map and broke the main navigation down into five tabs:
I decided to start my storyboard with an onboarding task because the app will customize user recommendations based on each individual profile preferences. I drew inspiration from Netflix’s “Who’s Watching” screen. I felt that it was important to set the tone that the user will first benefit from automated content suggestions, then a more targeted search can be performed within the dashboard.
I discovered multiple ways to help parents like Claire quickly find stories to read their children:
I felt that it was necessary to partially prototype in all these features to demonstrate how they synergistically solve Claire’s problems.
First, I wireframed my screens using Marvel since it offers a built-in iOS UI kit that I could easily drag and drop into place. This made it easy to quickly create a medium-fidelity framework so that I could start making some design decisions.
In this early stage, I had five pages and kept the dashboard and search features separate. I borrowed this idea from the Epic app:
Before I linked together the prototype, I decided that the dashboard page should include the search rather than treat it as an entirely separate page.
The concept behind the dashboard is to be a place of discovery so it felt more appropriate to consolidate the two pages so that it would be more intuitive to the user.
Since I had multiple ways that parents could source information, I found it difficult to narrow my prototype down to one particular flow since they all interconnected. Also, without a team to guide the process, I wasn’t quite sure of my stopping point.
This was the first time that I used Marvel to prototype and although it was fairly intuitive, I found myself longing for some of the more advanced design features that I am accustomed to in Sketch. I had already wireframed all my pages in Marvel when I came across the Marvel plugin for Sketch. Linking the two will certainly speed things up in the future.
I also was limited by my free account allowances and was frustrated that I could not access the layering options in the prototype mode. I had to build out additional screens to make my prototype work which cost me some additional time.
I was given a one-color logo to work with so I pulled the color palette from there and chose an Open Sans font because I felt that it played off well with the elementary design tone and would be very clean and easy to read.
In the original format, the artwork of the book sits inside a purple circle so I used that as inspiration for my design elements to align with the brand.
Drawing from some of the lightning demo inspirations, I kept the UI simple and understated. The purple color ended up being a strong contrast for the colorful image tiles. However, I chose to add icons to the button labels to break up some of the monotony of the design:
Since the app is an aggregator of stories, I wanted the color tiles of the books to be large enough to quickly browse through and engage a child in the selection process. I downloaded Google images to comp in the artwork since I don’t have access to an existing library.
Since the goal was to rapidly prototype, I performed one round of user testing with five participants. All of them were mothers between the ages of 35-45 with children ranging from 1 to 10 years of age. Most of the mom’s were only available in the evening so it was impossible to test everyone in one day. Testing took a total of 4 days to complete which turned a 5-day sprint into eight days.
My testing goals:
On the book preview page, I asked the participants to add the book to their library so they could read the story at a later time. Half the participants hesitated when looking for the appropriate button to tap.
I think regrouping the buttons would help fix this problem so that all choices are laid out in one place. I also changed the primary button label from “Select” to “Read Now” so there is more distinction between the “now or later” individual options.
When I asked the users to talk me through their expectations on the Book Swap page, a few of the participants were initially confused by the language of the top tabs.
I modified the language and changed “Borrowed” to “Received” and “Lent” to “Sent.” These labels felt more action-oriented and direct.
I believe that performing the lightning demo really helped me create an interface that felt intuitive to all of the test participants.
Although Netflix wasn’t one of the companies I focused on in that exercise, it inspired foundational ideas such as automated content recommendations per user. The search filters were then layered upon that concept to provide more control to the experience without having to adjust profile settings.
The critical testing issues involved labeling, interactive planning, and grouping & establishing hierarchy of like elements.
Here’s a closer look at these troublespots:
Once the users applied settings to each filter, they didn’t take any further action. To produce a search result return, the action would be to tap the “Search” button. However, all of the participants said that they expected to see the search results automatically update within the dashboard after they tapped the “Applied Filter” button within each dropdown menu.
This issue could be easily solved in development once the code is applied, but worth noting because the interaction is obviously an important part of enhancing the user experience in this particular wireflow. Other possibilities might be to move the search button below the filters and/or change the label of the “Apply Filter” button to something like “Save” or “Close” to verify that the selected filters were saved.
When I asked the participants to get back to the Dashboard without clicking the text backlink at the top of the page, they had difficulty identifying that “Search” would take you back to that starting point
Change the “Search” button label to “Dashboard” to stay consistent with the contextual language in other areas of the app.
The goal for this assignment was to help parents find great stories to read to their children in the least amount of time possible.
Once I understood the user’s concerns (topic selection, story length, finding appropriate concept, and providing a fun but educational way to bond with their children) and their behaviors (sharing ideas through school networks and friends), I developed a solution that allowed them to:
Borrowing ideas from existing apps helped me to organize and customize the TinyTales experience and move faster towards an overall solution.
Testing revealed that the interface aligned with common user mental models. However, I had some issues with finding the right language to connect with the user on some of my navigational labels. This has taught me to pay more attention to learning familiar labels as I continue my study of UI patterns.
Although I did not have the benefit of working with a team for this design sprint, I valued the experience of leaning out the design process and learning how to quickly iterate and execute my ideas. In the past, this has been an area of struggle so I enjoyed rising to the challenge.
