Theresa
UX Designer

PlayQuest:

An app to help families reclaim the joy of play

PlayQuest:                      An app to help families    reclaim the joy of play

PlayQuest home screen


The Problem:

Children spend up to 5 hours a day locked into screen-based entertainment, leaving them less active and more anxious than previous generations. Young people are missing out on free-play that is essential to healthy social, emotional, and physical development.

The Solution:

Design an app that meets families where they are online and create a bridge between digital and real-world play, harnessing available technology to inspire, schedule, track and reward your family’s free play adventures.

PlayQuest:                      An app to help families    reclaim the joy of play

Children spend up to 5 hours every day

immersed in screen-based entertainment.

Time to create a bridge between digital and real-world activity!

ABOUT THE PROJECT

I created the PlayQuest app for my Springboard UX Design bootcamp capstone project. It took about 6 months from defining the problem to finalizing a high-fidelity interactive prototype, working on it evenings and weekends around my full-time job and family life.

My Role:

As UX Researcher and Designer, I was responsible for competitive analysis, user research and testing, UI and interactive prototype designs.

Users and Audience:

The target audience for PlayQuest is urban and suburban families with children ages 8-13 who are tech-savvy but also appreciate the value of active play with friends and family.

Secondary Research:
Good digital citizenship
PlayQuest:                      An app to help families    reclaim the joy of play

Parents can model good digital citizenship for their children by unplugging and spending time together

DISCOVERY

At the discovery phase of my project, I wanted to dig into some of the research and data on young people’s reported daily screen time and why it can be problematic. 

The research, according to the Mayo Clinic and other sources, does show a strong link between excessive, poor-quality screen time and anxiety, behavioral problems, and loss of social skills in children.

I also wanted to learn more about the proven scientific benefits of free play to support my project. Indeed, social scientists agree that playtime, downtime, and family time are integral to strengthening resilience in children.

Research also shows that parents can boost their children's IQ by reading to them daily and playing board games, among other activities that encourage higher-level thinking.

I also looked at how parents could model good “digital citizenship” and set limits on their own screen time in order to be a positive example for their children. 

At first, I thought this app would focus on encouraging kids and parents to have more screen-free playtime together, and the working title was "Unplug Together."

Heuristic Analysis:
Scoping out the competition
PlayQuest:                      An app to help families    reclaim the joy of play

Samples from my heuristic analysis report

What's already out there?          What's not?

With Nielsen's general principles for interaction design in mind, I wanted to evaluate the quality of similar products that already existed in the problem space I was exploring. 

I wanted to pay particular attention to what wasn’t there, so I could design a product that filled an unmet need, not duplicate something that already existed.

I analyzed two apps and two websites that tackle a similar problem to the one I was researching, focusing on the UX and visual design of each one. 

This exercise taught me how to look more closely at a competitor’s product, noting ways to replicate what they did right while making sure not to repeat their mistakes. 

PlayQuest:                      An app to help families    reclaim the joy of play


Primary Research:
Listening and learning
PlayQuest:                      An app to help families    reclaim the joy of play

Sample results from my screener survey, which had 

44 total respondents

SURVEYS

To learn more about my users, I posted a screener survey in several Facebook groups that included parents of children in my target age group. 

I got 44 responses and ultimately chose 6 moms to follow up with, whose children had at least an hour of daily screen time and/or their own smartphones, but who also reported active, outdoor play as a favorite family activity.

INTERVIEWS

Interviews: I conducted 6 interviews, four over the phone and two in-person, to ask some more detailed questions about their family’s screen habits and leisure activities to help shape the direction of my project.

Key Interview Takeaways:

  • Parents of children with their own smartphones were very concerned about how much they use them, and monitor them closely.

Annie R., attorney and mom of 3, ages 4, 7, and 12, spoke about her 12-year-old son who recently got his own smartphone: “He was playing on the phone way too long, so now we’ve instituted a very strict no screens during the week rule...He can only call and listen to music.”

  • Parents overwhelmingly agreed that elementary and middle school students do not get enough recess, outside, or free movement time during the day.

Judy L., pre-school teacher and mom of three teenage boys, spoke about her students: “They HAVE to be outside. They need to be able to move...It’s a no-brainer.” Recess is “not a controlled activity...they just have to go out there and figure out how to play with other kids...It’s not teacher-directed, it’s kid-directed and they’re learning how to get along and communicate and problem-solve.”

  • Parents felt that the most important thing their young children learn in school is navigating social dynamics and learning problem-solving skills.

