Since COVID-19, many people are spending time playing games, not only for fun but also to connect with others. New gamers are overwhelmed, and there is no best solution to help the people discover the games that are right for them in their current situation. Therefore, design a proficiency-focused app to inform new gamers about video games based on age-appropriateness and skills.
The goal of the project is to design a UI of a third-party game recommendation app for parents to find age-appropriate skills and games for their children.
2020, 48 hours
Sammie Kim, Charmaine Qiu
·     ·     ·
01. Research
My group mates and I first approached the prompt through creating mind maps of the type of skills a child would develop at a certain age. Since we could not cover all age levels and groups, we divided the age group into three sections -- toddlers, kindergartners, and elementary schoolers. From there, we created a series of sticky notes to visualize what parents want, how to measure a child's proficiency, different categories of assessment, and more. By the end of the meeting, we had concluded that we wanted to create an app with target age group is young children in elementary school.
We then used a flow diagram to quickly visualize how a person will interact with the app. When the person downloads the app, it will take the user to a testing page. After a child taking the test, the app have 3 main sections: Explore (aka home), Connect, and My information. Each section focuses on different service for the user. While explore section helps the user find apps that could improve on the child's skillset, connect allows the parents to connect with child development professionals, and my information reveals and keeps track of the child's testing results for the parents to look over.
So what kind of skillset is the app measuring? The app measures the child's problem-solving skills, creativity, motor skills, multi-tasking skills, and knowledge through various fun non-verbal quiz offered at the start of each month.
·     ·     ·
02. Frames + Designs
Based on the concept, my group mates and I then designed a wireframe to visualize the app before fully designing it. During this process, we decided on the color scheme, visual language, and cohesiveness of the app's system.

Wire Frame of the App

To make the app more child-friendly and exciting, my group mates and I decided to create a set of illustrations that would go inside the app. The image on the left are the illustrations I drew within the 48-hour design challenge to add a more bubbly look to the app. ​​​​​​​
We then added colors, specified each page's content, and made detail adjustments to the existing wireframe. We focused on designing an experience that is intuitive and meaningful for the parents. The overall frames and interaction maps are down below.

Frame UI layout on Adobe XD

Interaction map between each page

·     ·     ·
03. Final UI

App Mock up

Walk through of the Final App

The video above is a walk through of the final UI of the app, PlayPop.
Down below are the GIFs of a user interacting with the app. The app focuses on recommending educational apps and reflecting on the child's progress within the assessment categories.
After completing the 48 hour design challenge, there are still elements I wish I got to change or edit to make the app more realistic. For example, I wish I had the time to nit-pick the transition between each page. Yet, I learned valuable lessons I would not learn elsewhere during this design challenge. I am excited to apply those skills I have learned on future projects!
This project received Honorable Mention for 2020 Adobe Creative Jam + Activision.
You can explore PlayPop here.

View other projects

Back to Top