Beepo

Teaching kids about the internet and the importance of digital privacy 

[UX/UI Design] [User Research] [Mobile Application]

Beepo-Header

My role

I worked with one illustrator in this project along with one child psychology professor from the University of Michigan. 

I was the UX designer in this project and was responsible for everything UX: user research, user flows, prototypes, and visual expression. 

RESPONSIBILITIES /
Discovery, ideation, user flows, prototyping, visual design

TIMELINE /
3 months (Jan-Apr 2019)

TEAM /
Jenalyn Abinales, UX Designer 
Child Psychologist

SKILLS & TOOLS /
Interviews, User Journey, Competitive Analysis, Prototyping
Figma, Photoshop, Illustrator

My 6 years old niece loves to dance. One day I saw her recording herself on the iPad and immediately posted it on TikTok.

I was afraid of the inappropriate content she will see and the strangers on the platform she might interact with. 

TikTok keeps profiles public and private messages open. This means anyone can contact you and see your profile unless you change your settings.

I wanted to make sure she was safe from this.

Background and Motivation--

Our kids are growing up in an online world and are knowledgeable and technically capable of using technology. Social media sites emphasize us to share. How safe are our kids in navigating online? 

A study from Redmiles et al. showed that younger users are not aware of how much data  they are sharing in these online platforms and generally have poor online behaviors. While there are websites and papers to promote security and privacy, these types of medium do not actively reach the younger population and rely on parents and teachers to teach these concepts instead. 


1_MFbcYJVmYVGjFBz36Sb4_w

To solve this issue, we created Beepo

Beepo is a mobile educational app that teaches children about the internet as well as the importance of digital privacy with the help of their helpful companion, Beepo!

The app consists of various types of media such as comics, games, and videos to teach kids about the internet. 

Impact --

Creating this digital product will help educate children and teenagers on how to stay safe, healthy, and kind in the digital space.

 

Beepo-Screen-Recording

But, how did we get here?

Beepo-Design-Process

Competitive Analysis --

What is currently being done to teach kids about the internet and their privacy online?

Hint: It's boring and catered to teachers and parents. 

To futher understand this space and look at existing solutions, we created a competitive anaylsis. This helped with finding gaps in exisiting solutions and opportunities to bridge this gap.

The competitive analysis looked at different organizations or digital solutions specializing in educating younger users about online privacy.

We found that most are catered to adults and educators rather than children. Further, if anyone wants to read it, it is too dense and dry beause they try to follow common core standards. This is a problem. 

CompetitiveAnalysis_BeepoSecure
UserJourney-BeepoSecure2

User Research --

We talked with kids!

The target for this app is children the ages of 6-12.

We went to a Parent and Kids fair at the mall (perfect timing!) and set up a booth with various games. We then took the time to interview some kids in the fair, with the permission of their parents!

This allowed us to get better insights about how they use apps and the problems they face. This also allowed us to expand the conversation and allowed us to better empathize with the kids.

The interview took approximately 10-15 minutes of their time to get to the core of how they use technology and the internet.



Beepo-Interviews

6
Kids Interviewed 

2
Males 

4
Females 

7 yrs.
Avg. age 

BeepoPersona1
BeepoPersona2

"I'm not really sure what to do. I think my mom won't let me use the computer if I tell her someone was bullying me on Roblox. So I just kinda ignore it."

svg-image

Participant 3, Male

Beepo-User-Journey

Key Issues --

Based on the competitive analysis and interviews, we identified the main issues.


01 / Lack of awarness
Kids are unaware of to safely behave online the consequences of the internet. 

02 / Cyberbullyling is a big issue online
While many kids faced some sort of cyberbullying online, many don't know how to cope or handle the situation. 

03/ Boring Material
Learning about security and privacy is boring and too technical. 

04 / No platform
There are no accessible platforms that address the issues of privacy online for younger children. 

 

The Opportunity --

We need to address how we teach children to safely use the internet as well as be a resource for them when they face cyberbullying. 



High Level Goals --


01 / Make it accessible
Taking the time to children about technology can be daunting. Why not use use existing tools to integrate that learning?

02 / Improve well-being
The overall impact we want to see is improve children's well-being in their digital lives. Away from danger and harmful content.

03/ Make it fun!
Who says learning about the internet should be boring? How might we make this entertaining for children?

04 / Educational
We need to streamline educational content about the internet. This is an important step in improving children's digital lives.

 

Brainstorming and Ideation --

How should we address the issue while keeping it accessible for children?

Games, videos, comics...and many more...
through an app!

We brainstormed and created sketches of ideas in order to bridge the gaps we identified. First, I sketched out potential solutons and divided those solutions with different user scenarios. After getting feedback on the sketches, most people favored the mobile application with the idea to combine other solutions with it. 



Sketch2
Sketch1

Information Architecture --

Through prototyping, we identified three main screens and features that align with our goals and children's main needs.

  1. Homescreen - Perks and points 
  2. Lessons - Main content
  3. Help - How to seek help when faced with dangerous content or cyber bullying

Within these three screens, we identify and sort where a particular feature should be displayed while aiding us in user flow. Although simple, we are able to visualize core functionalities of the application.



BeepoArchitecture

User Flow --

 Creating the information architecture allowed us to create user flows of the application and break down processes the user would do to achieve specific tasks.

Mapping the user flow also assisted in solidfying our ideas, features, and screens necessary to build the application. 


Beepo-User-Flow

Low-fidelity Prototype --

After deciding on a mobile application, we created a low-fidelity prototype to further develop the ideas.

This prototype allowed us to create and refine the experiences for the kids. It allowed us to grasp the overall direction and goals of the app while brainstorming how each screen would look like.

