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.
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.
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.
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.
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…
And chooses between different career paths. She wants to learn more about a Musician’s career.
She is able to customize her hero to her liking…
And connects the application with her social media account. By doing so, she shares her application activities on social media.
Machine Learning techniques analyze her social media habits. The application assigns points according to a criteria using data from employers.
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.
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.
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.
With Zero to Hero, Julie better understands her social media habits while learning about career paths.
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)
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.
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!