Contents

Click on any part of the process to jump to that section on the page

Day 1:
Map

Day 2:
Sketch

Day 3:
Decide

Day 4:
Prototype

Day 5:
Test

Day 1: Map

To explore potential user journeys, I wrote out the steps they might expect to take when choosing a book, as well as the context surrounding it. This was to help decide what part of the process to focus on for the sprint, and what screens and elements would be necessary for a prototype. Below are three timelines I wrote out, with the last one being the most simple, and becoming my focus. 

Parent → sits down with kid(s) to read → opens app → selects categories → views book options → chooses potential book → views book info → opens & reads to kids → closes app

Research Recruitment

My final task of Day 1 was preparing for Day 5. I personally reached out to 5 people who I thought might be willing to help with my research. I recruited participants who have either raised a child, babysat, or tutored, to make sure they would have some degree of experience with the subject. 

Day 2: Sketch

Lightning Demos

Before I started sketching, I gathered inspiration from other interfaces with functions that TinyTale might use. I examined screens from Rebel Girls, Blinkist, Kindle, and Netflix, and organized them in this spreadsheet. This helped me decide that for this sprint, I would go for an image-based interface, showing off book covers. I started to consider features like personal bookshelves and lists, user profiles, and recommendations.

Crazy 8's

For the Crazy 8’s exercise, I sketched 8 potential app screens in 8 minutes. I focused on systems of searching for and sorting books, as well as viewing book details. I chose to move forward with the first sketch, as a simple method of viewing several books at once, with their categories listed on the top. 

More sketches:

This sketch of the bottom navigation bar shows what I have chosen to be the app’s main sections:

• Readers: User profiles where parents can set up an icon and nickname to represent different children, and automatically set their reading level and interests later on. 
• My Bookshelves: Users are able to organize books they’ve enjoyed or want to read later onto different “shelves”.
• Library: All of the available books and stories, which can be searched and sorted.

Timeline

After choosing a main screen from the Crazy 8’s, I sketched the screens around it. I decided to use my main screen, a book list, as the first screen, so users could be presented with new book options right when they open the app. The next two screens are filtered search results, and more information on a selected book.

Day 3: Decide

With an established path for a system of sorting and choosing books, I sketched out all the screens in that task flow. I redrew the three sketches in the timeline from Day 2, to force myself to think about each element on them again. In doing this, I decided to switch the “book information” screen from a pop-up to a slide-up effect. Then I drew out the screen to set user profiles and preferences, as well as the screens for actually reading and finishing the story.

As I sketched, I pared down the sorting criteria for books to 3 elements: 

• Guided Reading Level: I read about several systems for defining the difficulty level of children’s literature, and the two most popular were Lexile and Guided Reading Level (GRL), with both being commonly used on the Scholastic and Barnes & Noble websites. I decided to use GRL, because it was much easier to quickly understand, and a tutor I spoke to said she had seen it used for students. GRL rates difficulty level on a scale of A to Z. For example, Dr. Seuss books are rated level J, and the books in the Harry Potter series are rated V—Z.
• Educational Content: TinyTales hosts some intentionally educational books in their library. In the preliminary research, several users expressed that they wanted to be able to search for educational books, or books that aren’t necessarily informational, but still contain a lesson. Other times, they are looking for bedtime stories that can be silly or good for winding down. I came up with a scale rating of 1, 2, or 3 lightbulb icons to show the educational content of the book.
• Reader: A profile, set before the parent searches for books. The reader would be designated with an icon (chosen from a selection provided in the app) and nickname, which the parent can set. With the Reader feature, a parent could set a child’s reading level, preferred level of educational content, and any favorite types of stories in advance.

Books would also be tagged with genres, themes, and elements that come up in the book, to make for even easier searching and categorization.

Day 4: Prototype

I used Sketch to build the most crucial elements of the user flow into a working prototype. I made the home screen (book suggestions), the filtered search results page, and a book’s information page. Since the task was to see if people could easily find specific books to read, I did not feel it necessary to build the pages where one reads the book or sets user profiles.
‍
Prototype Screens:

I used a dark theme so the screen would be more optimized for searching at night; but a dark blue background instead of black to feel more welcoming. I used white for descriptive elements, yellow as an accent color to indicate tags and the active page in the navigation bar, and blue for interactive elements. To make the app more realistic, I incorporated pictures and information from real children’s books. 

Day 5: Test

On Day 5, I ran a usability test with each of the participants I recruited on Day 1. Four of the tests were conducted in person, using my tablet to show the product to scale. The fifth test was conducted over Zoom, using screen share. 
‍
During each test, I explained to the participant that TinyTales is an app that hosts a variety of children’s books and stories, intended for parents to read to their children. Then I let the participant explore the screens at their own pace, explaining to me what they saw and their interpretation of the elements on screen. I prompted them to show me how they would find a specific book to read to a child, and how they would proceed to read it. 
‍
After just one test, I realized that understanding the sorting criteria and their corresponding icons was going to be a problem. The participant understood the process of navigating through their task, but had to guess what the icons meant. Their guesses were incorrect. 
‍
I had wondered whether this would be a problem, and didn’t want to waste time in the following usability tests, confusing testers with factors that could potentially be easily explained. To address this, I quickly added an introductory screen to the app, including the three sorting icons, their labels, and definitions. 

Successful Features:

• The navigation menu was understood. Users were able to correctly interpret what would be on the “Readers” and “My Shelves” pages.
• Function of sorting was intuitive. Users instinctively used the drop-down menus and search bar.
• Testers knew to press a book to view more information.
• “Read it” button function accurately interpreted by all testers.
• “Add to shelf” dropdown button next to “Read It” button: Confidently accurately interpreted by 4 out of 5 testers. The last one overlooked it. When prompted to explain what it would do, said they weren’t sure, but guessed correctly.

Needs Improvement:

• Introductory screen: This attempt to explain the icons didn’t work out. One tester understood the elements while reading the descriptions on this page, but forgot what they meant by the end of the test. Another tester immediately clicked the “Start Reading” button without looking through the page. And finally, another user was confused, being presented with the information right at the start, saying she didn’t know what it would end up being for, and not being able to apply the information once she entered the app. 
• Lightbulb icons to denote educational content: Testers interpreted the “Edu.” label to mean “Education level” or “Grade Level”, and a few were confused by the seeming redundancy of that criteria along with “Reading Level”. 
• Info button: In case users were confused by the sorting labels, I included a question mark button, which would trigger a pop-up explaining them. No test participants pressed this button. One noticed it, but didn’t press it, saying that “Help buttons aren’t usually helpful.”

Summary

Overall, this design process was able to achieve its goal of organizing the books and stories on TinyTales and giving parents a mechanism to search for, sort through, and save books they might want to read. However, the process of organizing search criteria still needs improvement. In a future iteration of this system, designers should brainstorm different ways to label and explain the search criteria, and perhaps try out different labelling systems, other than using Guided Reading Level and lightbulb icons.

Watch Prototype Deomonstration