Sep 12, 2020
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 have 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 to work 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 the 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 can do their work. However, after a few hours, they noticed how the kids were disengaged and fixated on their screens. Parents feel guilty about 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 kid’s 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:
- Discovering the parent’s problems in the time of Covid
- Defining specific problems that the parents might have
- Developing potential solutions to these problems
- 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 kid’s 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 user’s 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 user’s 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 behaviors.
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 prioritize 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 family’s screen times.
- To know parent’s 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 kid’s 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 synthesized 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:
- Parents complained about the issue of not being able to find digital content which is entertaining and pertains to their kid’s learnings.
- Parents did not trust existing apps content as it felt overstimulating for young minds.
- Parents responded they would prefer to find age-appropriate content for their kids.
- Parents said the best tool to keep the kids interested and intrigued is reading books.
PIVOT
It is at this point that I realized that it wasn’t the screen time that the parents worried about. Digital parents were well aware of the pros and cons of 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:
How might we 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 interviewee’s behaviors 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 solutions I wanted to put my emphasis on Empathizing with the user. After synthesizing 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 to their learnings. The aim was to help parents turn their kid’s 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 the user will go through with their task and interactions. A detailed task flow helped me envision 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 exceed 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 the 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 it’s a kids’ app. The use of card layout for books and clear simple iconography was selected to ease the usability as I envision 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 wireframing, 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 first 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
- The 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 the 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 colours into them. 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 colours from the mood board that I developed. I wanted the colours to resonate with 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 was to set the right tone for the brand which catered to the target audience.
Name Exploration
I didn't 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 it’s ‘StoryTime’. I wanted to go with the feel of bedtime storytime.
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 explorations made sense until I started changing the font style to more round which ultimately gave that fun vibe. I thought of playing around with colours 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 depict bedtime stories and decided to go with the 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 colors into them.
To view the final InVision prototype, please click here: https://invis.io/RMYM8IQKQ7U
It took me a few trials of injecting the brand colours in the app the right way. At first, I wanted to go with a minimalistic look of white and didn't add many colors in but then after doing AB Testing I saw that kids got attracted to the colorful buttons and the overall playfulness which is added by the colors.
UI LIBRARY
Knowing the importance of UI Library I then developed a UI library that consisted of 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 landing page. I then started looking at various website pages of the existing app to do a direct or indirect competitor analysis. I formed a UI Inspiration board.
Lo-Fi Paper Wire-framing
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 better clarity as to what steps need to be taken to improvise the design and in 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 based on 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 it’s a kids app I envisioned it being used on a tablet device like an 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:
- Highlighting the words as the user reads and records.
- Enable chat with the other parents so that they can share their narrations and request narrations in different languages.
- Add the dictionary along so that the kids can even see the words meaning if they are stuck.
Learnings
- Embrace the Pivot: Oftentimes, during this project, you realize you are on the verge of following the wrong 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.
- Avoiding Leading Questions: While testing it was so hard to be impartial and not lead the participants. I learned that though leading questions will bring the user to perform the task successfully it will rob us from getting the insights that we weren't expecting to get.
- 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 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.