Emily G, student and mom of a third and first-grader, on the most important lessons her kids get in school: “Learning to function in groups, basic lessons of how to fit in with certain people, group dynamics...what does friendship look like or not look like to you?”

  • Parents did not have a strong desire to schedule more activities within their own families.

Leslie S. nurse and mom of 2, a fifth and second-grader: “We live in a pretty small space and I think we’re together plenty.”

PlayQuest:                      An app to help families    reclaim the joy of play

Detail shot of Affinity Map

AFFINITY MAP

After conducting 6 interviews, I made notes and grouped them into categories to notice patterns and themes that emerged, helping me capture important insights to guide the direction of the project.

PlayQuest:                      An app to help families    reclaim the joy of play

Empathy Map

EMPATHY MAP

What do users think, feel, say, and do?

This sketch maps out some of the insights from my interviews and reveals the tension parents face surrounding their children’s screen time and budding independence

This helped me think about how the PlayQuest app could focus on parents and children utilizing technology as a tool to encourage outdoor and independent play.

This sketch served as the basis for the personas I created to help me remember who I was designing for throughout the project. 

PlayQuest:                      An app to help families    reclaim the joy of play

Two Primary Personas

PERSONAS 

I created these personas based on my observations, interviews, and analysis to help answer the question, “Who am I designing this product for?” 

I kept “Maggie” and “Grady” in my mind throughout the design process and returned to them often to make sure PlayQuest would be something they would find useful and fun.

PlayQuest:                      An app to help families    reclaim the joy of play


PlayQuest:                      An app to help families    reclaim the joy of play

User Stories

USER STORIES

Getting inside their heads

To help identify the functional needs of the product, I created some user stories that helped me think like “Maggie” or “Grady” would when navigating the app. This helped me prioritize what should be included in the Minimum Viable Product.

  • Users need to feel that their privacy is protected and their profiles are secure, especially parents who are setting up accounts for their children

  • Users would like notification reminders for upcoming activities

  • Users can see gamification elements that motivate them to earn points for every game played and work towards badges, encouraging friendly competition

  • Users can choose favorite games for their library and be inspired to play at any time.

Design and Test:
Building a family-friendly
digital product

LOW FIDELITY SKETCHES

Ideas become tangible

  • In the sketching phase, my ideas became tangible and I was able to start visualizing how the different elements of the app should connect.

  • Some ideas and screens from these earliest sketches evolved significantly (or dropped out completely) since these iterations, based on the priorities of users and the feasibility of the MVP design, while other elements remained fairly intact.

  • At this point, the working title shifted to "A Playful Day in the Neighborhood"

WIREFRAMES

Visually mapping the content

Mapping out PlayQuest’s content through wireframes was a key step in the design process that helped me determine how different elements will be placed on each screen and how they will connect with each other.

I created these medium-fidelity wireframes in Adobe XD and used them for my first round of usability testing.

USABILITY TESTING, ROUND 1

I conducted usability tests with 5 different friends who fit the target demographic for the app. 

All tests were moderated, in-person tests, where users were asked to click through the wireframes on the Adobe XD app and offer feedback as they went.

I wanted to see if people were confused at any point along the way or if they didn’t understand any of the features.

I also wanted to see what they found most useful and interesting about the app and what suggestions they might have to improve.

Overall feedback was positive, everyone seemed interested in the product, even if they had some questions and suggestions about it.

Key Takeaways:

  • Most parents were concerned about the privacy and safety of the app, especially if children will be using it; parents wanted some kind of notification system and a clearer link between the parent and child’s account.
  • There could be a more clear and interesting way to show points and badge progress instead of a bar graph.
  • There were some questions about logging the points-should parents be asked to verify? Where should that button ultimately be?
  • Add a home icon to the navigation bar, possibly rethinking other icons and links there.
  • Users agreed that they would like to see a better scheduling mechanism on the app. That was probably the biggest change suggested, and something I hadn’t considered until after testing, but did decide to add to the high-fidelity iteration and final version of the product.

UI Design:
Images, mood,
typography, style
PlayQuest:                      An app to help families    reclaim the joy of play

PlayQuest mood board

TOWARD HIGH-FIDELITY STYLE

