As part of Personal Informatics Design course, my group created a prototype iPhone app to help users change their behavior in order to lead happier lives by allowing them to accurately perceive how their activities impact their mood.
The app accomplishes this by providing an iPhone app with functionality to track a user's activities and their mood throughout the day, and then make sense of this information through visualizations. As an added incentive for using the app, there is a system of game mechanics involving a leaderboard.
I mocked up the iPhone app first, but before I began developing, I created paper prototypes in order to test the validity of the idea. I gave these paper prototypes to a small group of people to test the burden of filling out something describing their activity, mood, and feelings throughout the day.
I made the paper prototypes in Illustrator, basing them off of the mockups, and designed them to fit all of the information we needed onto a pocket-sized 3 x 5 piece of paper.
The users reported that while it was slightly annoying to remember to take out a piece of paper and fill it out several times a day, they all actually enjoyed the process of picking out emotions. From user interviews I recommended that we only prompt the user to use the application four to six times per day, as any more than that would become burdensome and quickly annoy the users.
I created the software mockups in Adobe Fireworks, and the prototype was built in Python using Google AppEngine. The prototype consists of a screen to enter activity, a screen to chart mood on a five point scale, and a screen to select feelings.
Initial designs included an option to let users enter their own custom activity, but user testing with paper prototypes showed that users did not want or use this option, and that the list of activities I came up with was sufficient.
My design from Adobe Fireworks (left) compared to the functional prototype (right) I implemented in PHP, HTML5, and CSS3
I decided to use a color-coded scale for mood, with green indicating a good feeling, and red indicating a bad feeling. User testing will show how effective this scale is. One potential issue with the current prototype is that it may be unusable for those who are red-green colorblind.
My design from Adobe Fireworks (left) compared to the functional prototype (right) I created.
The third screen allows the user to select their specific feelings. The user may select more than one feeling at a time, and my paper prototypes showed that users enjoyed this feature and often picked two or more moods each time.
My design from Adobe Fireworks (left) compared to the functional prototype (right) I created.
I mocked up the ability to set goals for certain activities. This ties into visualization and user incentives, allowing a user to track specific activity goals.
The mockup of the saved activities page
Goals would be tied to social media, to offer additional incentives via social pressure.
Proposed integration with Facebook
As an incentive to participate in using the app, I came up with a scoring system (involving daily bonuses, multipliers, and extra points for checking in on weekends) and a leaderboard. Users would be able to track their progress against their friends, against local users, and against the global community.
Leaderboard with some basic point values
As important as the game mechanics in incentivizing users is the offering of visualizations. Visualizations help users interpret the data they're collecting. I designed several of the visualizations, including the one below, which shows mood, activity, and feelings over time.
While the basic functionality of the app was implemented, some of the more complicated programming tasks, like implementing the leaderboard and visualizations, were not implemented. I plan to continue working on gamification topics as part of my graduate studies in the Fall semester of 2011, and I may implement the game mechanics I developed here, or use the basic idea in another app.