HealTH and fitness band

UI & visual design /Information architecture/Branding

What is the t-health app?
The app was a companion for wearable devices, t-Band and t-Band (Fit) that are designed and manufactured by Smartron. The objective of the app was to aggregate data via smart sync and display the users health data in a systematic and organised fashion on smartphone screens.

Why redesign?
The previous version of the app could only accommodate only one of the wearable bands. The newer bands had been designed with a different syncing technology and hence were not compatible with the existing app. Both the new and the old bands needed to be categorically included within a single app, so that there would be a unified listing on the Play store and App store. The redesigned app would also be future proof in a way to accommodate any further released bands or other wearables.

Team structure
The 3 member team that I put together comprised a UX designer, Illustrator/ Visual designer and me. My role was to lead the design project, with the other members of the team and come up with UX and UI concepts and assist the development.

Problems with the existing app
As a team we identified these problems:

1. Linear architecture of the app couldn’t accommodate new bands or future released devices.

2. Non-discoverability of features.

3. Bad information design was not beneficial to the users.

4. Heavy battery consumption due to rampant data syncing.

5. Outdated and inconsistent Visual design.

6. Clutter and poor color contrast in data representation.

7. Low app engagement.

8. Large app size.

Process and measures

As a team we took a step back to look at the features that both the wearables had in common and different from each other. This allowed us to consider the following measures to improve the app.

For the common features in both the apps we designed the same experiences (screen design and interaction) that would keep the app size to a minimum and reduce the development effort.

To educate the users about the features and the gestures of the app, we designed detailed onboarding screens with illustrations to communicate better.

Addressing the color contrast issues within the app design. We retained the brand color, orange, and introduced a contrasting color purple. This helped to  differentiate today’s time and trend data. As a function of this, the call-to-action and the other user actionable elements highlighted clearly.

We considered a card approach for the dashboard. These cards had concise data that would explode for a detailed view of each feature. This allowed us to simplify the layout and keep the historical data a couple of levels deeper, which consumed more battery power to access.

The data was now represented with simple bar graphs which were simpler to read. Day’s data and trends of the last 15 days were separated and stored locally on the phone. This allowed the users to compare daily activity and fortnightly trends. Any data older than this was saved on the cloud for an archived and detailed view. This allowed the app to feel snappier than before while saving battery and still providing insights on demand without over-consumption of resources like battery and network access. This also reduced our server usage by 52% as seen during the testing of the app.

We also developed new iconography for the app to match the iconography used on the band screen. The previous app used a custom font (Nunito sans) which was removed and defaulted to Roboto for Android and SF-Pro for iOS devices to allow faster loading time while reducing app size.