All elements of the design, from colors and typography to icons and badges, were chosen to create a playful, hip, and active vibe.

This app is designed to appeal to urban/suburban parents and children, target ages 8-13, and uses bright, gender-neutral colors and images.

The primary colors of the app can be seen at the lower right: dark blue, turquoise and gray with accents of lime green and red.

PlayQuest:                      An app to help families    reclaim the joy of play

PlayQuest Style Guide


PlayQuest:                      An app to help families    reclaim the joy of play

These images show how the home screen evolved throughout the design process

EVOLUTION OF THE DESIGN

The PlayQuest home screen is an example of how the app’s visual design evolved from the sketching phase to the final iteration.

It also shows how the name and focus of the app shifted and features were added and dropped to better meet the needs of target users.

Based on user testing and feedback:

  • I continued to evolve the design of the home screen to include easy access to the most commonly used features of the app.

  • I choose a different photo to better match the target age demographic of PlayQuest users

  • Added a color signifier on the navigation bar to let the user know where they are inside the app. 

Usability Testing, Round 2:
Uncovering pain points

With a high-fidelity prototype created, I was ready for in-depth user testing. I conducted usability testing on the interactive prototype with 7 people total, 3 adults and 4 children who fit my target demographic and age range for PlayQuest.

From a functional standpoint, my primary objective was to determine if the flow of the screens made sense, and see if there were any frustrating points along the way.

From a practical standpoint, I wanted to see if parents were comfortable with children using the app and whether children found it useful and fun.

Overall, testers had a positive experience interacting with the app but there were two main functional issues that they had trouble with that needed to be addressed moving into the final design phase.

PlayQuest:                      An app to help families    reclaim the joy of play

Calendar screens with confirmation added 

after user testing

Issue #1

  • The way the calendar screens were linked in the prototype, testers got stuck in a “loop” between them without a clear way to get back into the flow of the app.

  • They did not generally look to the navigation bar at the bottom of the screen to get back to the home or profile page.

Solution:

Add new calendar confirmation screen with a home button to signify that the PlayQuest has been successfully scheduled, and help them get to the home page. 

PlayQuest:                      An app to help families    reclaim the joy of play

PlayPoints confirmation screen (center) added after user testing

Issue #2

  • Testers were unsure how the PlayPoints are added.

  • When testers got to the second-to-last screen in the flow, they were unsure what would happen next, how the points would end up on the final leaderboard screen. 

Solution:

  • Add a screen in between the last 2 screens where you can confirm that you actually played the game and log your points.

  • Parents can set a notification to confirm this.

Final iterations:
Modifying the design,
creating the prototype

FINAL UI DESIGN

My final design includes 18 distinct screens created in Adobe XD that focus on:

  • Setting up an account

  • Messaging friends and scheduling a PlayQuest

  • Determining what game to play and logging points

Utilizing iOS design patterns, I created a clean and familiar look that would be intuitive to new users.

I added two new screens to the final design scheme, updating the original interactive prototype to address users’ concerns with the scheduling and PlayPoints sections.

The final design is bright, friendly, and easy to use.

Video presentation of PlayQuest MVP user flow +            individual screen mockups


The Takeaway

Designing the PlayQuest app was a journey, and the final destination was a little different than what I originally envisioned.

Along the way, the focus changed, the name changed, features were dropped and added according to design feasibility and user testing feedback.

From the beginning, I knew I wanted to address the issue of children’s screen time and design an app that creates a bridge between digital and real-world activity, and that did not change, but the focus and approach did. The original idea was to find a way to encourage parents and children to unplug and spend quality time together, but my survey and first round of interviews did not indicate a strong desire for that.

Interviewees agreed that they wanted their children to have more free play time outside, so that’s where I decided to shift the focus.

Additional user interviews and testing were essential to determine what features parents and children most wanted in the app. I decided to include the scheduling feature after round 1 of testing, and further honed that design after testing the interactive prototype.

One feature that I tinkered with early in the design process was a quiz wheel, but I ultimately decided it was too complicated to make it work for the MVP so I ended up dropping it. This was the first-ever app I designed, and it was a challenge to build it while learning the design tools and techniques needed to complete the tasks.

Careful research, targeted interviews, and thorough user testing were essential in designing PlayQuest. I'm proud that I've created a useful and fun product to help families reclaim the joy of play.