Pebble Health
Aug 2013 – Dec 2017
Using activity and sleep data, mobile graphs show the user an organized view of his or her health. When the user is reminded of how he or she did yesterday, he or she is  more motivated to do even better today.
Role: Interaction Design, Visual Design
In 2016, Pebble decided to turn its focus to health and fitness. The members of the Product Design team racked their brains trying to come up with a vision for a “health tracker.” The market is saturated with health devices that are similar in their approaches; we wanted to come up with something that felt more natural and was less goal-oriented than the other devices.
I designed the mobile experience of Pebble Health for iOS and Android apps, including the presentation of activity, sleep sessions, heart rate information and workouts, which were backed up by graphs where the user would be measured against his or her average.
Pebble Health cards in iOS app
Interaction Design
One of the main goals was scalability. At the moment of launch, we had only two sources of data: user activity and sleep. The design solution should be flexible enough to easily add more sources of data: heart rate, workouts, stairs taken and more. I conceived of  a cards-based interface. By using them, we were able to add more and more data sources in a very easy way, virtually without any limits.
Sketches showing the idea of using cards
Visual Design Concepts And Exploration
It was very important to visually communicate the concept of the "typical," a user’s average that constantly adjusts based on his or her performance. In addition to the numerical value of steps and sleep, I designed the graph to visually show how a user is performing against his or her changing "typical." In effect, the user is  not just racing against the clock, but against himself or herself.
Another goal was to show some useful insights based on the data collected  from a user’s device. I wanted to avoid merely presenting boring numbers on a dashboard. Hence, I designed graphs to allow users to see e progression or regression in activities, sleep patterns  and heart rate data.
Few milestones of visual design explorations
Visual Design Evolution
I spent a lot of time trying to apply Pebble's visual language that we were using on the watch to mobile apps. This goal was truly challenging. Merging the unique visual style and mobile platform guidelines took some time to get right.
Activity card design evolution over time
Final Visual Designs
After over 50 iterations during about 18 months of design work, over 140 screens and layouts were designed for the final delivery.
Activity Graphs
Sleep Graphs
Heart Rate Graphs
Workouts Cards
Edge Cases and Additional States
When working on a project involving any type of data visualization, it's really important to get your designs to work with a real data. I've seen hundreds of attractive styles on Dribbble that will not work in real life. I had to do my best to make this happen for designs crafted for Pebble Health.
Some of the edge cases covered
User education cards
Available for iPhone and Android. Pebble Time or Pebble 2 watch series required.
↑ Back to top ↑
Let's build something together