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.
Basic Flow Diagram
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.
Key Features
The three key features of the app are providing parents and child to evaluate, explore, and manage the kid's game activities. Based on the available features, the parents can approve the child's game downloads, learn more about child's development based on game achievements, and analyze the monthly progress.
·     ·     ·
02. Frames + Designs
Physical Wireframes
Based on the concept, my group mates and I sketched out wireframes of how the screens are going to be linked to one another. During this process, we analyzed the screen relationships, flow of information, and overall interaction. This helped us come up with basic concepts on how the user will interact with the screen and what will show next.

Wire Frame of the App (later revised and edited)

Digital Wireframes
We then designed digital wireframes 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.
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. ​​​​​​​

Frame UI layout on Adobe XD

Interaction map between each page

Key Frames & Interaction Overview
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. Detailed frames and interacting GIFs of the frames are down below.
·     ·     ·
03. Final UI

Final UI of the App

Screen Gifs
Introduction & Quiz
After the splash page, the app provides an overview of the types of services offered within the app. It then takes parents to a log in page, which then saves the child's information and logs the monitored activities.
The quiz consists of simple and fun games that would stimulate the brain. The 2 minute time based quiz analyzes the numbers of solved answers in relations to the correct answers. After taking the quiz, the game provides a result of the child's score in five categories: Knowledge, Problem Solving, Motor Skills, Creativity, and Multi-tasking. 
The explore page guides the parents and the child through various game options for each category. Each game has ratings by the users of Playpop, allowing the parents to see other parents' opinions and how the game affected their children. This page is then directly linked to the App Store, helping parents navigate the page easily. Once the game has been downloaded, Playpop sends a notification that the game has now been linked to the account. 
The information channel provides complementary bot chat and informational articles. It also provides a psychologist session as an add-on service. In this section, parents can access a quick overview of installed games and the child's interactions, such as hours played, recommended games, and more.
My Information
My Information is the hub of all information regarding the games, quiz results, and challenges. It shows the parents the different elements amongst the five diagnosed sections and how to improve them by recommending educational game apps. It also reveals an in-depth analysis on the child's quiz score and allows the child to re-take the quiz to assess improvements. My info also provides in-depth information of each game, like the current level, scores, and activity time.

Walk through of the Final App

Walk Through Video
The video above is a walk through of the final UI of the app, PlayPop. The video reveals how the interactions would trigger the actions among the screen.
·     ·     ·
The 48-hour design challenge taught me that UI design is versatile. I enjoyed experimenting with designs that would dictate certain actions. But as I continued on with the project, I came to a realization that intuitiveness is the key component to a good UIUX. After all, there should not be a big difference in its process between a product, a magazine, and an app. Design exists to serve others and each design should have such philosophy on its core.
This project received Honorable Mention for 2020 Adobe Creative Jam + Activision.
You can explore PlayPop here.

View other projects

Back to Top