MOST RECENT WORK
MYSTORY
PROJECT OVERVIEW
The Problem: Children who are voracious readers crave new stories around bedtime every night. Parents of these children find it difficult to keep up with the demand in providing new and interesting stories. How might we engage a child's imagination and love of reading while fulfilling a parent's need for easy access to new, entertaining stories?
The Solution: Build a child-friendly app that centers the reading experience around the child's interests and let them be in control of the story creation process.
My Role: Proto persona creation, user interviews, usability testing, site map, onboarding, badges design, front-end development coding promotional webpage with responsive design using HTML/CSS and Bootstrap
Tools: Figma, Figjam, Visual Studio Code, Github, Canva
Team: Thomasina Watts (UX/UI Designer), Alyssa Emiko Hori (UX/UI Designer), Komal Rao (UX/UI Designer), Reanna Pettigrew (UX/UI Designer), Rachel Lee (UX/UI Designer)
Timeline: Dec 2022 - Jan 2023 - three weeks
Constraints: Create an app from research phase to hi-fi prototype phase in three weeks.
RESEARCH
Who is this for? Children that love to read and parents looking to provide reading material to their child(ren).
Research: We began this phase of our project by conducting qualitative user interviews on children between the ages of 6 - 11 and the parent(s) of these children, asking questions that pertained to reading habits and preferences. Questions about creativity, motivation, pain points and desires were also included. Some examples of questions asked to children:
- How often do you read for fun?
- What is the last story you read for fun?
- Tell me more about why you read that?
- What is your favorite story?
- What kind of characters or cartoons do you like?
- Why do you like those?
Some examples of questions asked to parents:
- Does your kid enjoy reading books? What do they enjoy most about it? Do they find anything missing / or anything that can make their experience better?
- Have you tried any story time or reading apps for your child? What was your experience with them (pros/cons)?
- Do you spend time reading stories with your kids? Could you share your experience?
We found several key insights in our research: 43% of children interviewed wanted new stories daily, 22% enjoyed seeing their own characters in classic renditions of familiar stories, 21% enjoyed reading stories over and over, and 14% were considered too young to have a preference and enjoyed everything they read.
For parents, we discovered 42% wanted to improve their child's reading ability, 19% wanted a new way to keep their child entertained, 22% wanted a medium that would provide educational and/or moral values, and 17% wanted a way to help their child wind down for bed.
DEFINE
With our insights and research from interviews with parents and kids, we examined key features these groups wanted to see in our reading app.
Our process in defining our product and research was quite involved. First, we compiled insights from interviews with parents and kids into affinity maps for each of these groups. Some key observations we made here were:
- Children read on average for 20 minutes a night at bedtime.
- Children enjoyed being read to or having narration in stories.
- Children enjoyed cartoon drawings and illustrations were often the favorite part of the book reading experience.
- Children enjoyed a wide variety of stories and often got bored of reading the same stories over and over.
For parents, our key observations were:
- Parents wanted their child reading stories with morals and values attached.
- Parents found buying physical books often became expensive over time.
- Parents noted their children loved to draw and often came up with little stories based on characters they would draw.
Every step of the way, we kept in mind features both parents and children wanted to see. Based on our observation that children often get bored reading the same stories over and over, and that physical books are expensive to accrue, we had the idea to utilize artificial intelligence in generating stories. Based on our observation that children often came up with a story surrounding a character they drew, we wanted to figure out a way to turn drawings into characters to add to AI generated stories. Parents overwhelmingly mentioned their kids like to read at bedtime. Based on this observation, we knew from early on that we wanted the end product to have a relaxing, dreamy feel in order to cater to reading at bedtime.
With our affinity maps fleshed out, we transformed our data into an I Like, I Wish, What If spread, took a dot vote on our favorite features and then made a feature prioritization matrix to narrow our scope to fit our time constraint for the main features we wanted to include in our new app idea.
EMPATHIZE
After defining our project, we were ready to empathize. We created a primary persona and empathy map for Ava Thompson, aged 7, from Oakland, CA.
Our secondary persona was Nia Holmes, wife and mother from Santa Clara, CA.
IDEATE
During this phase of our project, we created a storyboard, user flow, and site map of our new app, MyStory.
PROTOTYPE
Next, we were ready to move onto the wireframes and prototyping phase of our project. We knew from early initial research that children tend to access apps via a tablet screen, and that most of the time, tablet screens are oriented in landscape mode so children can hold the device confidently. Nielsen and Norman Group points out that childrens' hands and finger dexterity is not the same as an adult's and the wider screen area of a tablet helps children make use of their whole hand versus using precise finger and thumb motions on a mobile screen. We built our wireframes and prototype around this observation and decided to have a vertical side navigation on tablet screens to free up space in the landscape mode, but also to make use of lines and rows in a way that engaged children's use of spatial recognition to reduce their cognitive load, making things visually engaging for a younger audience.
We knew we wanted to keep things simple and intuitive based on the age of our typical user. We eventually narrowed navigation down to four primary sections: My Stories, Characters, Achievements and Profile after much testing, as explained in the Iterations section below.
Based on the data we collected in our first round of research, we envisioned our app to have its main feature as giving children the ability to create their own story using a very simplified version of AI generating technology. We also envisioned incorporating a feature that allowed children to upload their drawings and turn them into cartoonish characters to include in the stories they would generate, if they didn't want to use some of the preloaded characters built into the app itself.
One goal of ours as a design team was to make sure the user didn't get bored. To engage children's imagination, we envisioned including a feature in our navigation to see achievements earned (badges, levels, and points) while interacting with the app, such as, completing stories from start to finish, reading for twenty minutes or longer, or for future iterations, sharing their stories with a MyStory community. In the profile section, we included features like changing the theme of the app itself (to prevent boredom). We also wanted to give parents control over the app, so we included a parental control section that helps tailor the parent's goals to the child's experience (parents can set reading time goals, morals/values featured in the AI story generator, or screen time limits).
Hand sketches of early concepts:
Brainstorming early lo-fi prototype screens:
TEST
We used the same participants for our usability testing as we did for our user interviews. During the first round of testing on the lo-fi prototype, we found that we were designing too much with adults in mind, and this was evident when tested on children. We had to get into the mindset of a child and this proved to be difficult. We needed to simplify navigation first and foremost to make it intuitive for our young users. We found out quickly that we were designing our navigation for adults in mind, not children. We took all of the key findings from the first round of usability testing and made two separate lo-fi prototype versions focusing on navigation variations (named version two and version three), this time using the lens of a child as our guiding principle. We then took a vote as a team on which of these lo-fi versions to test with users, and version three won.
We achieved much better results with the second round of testing with version three and found the navigation was much more intuitive to not only younger users, but also to feature the key functionalities of the app itself, but it wasn't finalized, we still needed further testing.
During this round of testing, we also found through user feedback additional features to include in our mid and hi-fi prototype we initially hadn't considered. For example, including an option to have stories narrated to the child in a customizable voice, or giving the option to the child to read the story themselves.
Version 1 navigation:
Version 3 navigation:
ITERATIONS
We made iterations using A/B testing to the navigation, starting with our initial four sections from our lo-fi prototype: Home, Library, Achievements and Profile in version one (as seen above), to My Story, Characters, Badges and Profile in version three (as seen above). We then conducted A/B testing of version one and three and this gave us our final version of: My Stories, Characters, Achievements, and Profile for navigation options.
Seeing as how our app's main functions are to generate a story and create characters to add to said stories, it was only natural that we included an intuitively worded story section and character section in navigation for users to easily switch between the functions of the app. We renamed the Badges section to Achievements after realizing the wording with Badges wasn't quite as intuitive for children to understand this was the gamified section of the app. We kept the Profile section the same, adding the customized experience of the user's name being featured here so younger users would understand this as the section of navigation they could find information about themselves.
The steps in character creation while generating a story was our second iteration, and we included reading difficulty level and reading mode (i.e., reading or listening to the story) in the final step of generating a story based on user feedback we had previously gathered. These iterations happened after our third round of usability testing and listening to what the user, both children and parents, wanted to see in the final prototype. About 40% of all users tested were concerned with the reading capability of younger users being accessible in the app and nearly 25% of parents wanted the freedom of their child using the app unassisted, so these iterations to either listen to a story or read it out loud and choosing the difficulty level were welcomed features among users. It was also here that we realized we had initially wanted to include a reading difficulty option in our early prototype but with the time constraints we were working under, we gleaned over adding this feature initially.
It was during our iteration process that we further ideated some more helpful features in the story reading portion of the app. Based on the feedback that children and parents wanted reading accessibility throughout the app, we ideated adding features of word highlighting while the story played and word definition in each story to assist younger readers, as seen in the Final Prototype step below.
FINAL PRODUCT
One of my roles in the final prototype consisted of designing the layout of the onboarding process, as seen below. The onboarding process gives users the option to login or set up a new account, and walks them through a quick series of app features if they choose to set up a new account. The screens highlighting the app features were kept concise and minimal for a child to easily comprehend.
The final product has two main functions: generating a customized story using AI technology, and uploading drawings of characters to add to a generated story. Between these two functions, endless possibilities of story creation are achievable. The AI is simplified for a child to use, consisting of a step where details for topic and theme are made by shuffling through preloaded options. The AI experience is further developed by a series of open-ended questions that the user can choose to answer using a keypad or by clicking a speaker icon to use voice recognition to answer the questions. While answering the AI's questions, we wanted to account for children of varying ages that are able to spell and type and those who aren't there yet to have access to the app, that's why we included the option to type or speak answers.
Some of the AI questions are:
- How are your characters feeling today?
- Do they have any superpowers?
- Where should your story take place?
- What do you think happens in the end?
In the last step of story generation, the child can choose a story length between 5 - 20 minutes, the reading difficulty level, and they have the option to have the story read to them by narration or to read the story themselves. There are different voices available if they choose narration.
The app then generates a story based on the answers given. The story summary screen is seen before clicking on the Start MyStory button to begin reading.
Keeping in mind the accessibility of the app for various levels of reading among users, we included a word highlighting function in the prototype so readers can track the words on the screen. We also included a word definition feature so users have the option to click on any word to see the definition, both of which were features added after additional usability testing. Parents and children were especially fond of these features when the final prototype was unveiled to them.
Once a story is created, it is stored under the MyStories tab in navigation. Users have the option to re-read their stories any number of times they want. Users can also click the heart icon to add that book to their Favorites section, and under each book they can see their reading progress. Finished books are added automatically under the Finished tab, as you can see below.
For the character portion of the app, users can take a photo of a drawing or picture and the app will render it into a character to use in the story. The character is animated and is intended to move through the story like a cartoon. Characters are stored under the Characters navigation section when created for future use or editing. There exists open source animation software available for commercial use that we took inspiration from to make this portion of the app a reality. Below you can see the steps in creating a new character.
I designed the achievements and badges section of our app, as you can see below. I gained inspiration for developing the achievements section from current popular children's video games. I was tasked with creating the badge icons and the achievement titles/descriptions. As a former teacher, I used positive wording and attainable goal setting in choosing the titles and descriptions of the badges and points earned to keep the feel of this section fun and encouraging. The achievements section is more aimed at proficient, grade-level readers, but also sets goals for those building their reading strength, as seen below.
LESSONS LEARNED
Designing for children is challenging because they develop so fast and the stages of development change roughly every 2 - 3 years of age. An application feature for a 5 year-old is going to be much different than that aimed at an 8 year-old. Designing an app that spans over multiple age ranges takes incredible attention to detail and several rounds of testing. Testing with children is limited to their attention span and level of shyness. A kid-friendly joke in the beginning of interviews or testing can go a long way to establishing a connection. (I like: what time do ducks wake up? At the quack of dawn.) However challenging, designing for children is equally as fun and sparks a level of creativity often forgot about in adulthood.
Future iterations of this app could include multiple languages to make the app accessible to ESL children, and different themes and color palettes to give the user a highly customizable experience. A subscription feature could unlock a more in-depth AI experience, more preloaded characters, access to the app store and possibly even access to a MyStory community to share and read stories within a friend group. Collaborations between the app and children's authors and illustrators could be incorporated to bring familiar story lines and characters to life in a digital space.
Want to learn more about this project? Let's chat!
VIEW OTHER WORK
SF.GOV
A website and mobile redesign focusing on simplicity and navigability.
SK LACROSSE
A non-profit website and mobile redesign emphasizing registration and team communication.
MYSTORY
An AI story generator and drawing animator app centered on a love of reading for children.
We need your consent to load the translations
We use a third-party service to translate the website content that may collect data about your activity. Please review the details in the privacy policy and accept the service to view the translations.