Utilizing gamification to inform better social media habits

Created using Pixeden’s Modern PSD Responsive Showcase Template


User Research, Information Architecture, UX Design, Visual Design, Prototyping


A gamified application to help teens think about the content they place on social media.

A hackathon project made in November 2014.

The Team

Tina Petrick was the founder and pitched the initial idea. Lead Developer, Michael Braeutigam & Developer Arpit Shah, researched the idea’s technical feasibility. Christopher Panlilio helped research marketing and business validation.

I was responsible to wireframe & design the interface using PencilCase, a prototyping tool for iPhone apps.

The Problem

Out task was to build a team, idea & prototype it within 48 hours. We selected the Online Personality Challenge to help students control how others view them online.

Skip to prototype explanation and click here
Skip to the outcomes and click here

The Journey

Getting to know the student mindset

Tina pitched an idea where IBM Watson’s Tone Analyzer check social media posts for aggression.

We interviewed students about their social media habits and their personal online reputation. Most students were apathetic about their online reputation, and preferred consuming media. Yet data states that hiring managers care about potential employees’ social media posts. We needed to balance the employers’ needs with the students’ mindsets.

Creating an engaging app

We learned that teens will not use invasive applications that tells them what to do. We pivoted from the original idea cautioning students to an providing information. A visualized analysis on social media posts promotes critical thinking about online behaviors. This passive analysis will provide insight to positive or negative social media posts.

To engage teens and promote returning users, we researched effective strategies. We decided to integrate social media sharing and gamify the experience. These methods allowed us to maintain educational aspects while providing fun entertainment.

The Solution

Zero to Hero is a mobile game that analyzes social media channels, assigns coins for positive posts, and rewards the in-game hero. The hero is following a dream career and needs coins to progress. Users can buy equipment & activities to help the hero progress with their career. To gain more coins, users earn trophies for posting positive and thoughtful content. Users can also share application activities, view others’ rankings, and compete against friends.

The use case & story

Julie is a 13-year-old who has been using Twitter for about a month. She goes on Zero to Hero…

Mockup screen — intro

And chooses between different career paths. She wants to learn more about a Musician’s career.

Selecting the hero and career path

She is able to customize her hero to her liking…

Customizing a hero’s gender and colors

And connects the application with her social media account. By doing so, she shares her application activities on social media.

Setting up a social media account and posting

Machine Learning techniques analyze her social media habits. The application assigns points according to a criteria using data from employers.

Going from the home page to the stats page

These points are coins to buy equipment & activities and progress her hero’s career. She wants to play at the Children’s Hospital, which rewards her with coins and points to advance her hero’s career.

Viewing a hero’s progress and accepting an activity that rewards with coins and level points

To gain more coins, she earns and views trophies for positive and engaging social media posts. If Julie believes she earned a trophy, she can assess why her social media posts did not qualify.

Listing different achievements and rewards

She can also compare her current social media ranking with other friends and users. She can look at their statistics to understand why others may be doing better than her. She can also follow others to receive alerts on social media posts and associated points.

Viewing the scoreboard, other people’s statistics, and viewing alerts

With Zero to Hero, Julie better understands her social media habits while learning about career paths.

The Outcomes

  • PencilCase prototype
  • Third Prize and People’s Choice in the EduApp Challenge
  • Press article

Six teams competed to fulfill the criteria:

  • Most likely to succeed (i.e. most likely to be applied and used in an educational environment)
  • Creativity and innovation score
  • Designed with the end user in mind (students and educators)

The Learnings

I enjoyed developing the wireframe and visuals, but if I had more time the UI would have more consistency. The colors also provide poor contrast, which is something that I improved over the years.

I would also run a user test and improve the visuals and interface. It would be helpful to see what teens think and whether Zero to Hero would motivate them to improve their social media habits. After usability testing, I would also conduct longitudinal studies to verify the usefulness and success of Zero to Hero.

The Tools

Software: PencilCase, Adobe Illustrator

Thanks to Ramil Derogongun for the Color Picker UI.

Have any suggestions or constructive criticism? Please comment below! I am always looking for ways to do better.

If you liked what you read or learned something new, support with 👏, spread the 💙 or follow me!

If my background, experience, and skills interest you, please get in touch!