Health band screen design

UI & visual design /Information architecture

What is the t-band?
T-Band is smart wearable device. This device helps in tracking sleep, calories burnt, steps, heart rate sensor, etc. The Band was also capable of detecting different modes of outdoor activity like, walking, hiking, cycling and other outdoor sports. The wearable device can also communicate with a smartphone to work with a companion app (t-health) that delivers detailed information.

Why redesign?
This was manufactured in China and came to us with a pre-existing operating system and had a skin which supported multiple languages.

Upon first inspection of the band we could identify these issues:

Inconsistent user action flows.
Iconography was inconsistent across the band screens.
The types, font sizes and fonts were inconsistent across different screens.
Too much and cluttered information.

We also wanted to add more features to the band like Zen mode and yoga mode which were popular features according to our user research for the local market. Since this band was not manufactured as per pre-defined guideline, we had to incorporate the smartron branding within the band screens.

Challenges
This was a completely new platform and the form factor posed the following limitations:

The band screens are rendered as images and not scalable vectors or fonts.
The interface provides no control over point sizes, the only aspect that can be controlled are the height of the fonts by scaling the images on the screen.
The device itself has very limited memory or processing power.
The animations on the screen are done with PNG sequences and because of the memory of the device only 2 or 3 screens can be used to illustrate the animation and patterns.

In addition to these problems, this was the first time I was working on this technology. The communication with the manufacturing unit in china that spoke little to no english posed another problem. As there were multiple levels of interpreters involved within the communication chain, detail was lost in translation. Thus, the specificity of design and presentation was mission critical.

Process and measures
This project demanded ground up thinking, and presented rules that posed a unique guidelines for working, here are some measures that I adopted to simplify the design system for the band screens:

Adoption of a simple grid for proper structure.
I identified and divided screens into 4 categories with 4 different grid systems. This would enable quick translation and provide a visual consistency to the overall look of the band screens.

Roboto as the typeface suited best as it is extremely legible when the text sizes are very small.

The iconography chosen was simple, solid and with negative space visible within the band screen so that it is visible when very small.

Redesigned 4 user customizable watch faces.

Haptic feedback and vibration rhythms were added for alerts and ques for breathe exercise and yoga mode.

Adoption of short quick animation for features like breathe, alarm etc. added a quicky and playful mood to the screen design.