StoryTime(UX/UI Case Study): Helping parents turn their kids screen time into story time

Reading App for Kids.

Project Summary

Role: UI/UX Designer, Brand Designer

Timeline:10 week digital mobile app solution

Tools: Sketch, Figma, InVision

Goal: Find a problem. Apply design thinking and empathy in creating a solution.

Problem

In the time of Covid, with the closure of all the schools and daycares . Parents around the world struggle to keep their kids busy. Taking them outside is not always the easiest thing to do along with managing work from home.

PROBLEM

Fair warning, this project was extremely research heavy, so this section is a big one. Feel free to skip down if you’re more interested in how I designed the app!

How has screen time changed during Covid?

Digital content consumption and internet usage has increased exponentially as stay-at-home orders have restricted physical socialization and offline activities.

The detrimental effects of too much time online or on social media are well-documented, but in a world under quarantine, Internet use is skyrocketing around the globe. It’s no longer so simple to cut down on technology and social media use when social distancing is encouraged to flatten the curve and when offline activities are shut down.

Understanding that simply cutting down screen time may not be a feasible solution for many.

Why this Problem

“The idea came from my personal experience, as a mother of a 3 year old, I was struggling for the past few months trying to work from home and take care of my daughter and my ultimate resort was to give her screen time.”

I wanted to choose a problem space that impacted me as a parent. I also wanted to see how covid 19 was impacting kids being homebound. I chose something that could be reimagined without getting into specifics about legalities for kids but at the same time work within realistic constraints.

We have seen a lot of schools and daycares close and as a result, parents are struggling working from home and keep their kids busy. This has created a huge surge in the number of parents trying to keep their kids busy and entertained at home while adding to their learning.

The Opportunity

Parents want to work but it is a challenge to keep their kids engaged and concentrate on their work. They switch on the TV and our able to do their work. However, after a few hours they noticed how the kids were disengaged and fixated on their screens. Parents feel guilty of leaving them unattended with the screen.

Problem Statement

After doing my secondary research I came up with my problem statement:

“How might we assist parents to use their kids screen time wisely and/or limit the use for the screen time for their kids during Covid.”

Approach

The approach I adopted to solve this problem is the Double Diamond Approach.

Using the double diamond, I approached the problem and solution by using 2 different types of thinking: divergent and convergent.

  • Divergent thinking — think broadly, keep an open mind, consider anything and everything
  • Convergent thinking — think narrowly, bring back focus and identify one or two key problems and solutions

The four phases applied:

  1. Discovering the parents problems in the time of Covid
  2. Defining specific problems that the parents might have
  3. Developing potential solutions to these problems
  4. Delivering feasible and viable solutions to these problems

Hypothesis

A hypothesis is a supposition or proposed explanation made based on limited evidence as a starting point for further investigation. For this project, I have a hypothesis before setting out to either validate it or prove it wrong.

Number 1: I believe parents want to reduce the screen time for kids and keep them busy. This will be proven right if 70% of the survey takers agree with this statement.

Number 2: I also believe that parents want their kids to screen time to be more interactive and educational. I will know I am right if I see 4 out of 5 interviewees agree to this concern.

Design Process Research

The goal of design research is to form the design process from the end users perspective. As a mother, I can empathize with the struggle that the parents are going through but I want to conduct this research to ensure that the design decisions are from the users view.

For my primary research, I decided to conduct virtual interviews and send out an online survey. This helped me collect both qualitative and quantitative insights about my target users’ pain points, motivations, and behaviours.

My research was divided into 2 parts: gathering data from the user and synthesizing the data to understand make guided decisions.

Interviews:

I decided to gather qualitative insight from the target user segment:

  • In-depth interviews lasting for 30 minutes with 5 parents about their digital media practices. Semi-structured interviews were conducted virtually on a zoom call. The families vary by age of children (from 2 to 12 years old).
  • I focused on families who have decided to prioritise the potential of digital media for their children’s present and imagined future. This includes parents of children attending online schooling and learning sites.

Interview Goals:

  • To find families screen times
  • To know parents challenges and pain points relating to the increased screen times
  • To find out if the parents would be interested in a solution that pertains towards their kids learnings.

To view interview questions please click the following link:

https://docs.google.com/document/d/1JMOThTw5YMKzK3WFRdNE_AS30tJHd5i49ZhVSS-EJcY/edit?usp=sharing

Survey

Online user surveys were sent out for this study. To explore how much screen time is being given by parents. It also asks some questions about the changing levels during quarantine. The goal was to help us know how parents can be better supported in helping their children to use screen time effectively during these unprecedented times.

Thematic Approach

