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
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
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
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
After over 50 iterations during about 18 months of design work, over 140 screens and layouts were designed for the final delivery.
Heart Rate Graphs
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
↑ Back to top ↑
Available for iPhone
. Pebble Time or Pebble 2 watch series required.