PlayQuest home screen

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

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.

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.
Good digital citizenship

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."
Scoping out the competition

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.

Listening and learning

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.”

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.

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.

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.


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.
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.
Images, mood,
typography, style

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 Style Guide

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.
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.

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.

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.
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