This is a guest post written by the winners of the HyperTrack hackathon at Angelhack's San Francisco Global Hackathon in July 2018

For their Global Hackathon series, Angelhack's San Francisco hackathon focused on the theme of seamless technology. With a wide range of challenges presented by Angelhack and a handful of tech sponsors, this hackathon allowed us to create something cool that incorporated APIs and specific open-source technologies. We wanted to build an app for the Fitbit Ionic device and we chose to tackle a problem we personally experienced living in San Francisco–the substantial number of elderly Chinese seniors who lived in Chinatown alone.

The problem

Wanyi Chen: I spent my summer interning in San Francisco, and I rented a place in Chinatown. Almost as soon as I moved in, I was intrigued by the interesting community. More than 60% of the community are senior citizens, which means that many of them don't have children living with them to take care of them. Yet the community is thriving in its own ways. The seniors do their own grocery shopping, socialize with each other by playing chess at a plaza, and even run small family businesses like authentic Chinese food restaurants. We want to connect the senior citizens and their family members in a way that doesn’t intrude on their independence, but make sure they’re being taken care of. That was the inspiration behind Heartbee.

Ami Zou: I am a problem solver by heart and I love building things that matter. After doing some research on the senior population and death rates, I was so shocked to find that 70% of people age 65 and above have heart disease; and in the U.S., more than 610,000 people die every year because of it. This is a huge problem, and the situation is even worse in aging countries such as Japan. Personally, I had a relative who died years ago from a heart attack, and it broke my heart we couldn’t rescue him in time. I don’t want to see people facing this loss anymore, and started to brainstorm with my teammates about possible solutions to prevent and solve this problem.

The solution

Gabi Stein: I knew that there were lots of areas to build solutions around helping the elderly live more independently. With the combination of my group’s knowledge we quickly designed a plan to build an the MVP of an application that could track heart rate in real time and notify a family member via a web or mobile application. This was an interesting problem and hack to work on because I was able to work on a problem close to my community while simultaneously working data engineering and product management skills.

My role for the project was to write up the product requirements document listing background information, what was in scope, out of scope, and user flow. This helped keep the engineers and designer in sync.

Additionally, I helped create our data pipeline. The Fitbit is designed for the user in mind, so it does not store any data on the device itself, allowing for much longer battery life cycles as compared to its competitors such as the Apple watch. Data is stored on the companion app. In order to access this data we created a DynamoDB database from AWS. The Fitbit SDK preceeded to hit our database and we were able to store data within a table.

WC: I was excited about the feature design part. Before the hackathon I thought, "I've designed for PC and phone screens before, but never a watch screen. I wonder what unique challenges it has because it's so small!" Yet what surprised me was that basic Human Computer Interaction guidelines are still so applicable. Initially we were so focused on what happens on the family’s end after the senior user sends out help messages, that we forgot to give feedback on the senior’s end. Regardless of the screen size, if a user presses a button and the interface gives no feedback, it would be poor design. So I added a pop-up “take care” message that will show up after the user presses the “I’m OK” button and auto-disappears after three seconds. I also added a “help is on the way, log on to www.heartbee.com” message after the user presses the “help” button to reassure the user and inform them of the next step.

The challenges

Sophia Liu: Using Fitbit's design guidelines and UI components, I laid out the UI and UX flow of the screens on Sketch to create a mock prototype. It was challenging working with a small dimension to make every screen easily glanceable, concise, conversational, and forgiving to the touch. I used familiar layouts: galleries, notification and call-to-action buttons, lists, and a slideshow that can be swiped through.

AZ: After talking with people from Fitbit, we realized we needed to design a platform with a Fitbit native app on the watch, a database in the cloud that collects data, and finally a web or iOS app that fetches data and sends the updates and notifications. I have been to a few hackathons and worked as an iOS and game developer, entrepreneur, and product manager, so this time I decided to work on something different -- building a web app. In order to make our notification system work, we need to both trigger a notification in our website and start a video chat. I spent the first afternoon setting up the website and service worker. However, soon I realized I needed to set up a host before I could use the service worker. Time was ticking, and I decided to move on with Agora's SDK to make the real-time streaming work first. By early Sunday morning, I finally had a working web app that triggers a notification and a video call when the heart rate passed the thresholds.

Building with HyperTrack

Then I started to build the iOS app using HyperTrack’s SDK. The main purpose of this mobile app is to track users’ locations, so when an emergency happens, others will know where to rescue the person in danger immediately. It also keeps a historical record of the last 15 mins path, so family members can learn each others’ walk patterns. The HyperTrack team was incredibly helpful and we were able to finish building the features within an hour. We firstly set up the SDK and created a map page. It was very easy to get location, changes, and updates using HyperTrack’s built-in methods. Then we used a polyline to draw the historical path. Once this was done, I focused on connecting our web app with AWS to fetch the data. The tedious part was to clean the data because it generates hundreds of rows per minute but we only cared about those that passed the thresholds. I didn’t have time to clean up everything but managed to have a working version for our demo.

SL: I created a design system and high-fidelity mockups for the different interfaces we chose to use, providing an intuitive dashboard with simple words and icons that make everyday use easy and inviting for the mass consumer. In conjunction, our apps (Fitbit, web, and mobile) would work together demonstrate the full intended functionality of Heartbee, which would keep everyone updated on the health status of their loved ones and keep everyone in check. It can easily be scaled into a tablet or Android app, or for any other platform. The MVP we created and presented during the hackathon demonstrates this concept.

The demo

AZ: Our demo was a blast. Many people loved our concept and were impressed by our platform. We ended up winning three awards: HyperTrack’s challenge, Fitbit’s challenge, and AngelHack’s Code for a Cause Impact Award. I felt very fulfilled seeing that our project has potential for a greater social impact. It was an amazing weekend teaming up with wonderful people and building a challenging product from scratch.

The team

Team HyperTrack wishes team Heartbee all the best. Developers building apps that want to track the movement of users, please sign up here to build with HyperTrack.