Pebble Health
Aug 2013 – Dec 2017
Using activity and sleep data, mobile graphs show you an organized view of your health. When you’re reminded of how you did yesterday, you’re more motivated to do even better today.
Role: Interaction Design, Visual Design
In 2016 Pebble decided to turn its focus on health & fitness. Product Design team racked brains trying to come up with our vision for a “health tracker.” The market is saturated with health devices that are more or less similar in their approach; we wanted to come up with something that feels more natural and less goal-oriented like the other devices.
I designed the mobile experience of Pebble Health for iOS and Android app: presentation of activity, sleep sessions, heart rate information and workouts, which were backed up by graphs where the user would be measured against his/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's activity and sleep. Design solution should be flexible enough to easily add more sources of data when we’ll have it: heart rate, workouts, stairs have taken and more. So I came out with a concept – 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 their performance. In addition to the numerical value of steps and sleep, I designed the graph to visually show how a user is performing against their changing 'typical'. In effect, they’re not just racing against the clock, they’re racing against themselves.
Another goal was to show some useful insights of the data we’re collecting from user’s device. Personally, it was very important not to just present boring numbers on a dashboard. To solve that I designed graphs in the way they’re showing insights and trends so a user can see if there’s a progression or regression in activity, sleep patterns or heart rate data.
Few milestones of visual design explorations
Visual Design Evolution
I spent a lot of time trying to apply the Pebble's visual language that we were using on the watch and bring it to mobile apps. This goal was truly challenging. Merging unique visual style and mobile platform guidelines took some time to get it done right.
Activity card design evolution over time
Final Visual Designs
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 work with a real data. I've seen hundreds of nice looking styles on Dribbble that will not work in a real life by any chance. So 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
Give it a try
Available for iPhone and Android. Pebble Time or Pebble 2 watch series required.
↑ Back to top ↑
Let's build something together