A mobile app that brings emotions to data by integrating users' photos with their physical activity data

SKILLS: Contextual inquiry, Affinity diagramming, Persona-based design, Storyboarding, paper prototyping, heuristic evaluation, Usability testing

TOOLS: Balsamiq Mockups, Proto.io

Why do people self-track?

What are the pain points?
The project started by conducting several contextual inquires with people who engaged in Quantified Slef activities.


We conducted contextual inquiries to collect information about users with various levels of Quantified self activities. The observations were then used to gather the motivations and deterrents as to why they self-track through a group affinity diagramming activity.

Lifestyle Enhancement
Motivation through social interaction

Too much effort
Low transparency
Loss of initial interest


User Personas & Storyboards

We created five user personas based on our findings from contextual inquiries. These user personas ranged on the number of activities they tracked and how frequently they engaged in self-tracking: beginner, spurter, experimenter, the extreme, and the athlete. We then created storyboards for possible use cases by each user personas.

Paper Prototype

After identifying the user needs and personas that would follow our concept, we brought our idea to life through creating a paper prototype. Paper prototype was a quick and easy way to get the concepts across and collect feedback.

Watch the demo ▸

Paper Prototype

Low-fidelity Prototype

To satisfy heuristics for mobile applications, we used Balsamiq as our prototyping tool for the second iteration of the app. Since Balsamiq had many of the features identifiable in mobile apps, it helped us meet many of the consistency and standards of the heuristic evaluation.

See the full prototype ▸

High-fidelity Prototype

Based on the feedback from using the think-aloud method and heuristic evaluation of the Balsamiq prototype, we refined the application further to a more sophisticated level. In order to allow users experience how pix2bits feels as a mobile application and provide insightful input, it was created on Proto.io.

Due to limitations in Proto.io's logic, we had a workaround through the questions asked in the usability test. For example, the app was created to select as many self-tracking applications, however, we instructed users to pick one and inform us what others they would add through discussion.

See the demo ▸

Timeline allows the user to have easy access to her friends' recent updates. arrow
timeline-bw timeline
Tab bar
Tab bar enabales the user to quickly switch between different subtasks. arrow
My activities
The user can see her own past activities on a calendar view. arrow
activities-bw activities
Integrating emotions
The user can also view her corresponding images along with her past activities. arrow
Hamburger menu
The upper left menu allows the user to choose which activity/parameter to view. arrow
menu-bw menu
Multiple activities
User can view activities individually or as a combination. arrow
Compare with friends
From "Friends" tab, the user can choose any friend to view their activities side by side. arrow
friends-bw friends
Sharing experiences
Users do not merely compare numbers, but they also share experiences. arrow

Experiment Design Process & Usability Testing

One of the hardest parts of conducting usability tests is finding the right users and recruiting them to give up some of their time. One approach we came up with was a survey to screen the category of users the potential user would fall in, such as extreme to minimal participation in self-tracking activities. To also confirm user needs were addressed and met, a usability test was created with each task emphasizing a certain need. Metrics of success were developed to ensure that the workflow was streamlined and intuitive, while concepts of the application were comprehensible.

Usability Testing

Pix2bits Highlights

  • Current self-tracking apps lack the memory component of how data is collected; integrating media can bridge this gap.
  • Adding photos helped users learn more about their self-tracking journeys and create a personal connection to the data.
  • Having communities share how they reached their step goals allowed for discovery of new activities to take part in.

Lessons Learned

  • Different uses and limitations each prototyping tool. Use them wisely.
  • Importance of referring to user data and user engagement in the design process to ensure their needs are met.
  • Iterative process of prototyping allowed for constant user feedback and support to develop mobile application.