Tiny Tales
Helping parents find the right books for their children
Introduction
This was a modified Google Ventures Design Sprint in participation with Bitesize UX for the Springboard UI/UX Design Program. Tiny Tales is a new startup where authors and illustrators can publish children's stories for parents to read to their children.
Project Deliverables
User Research
UX & UI Design
Usability Test
My Role
UX Designer
UI Designer
UX researcher
Duration
5-day Sprint
1-day Iteration
Tool
Figma
Problem
As they've grown their library of stories, parents have expressed that it's been difficult and time consuming to find the right stories to read to their children.
Project goal
Tiny Tales app makes it easier for parents to find a great story to read for their children by offering parents a simple way to filter choices based on their specific needs.
Mom, I learned animals at school today, can you read a story about animals before we go to bed?
Ok! Let's find a good book！Ummm, this is too long to read...
Mom, how about this one? The cover looks so funny! Oh this one looks interesting too!
Ummm...this one is too childish! It's really hard to find a good book about animals. We only have 10 min to read, it shouldn't take too long to read.
Right here, mom, it's easy. The app is called Tiny Tales, it's made specifically to help parents find the right book to read to kids. Let's try it!
Thank you mom! I love today's story, now I have more understanding about Safari Animals. Good night mom, Love you!
...
Design Process
Day 1
Understand the Problem
Solution Map
Day 2
Lightening Demos
Crazy 8s Sketching
Solution Sketch
Day 3
Design Decisions
Storyboard
Day 4
Visual Design of a Prototype
Day 5
Test &
Iteration
Day 1 - Map
Interview Highlights
After reviewing 10 interview highlights and 1 interview record, Tiny Tales discovered that parents struggle to find a "just-right" book to read to their children. (The interview is provided by Bitesize UX)
"My kids like to browse for a story to read with me... once they find one they like, I read the first few pages to make sure it's the right age level for them. If it's too childish, or too hard to comprehend, they will lose interest"
- Maria
Children: Jack (7 year old) and Angela (5 years old)
"I usually let my kids pick a topic that they like (dinosaurs are big right now). Then I try to scan through the book to see how long it is. Sometimes we just want a quick book before bed...if it's long, I usually have to stop reading before it's over."
-Dan
Children: Dylan (6 years old) and Nina (4 years old)
"I obviously want to read something that my daughter will enjoy, but I also try to make sure there's a little education or lesson involved that we can talk about it. It doesn't have to be a textbook--- just something with a little substance for us to talk about together"
-Ron
Children: Samantha (5 years old)
Affinity Map
To synthesize the qualitative data gathered from user interview, I created an affinity map to get a better overview, which helped me identify valuable insights and needs.
Persona
Claire
34 Years Old
Mother of: James, 6 years old
Kayla, 4 years old
Behavior
-
Claire reads to her children at least 3 times a week, usually, before she puts them to bed.
-
Claire really values this time - she thinks reading to her children is an important part of "family time", and that using their imagination is a good break from watching TV and playing her iPhone games.
-
Claire also knows that reading for her kids is a good way for them to learn and ask questions about certain things they're interested in.
-
Claire tried to find stories that her children will love, so they will appreciate reading from an early age.
Frustrations
-
Claire often spends more time looking for a story to read to her kids than reading it!
-
Even when they find a story they agree on, Claire has to spend time quickly flipping through it to see how long it is, and if it's written for the same age group as her kids.
-
Claire wants her children to enjoy the story she's reading - but she also likes when it has a little educational values. She spends time reading through them beforehand to see if they are just purely for entertainment, or if there are some learning points that her kids can benefit from.
Goal
-
Claire wants to spend less time finding a great story to read to her children.
-
Claire wants to find stories that both of her children will understand and enjoy.
-
Claire wants to able to find stories about certain topics that her children are interested in, or learned about in school.
-
Claire wants to find stories that her children will find entertaining, but that also contain some learning lessons or education value.
How Might We...
After I gathered users' insights, needs, and goals from affinity map and persona, I use How-Might-We (HMW) Questions to define the challenge.
How might we help parents save time finding the right stories for their children?
How might we help parents discover new books that relate to their specific concerns?
How might we help parents find stories that both match children's comprehension level and interests?
How might we help parents easily find a "just-right" book to read to their children?
User Map
On day one I started by sketching some possible end-to-end experiences of how a user moves through my product.
Based on the fact that time is a big concern with parents to find the right books, I decided to move forward with the user map shown below. This concept offered users a quick and easy way to find books in 3 steps: 1. targeted recommendations based on user's information 2. more filters by specific needs in search page; 3. summarized information shown before starting to read books.
What I choose
Day 2 - Sketch
Lightning Demos
I gave myself 25 minutes to take a browse of Internet, I reviewed multiple sites that help people find books, movies, plants, etc. I wanted to observe how these different products organized a variety of content to be most accessible to the users.
Crazy 8s Exercise
I used the crazy 8's method to draw 8 conceptual one minute sketch solutions.
To save parents' time to find the right book, the most important thing is to filter the search based on their specific needs, so I decided to use the second sketch of the filter screen. The second important thing is having as much information as possible at a glance would be an efficient way to save parents' time. So the fourth and the fifth sketches both show the summary of the book before they start reading.
Solution Sketch
Home Explore page
After users finish the onboarding questions, the app picks some books based on their information.
Filter Results
The screen shows a list of book covers relevant to the filters set by the user.
Main Screen for filtering a match
Users can filter a match by category, language, story length, educational level, topic, etc.
Book Summary
After kids pick the cover, parents can easily get the book information at a glance.
Day 3 - Decide
Storyboarding
After all the ideating and sketching from the previous days, it was finally time to pick the best solutions and sketch a storyboard of the red routes for the prototype.
Tiny Tales users will start at an onboarding screen that allows them to fill in some information, like name, age, weekly goal, educational level, etc. Users are then brought to a customized explore screen based off of what they selected during onboarding. A search feature with detailed filters allows the user to seek different or specialized results. After choosing a book, users go to the summarized information page and then start reading if they found the right book.
2
1
3
4
5
6
7
8
9
10
11
Color Palette
I decided to use colors that are bright and also echo the existing logo color.
Dark Purple
521692
used for background of side navigation bar
Light Purple
AE8DDB
used for main elements, background and buttons
Orange
FDA000
used for search icon and filter selection
Dark Grey
555353
used for text
Day 4 - Prototype
Initial Prototype
Since the goal is to make it easy for both parents and children to use, I tried to make elements as simple to understand as possible without overloading areas with too much information. I also tried to implement white space where I could to give the app a more breathable look.
Day 5 - Test & Iteration
Usability Test
On day 5, I conducted both in-person and remote moderated usability tests with 5 participants. All participants agreed that the app is uncomplicated and easy to use, even though not all the prototype is functioning.
Take-Away Quotes from User Testing:
"It's engaging for kids because the colors are bright and the design is cute"
Julien
"I can't tell what filter are selected when they are collapsed."
Yike
"My kids would like to pick books from covers they like, but I would like to read more information at a glance"
Jay
"It's a great app for both parents and kids."
Galin
"How can I choose books which are read or unread?"
Shiyi
Redesign
01 Users were unsure of selected filters after filter rows are collapsed
Issue:
Users were unsure of what filters they chose when the row is collapsed. They expressed interest in being able to edit (remove) filters they chose before they apply.
Solution:
I added bubbles with "X" beside the filter name when the row is collapsed. I also add these filter bubbles to the results screen.
02 Users did not get enough information at a glance
Issue:
There is not enough information shown under the book cover, when kids pick the book cover, parents would like to know more information about the book at a glance.
Solution:
I added story length and educational level next to the book name and rating, these two pieces of information are good to know for parents before starting reading.
03 Users want to view more book covers
Issue:
Users complained about keeping swiping right to see more books, they would like to see more book covers in the result screen without swiping too much.
Solution:
I changed the view type by putting more book covers in the result screen, so that users can reduce scroll times.
04 Users need to filter books which are read or unread
Solution:
I added a book status filter in the filter page so users can choose read or unread books.
Issue:
2 users mentioned that they want to filter out books which are read already so that they can only research new books to read.
I reviewed my notes from user testing and took a closer look at my design decisions, I decided to do another iteration within the time allotted by making slight adjustments.
Next Step
This sprint was designed to address issues with the selection and navigation of e-reader apps and to create a viable solution to be able to pick the best reading option. Most users said they would like to use this app with their children together due to the simplicity and easy to understand images.
If I had more time, I would like to do more design on a library feature, it could be a feature to borrow or rent books, or a parent community. Also I would like to fix some UI issues, some icons and components could be more accurate.