I then syntesized the information gathered from my primary research into Pains, Motivations and Behaviours.

Key Insights

I then drew themes and insights on the experience of my interviewees with the screen time:

  1. Parents complained about the issue of not being able to find digital content which is entertaining and pertains towards their kids learnings.
  2. Parents did not trust existing apps content as it felt over stimulating for young minds.
  3. Parents responded they would prefer to find age appropriate content for their kids.
  4. Parents said the best tool to keep the kids interested and intrigued are books.

PIVOT

It is at this point that I realized that it wasnt the screen time that the parents worried about. Infact, digital parents were well aware of the pros and cons of the screen times for kids. They monitor the screen time well and the real problem was not reducing the screen time as I had earlier anticipated. The real problem was the quality of the digital content available for kids currently.

Through synthesizing the data I also learned that my hypothesis number 1(I believe parents want to reduce the screen time for kids and keep them busy. This will be proven right if 70% of the survey takers agree with this statement) was proven incorrect.

I then decided to pivot my problem statement to:

Hmw provide parents with engaging, trustworthy and quality learning content to teach their kids under covid conditions?

From the above mentioned, insights I chose “age appropriate reading” as my key theme. Why? Because that was on point with my interviewees behaviours and pain points.

PERSONA

It is at this point that I decided to develop my persona. A user persona is a fictional representation of my ideal customer. Before I began designing soloutions I wanted to put my emphasis on Empathizing with the user. After sythesizing my interview and survey results it became clear to me that Katherine is my primary persona.

Experience Mapping

Experience Map was then created to come up with the possible opportunities. After using an experience map, I was able to identify multiple areas of opportunity and decided to focus on creating content for kids that pertains towards their learnings. The aim was to help parents turn their kids screen time into something more meaningful for both the parents and kids.

Ideation

I then started creating user stories to help me think about the functionality of a page from the users view. The Key Epic for my project is “Choosing age appropriate book

For the task, choosing an age appropriate book, I then created a flow of how user will go through with their task and interactions. A detailed task flow helped me invisioning the screens of the app and this helped me further with the sketching process.

Market Research

As I performed the competitor analysis I realized , to be successful I would need to design something that would be different than or exceeding the existing app within the market space. I would need to tie in the factors of interactive learning to create something unique, easy to use and fun. And since my interviewees stressed on the one activity that they love doing with their kids was reading I knew I had to tie in the reading aspect as one of the features in my app.

Sketches

Once I developed my primary persona, identified my key task and stories, I started sketching out various solutions. Quick sketches using paper and pen helped me to jot down my thoughts. I knew these were rough initial sketches and I will keep iterating my concept.

Inspiration Board

I then started looking at different apps for existing User Interface. And collected some of the UI pictures that I liked in the existing apps like their layout, card layout and in general how the information has been laid out.

I wanted my application to be easy to understand and follow yet playful as its a kids app. The use of card layout for books and clear simple iconography was selected to ease the usability as I invision my app being used not only by the parents and their kids but also by the kids grandparents. Hence why I chose to go with the easy to understand layout and big clear iconography.

To see the InVision Board click: https://projects.invisionapp.com/boards/7D409B8VQMA/

WIREFRAMING

Once, the final sketches were chosen, I created the first set of wireframes. I had two phases of wire framing, one was to focus on functionality and the other one was usability.

Version 1

I designed the Splash Page for branding, Library Page to showcase all the books that the user might have in progress, individual Book Page which the user can use to read through or record their narration, Book Browsing Page which will be beneficial for parents who want to browse through books, and the Favourite book page where all the books that the user likes will be added to provide the busy parents with the convenience of choosing books that their kids like easily.

Version 2

After conducting Usability Tests with 5 users and noting the feedback. I then performed a Priority Matrix to make the changes. I then iterated on the wireframes and added more visual content.

Usability Testings

As mentioned above, I had my testing done in 2 rounds with 5 users each time. The forst round was performed to understand if the users were able to complete the chosen task and they were having any issues along the way.

Key Insights

  • Overall flow was clear
  • Lack of content such as headers and text made it difficult for users to understand what they were seeing
  • The ‘Record’ icon was now clear.
  • All of the users understood the home page.
  • Read to me page was a bit ambiguous in which users expected a next screen.
  • After recording a narration the user did not understand the next step.

After factoring in all the insights and feedback received I finalized my Medium Fidelity wireframes. I then wanted to develop these medium fi wireframes into high fidelity by injecting colors into it. For which I had to think about the visual identity for my brand.

Visual Identity and UI

I then started thinking about the words that I wanted my brand to echo. The tone that I wanted my application to evoke were: Love | Natural | Happy | Minimalist | Fun

