Heads Up - Health Tracking App

Heads Up Health is a health dashboard app that helps individuals track health-related information from various sources, including wearable devices. The Heads Up app collects clinical, lifestyle, and nutritional data, organizes it, and helps derive personal health analytics.

The system consists of two interconnected applications: a dashboard for patients that allows them to fill in data and health tracking software for doctors with patient management functionality.

Background

When we began work on this project, the patient dashboard was using the default Bootstrap design and was built with outdated jQuery technology. The doctor app was still at the early stages of development and far from ready for release.

Clockwise Software joined the Heads Up team to finish the doctor app and enhance the patient app with a fresh design and new functionality.

Challenges

The app design was created for large screens and neglected the needs mobile users. For example, the patient dashboard that includes many types of data was hard to use a smartphone.
The legacy app was built with jQuery - an outdated frontend technology that doesn't accommodate many modern UI practices. It was impossible to implement the planned functionality with jQuery.
The app for doctors was largely undeveloped and included only a list of patients along with their contact information. The doctor app didn’t connect to the patient medical tracking app.

Solutions

Redesign the patient app

We initiated a complete redesign of the patient app to adjust dashboards for use on small smartphone screens. We changed the positioning of elements, implemented dropdown lists, and made other adjustments to create a user-friendly responsive layout. For example, users can now choose between two color schemes according to their preferences.

Migration from jQuery to React

Since jQuery is outdated and doesn’t match the project’s frontend development requirements, we’ve started migrating to React — one of the fastest UI frameworks. Numerous React libraries enable us to implement any functionality. We use Redux to manage states and store data. D3.js is our choice for data visualization and dashboards.

Launching the doctor app

We’ve used the design mockups provided by the Heads Up team to implement the main functionality for the doctor app. Doctors can now create and manage patient lists, invite new patients and delete existing patients, and view, add, and edit metrics for each patient. With white-label functionality, doctors can customize the Heads Up app according to the needs of their practices, add and manage practitioner teams, manage billing, etc.

Features implemented

For individuals:

Analyzer

This tool allows users to view and compare metrics on a dashboard. Users can choose the markers and time range they’re interested in and the app will automatically create graphs to visualize the selected data. Data can be exported in CSV, PDF, and PNG formats.

Custom dashboard

We implemented a tile redesign and added the ability to restyle the dashboard according to user needs and preferences. Users can add or hide certain tiles, change the placement of tiles, and create new custom tiles.

For professionals:

Dynamic patients table

This feature enables doctors to customize the view of different metrics. The table aggregates data from various sources (wearables, third-party mobile apps, manual input) and can filter data to observe progress in certain report criteria and view historical benchmark data.

Practitioner notes

We created a system for keeping notes regarding things such as weight loss plans, recovery plans, and diet recommendations and sharing those notes with patients or other doctors within an organization. The Notes editor is built on top of the TinyMCE WYSIWYG HTML editor.

Technologies we used

React

Redux

React
Native

D3.js

Team

Frontend
developer

Mobile App
developer

Project outcome

The health dashboard app for patients and the medical tracking app for doctors are now connected. Doctors can add patients to the system, review patients’ dashboards, manage those dashboards, and create graphical analyses.

The redesign of the Heads Up app was a success. Both individuals and doctors appreciated the changes in the dashboard presentation on various types of screens. App users regularly take advantage of the newly developed features and appreciate their usability.

The Heads Up team recently employed a React Native developer to implement new features we developed for the website in the mobile app.

Heads Up Health attracted $1.3 million in 2020.