Beepo-Sketches

Wireframe --

The wireframes helped us organize our throughts while incorporating the user flows, information architecture, and our sketches to redefine the user experience. 

The wireframe helped us in determining what screens were unncessary, and which ones can be consolidated into one screen. 

Beepo-Wireframe

Moodboard --

We created a moodboard to influence the visual design of the application. 

The inspiration came from Beemo, a robot character from Adventure Time. We then took inspiration from Duolingo, which is a language educational application. 

We focused on education and schooling so we took inspiration from elementary school images such as the school bus and classrooms. We incorporated pastel colors of blue and pink because it evokes childhood but is still gender neutral.

BeepoMoodboard

Consultation with Child Psychologist --

We reached out to a child psychologist at University of Michigan to validate our designs in a psychology perspective. We wanted to ensure our designs are attractive and safe for children consumption. 

Based on our consultation, we made some changes to our app features and designs. 


Focus on companionship of learning instead of badges of accomplishments
It was recommended that we get rid of awarding children with badges as that might affect how they interact with the app, such as mindlessly going through the app just to collect badges.
Instead, we focus on a robot companion, named Beepo, that guides the children through lessons. This helps kids feel empowered in learning as they would be learning alongside a friend.

Get rid of profile creation and personalization
While profile personalization is attractive, it may affect how children view themselves in the educational mobile application. By adding this feature, it may affect their identification to the app, where they may feel obliged to act a particular way and being rewarded for superficial completions. Instead, we focus on the customization of Beepo where children can collect bowties to dress Beepo up. By doing this, it keeps the app fun and friendly but children are not directly associating the app with school.

Visual Design of Beepo

Before and after

The Solution --

We created Beepo!

A mobile application to address the salient privacy issues that our younger generation face today while teaching them about the internet and how to cope and get help when they get cyberbullied.



Beepo-Screen-Recording

01 / Why a mobile app?
There are no current existing platforms that teaches about privacy that are accessible to them. More than half of U.S. children now own a smartphone by age 11 (Pew Research, 2018). Thus, creating a mobile app is an accessible approach for them.

02 / What are the contents?
This mobile application addresses issues about social media, passwords, phone number privacy, cyberbullying, and many more. These topics are delivered in different types of mediums such as video games, comics, and educational videos (edutainment). 

03 / What makes this educational platform different?
This app provides external resources in case users would want to reach out to an adult or organization about the issues they are facing online. This includes organizations, or tips on how to approach an adult about cyberbullying.

04 / Who's Beepo?
Beepo is a robot that the child will help teach or learn with about the internet. Children can also collect bowties to customize Beepo. Beepo serves as a friendly companion to provide a safe, non-intimidating learning envionment (Redmiles et al.).

 

Meeting Beepo for the first time!

A fun and friendly onboarding process to meet Beepo for the first time.  

Customizing Beepo.
Bowtie galore!

An interactive and fun way children can connect with Beepo. Full color customization as well as incentives to collect bowtie and dress up Beepo. 

Cuztomize-Beepo

Game and media selection

Selection of topics such as passwords, cyberbullying, and many others. You can also select a type of medium to interact with such as games, comics, and videos. 

Main
Game-Selection

Getting bullied? Get help!

A selection of tips, organizations, and ways to get help and cope if you are getting bullied online. This is an important step for children to learn because most of them don't know how to handle bullies online. 

Cyber

Challenges and Limitations --


We didn't have the opportunity to test our prototype.
We also didn't have a defined curriculum for internet/privacy comics, games, and videos to refer to. 

We leave this for future work.


No usability testing
We firmly believe that products should undergo testing and evaluation to ensure that it is meeting the goals and needs of the user. However, due to time contraints, budget, and population access, we were unable to conduct any testing. However, I am conducting reserach with The Conceptual Development Lab at University of Michigan. They can potentially be a great partner to conduct user testings with children in the future.

No definied curriculum
While there are some cybersecurity and digital literacy curriculum made by organizations, most of them are meant for teachers or parents. In addition, the curriculum are copyrighted so we are not able to use any of them. Due to time and budget, we were unable to create an effective curriculum. Future work would involve working with reserachers and content creators to design a curriculum.


Learning and Insights --


Design and create with purpose
This project stemmed from my interest in security and privacy education. I have worked with kids and their mental models of digital privacy in the past, and one common thing I kept noticing was the lack of knowledge on their part on how to protect themselves online. While some receive some tips from school and parents, there hasn't been a common tool to educate this generation of users. I hope this design opens the discussion around awareness and action of our youth’s security and privacy problems.

Understand your users, and keep it fun!
One thing that worried me about designing this project was how I may be repeating the pattern of creating an educational tool that is dull, unengaging, and ineffective. However, I listened to my users and received valuable feedback on how to approach a gamified version of a security and privacy tool. In turn, I added avatars, badges, and a pop of color to keep younger users engaged. Don't be afraid to add some color!

Speak the same language
Since security and privacy can be daunting to non-technical users, I wanted to find ways to deliver information that is simple and easy to understand. While this platform still exists on a mobile platform, there are ways that this can manifest itself into books, movies, and music that everyone can enjoy. My role as a designer is to ensure information is delivered to those who need it and allow them the space and autonomy to take action.

 

Thank you!

Thank you for visiting and going through my portfolio!
Feel free to reach out if you want to chat about my
projects, 
or for any advice regarding UX design and research. 

Thank you!

Thank you for visiting and going through my portfolio!
Feel free to reach out if you want to chat about my
projects, 
or for any advice regarding UX design and research. 

Thank you!

Thank you for visiting and going through my portfolio!
Feel free to reach out if you want to chat about my
projects, or for any advice regarding UX design and research.