I also developed a list of More A’s than B’s list for my brand. To view the full InVision Board please click here: https://projects.invisionapp.com/boards/7940FX982T5/

Brand Colors

I then extracted the colors from the mood board that I developed. I wanted the colours to resonate the same emotions as mentioned above.

Brand Visual Identity

Now was the time to bring the product to life. I had the functionality of the application decided and I wanted to get to the USER INTERFACE DESIGN side of it. The first step I wanted to set the right tone for the brand which catered to the target audience.

Name Exploration

I didnt have a name in mind so I started by writing down words that resonated with the idea of my app. I went with the name Storytime because of its simplicity and when parents read to their children they often say its ‘StoryTime’. I wanted to go with the feel of bedtime story time.

Logo and Wordmark

Once I decided on the name I decided to play around with the font and styles to make a wordmark and an app icon. I looked at various app icons which are out there like facebook, instagram they are all simple, yet effective. Since, mine is a kids app I wanted to make it simple yet fun.

None of the exploration made sense until I started changing the font style to more round which ultimately gave that fun vibe. I thought of playing around with colors but that was not giving me the results I wanted. I finally started seeing better results with a changed font and playing around with the font weight and sizes. I got inspired by the moon and stars which depicts bedtime stories and decided to go with 4.2 option for App Icon and 1.1 for Wordmark.

High Fidelity Wireframes

After factoring in all the insights and feedback received I finalized my Medium Fidelity wireframes and High Fidelity wireframes were then produced by injecting colours into it.

Image for post
Image for post
Hi Fidelity Screens

To view the final InVision prototype, please click here: https://invis.io/RMYM8IQKQ7U

It took me a few trial of injecting the brand colors in the app the right way. At first I wanted to go with a minimalistic look of white and didnt add much colours in but then after doing AB Testing I saw that kids got attracted to the colourful buttons and the overall playfulness which is added by the colours.

UI LIBRARY

Knowing the importance of UI Library I then developed a UI library which consisted all the components I created for this application. To ensure further consistency I annotated the components for easy handoff across the teams.

Grids Layout

4 Column Grid was used for iPhone 11 Pro.

Marketing Website

I then designed a landing page for a marketing website to communicate the value proposition. After finalizing the content for the lnding page. I then started looking at various website pages of existing app to do a direct or indirect competitor analysis. I formed a UI Inspiration board.

Lo Fi Paper Wireframing

I then created quick paper sketched to come up with the ideas for the landing page.

Priority Matrix

After noting the feedback in the critique session I then put them down in the Priority Matrix for a better clarity as to what steps need to be taken to improvize the design and what order. They were Prioritized:

1. QUICK WINS: Low-effort, high-impact

2. MAJOR PROJECTS: High-effort, high-impact.

3. FILL INS: Low-effort, Low-impact

4. HARD SLOGS: High effort, Low impact.

Final Hi Fi Website Landing Page

This was iterated a couple of times on the basis of user testing which was performed and then I made a priority matrix to figure out what changes needed to be included.

To view the inVision prototype click here: https://invis.io/SRYMW2X9GPQ#/430647395_Artboard_-1-

Other Device Platform Exploration

Since its a kids app I envisioned it being used on tablet device like iPad. Tablet is pretty popular amongst the kids so I thought it will be interesting to envision it on an ipad.

Next Steps

The next few steps will be to conduct more user testing to keep iterating the design and make it more human centric. I would also like to interview a few kids to do my user testing and make sure the app is well understood not only by the adults but by the kids as well.

Features To be considered in the future:

  1. Highlighting the words as the user reads and records.
  2. Enable chat with the other parents so that they can share their narrations and request narrations in different languages.
  3. Adding the dictionary along so that the kids can even see the words meaning if they are stuck.

Learnings

  1. Embrace the Pivot: Often times, during the course of this project you realize you are on the verge of following the worng path. Test out what’s working and what’s not, do research and use data to help make decisions. Pivoting is a great way to build on the foundation to redirect your efforts.
  2. Avoiding Leading Questions: While testing it was so hard to be impartial and not lead the participants. I learnt that though leading questions will bring the user to perform the task successfully but it will rob us from getting the insights that we werent expecting to get.
  3. Designing is a continuous Improvement: Improvisation allows us to negotiate, unmake and remake designs. This function enables the fluidity of design, to move from one moment in a process to the next.

All in all this project has helped me shape the design thinking approach which I will continue to apply in the future projects. It helped me empathize with my users and adopt a more human centered approach.

I’d love to hear your thoughts about my case study.

A Product Designer based in Toronto, Canada. https://www.aditidham.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store