Heart Rate Zone App
December 2023
I designed and built this app for my son who competes in both track & field and cross country. I wanted to figure out a fun way for him to learn about heart rate zone training and develop enough interest to incorporate it into his daily training routine.
Project Data
UI Designer, Front End Developer
React, Bootstrap, Vite React
Photoshop, Illustrator, XD, VS Codium
A Simple App that Communicates the Benefits of Heart Rate Zone Training
As an avid cyclist, I relied on heart rate zone training quite heavily. Through my firsthand experience working with heart rate zones, I knew how beneficial they are in getting more out of my training regimen. They allowed me to quickly progress from a total endurance sport newbie who was barely able to finish a 5-mile ride to a solid rider frequently participating in fast-paced rides 100 miles or more. So, when I discovered that my son wasn’t using heart rate zones in his training, I wanted to step in and figure out a fun way to introduce him to the concept and hopefully - not in a very imposing way but rather in a playful way he would get a kick out of. That’s when I decided to work on this app.
Optimizing Layout and Content for a User with Limited Attention Span
While the concept of heart rate zones is straightforward, a quick google search yields a long list of websites that explore the concept and its training methodology in a way I find very wordy and one-dimensional. However, through spending a lot of time daily with my son, I was aware that he was typical of his generation - someone whose level of focus is constantly being challenged by endless and seamless supply of entertainment and distractions in various forms. As such, once you’re not in the center of his attention, it’s very difficult to gain him back.
The challenge then would be to:
- Come up with an interface that he would find appealing
- Optimize the layout and content so that anybody with a limited attention span can easily grab whatever info he/she needs with just a quick scan
Putting It All Together
Information Hierarchy Based on Significance AND ScannabilityWhile working on this app, I spent a lot of time watching Formula One races. The main point of interest for me was watching footage captured by cockpit cameras which showed the digital dashboard that is built into the steering wheel. While it’s almost impossible to make out what is exactly on the dashboard screen, you can still see the grid-like layout and its visual hierarchy (the most critical data such as current gear and tire temperatures occupies the center).
Digital dashboard on a Formula One racing car.
With this being my primary source of inspiration, I went ahead and did some brainstorming in figuring out the structure. While the layout of the results page went through several iterations, they essentially followed the same concept - the information hierarchy was established not only based on its importance BUT also according to its brevity and scannability. In short, information that required more than a few words was pushed towards the bottom.
Content structure was determined according to the significane AND brevity of informaton.
Information contained within the bottom pods is of equal importance as the actual heart rates. Heart rates don’t mean much by themselves until you layer in their physiological implications. I further divided the remaining content and have them populate the two pods based on the importance and scannability.
Longer information was pushed towards the bottom.
Added Navigation for Toggling Between ZonesMost of the sites that discussed the topic of heart rate zones displayed them in a single chart. While this has its benefits, it does take some level of effort to digest which may lead to a minor cognitive load. Personally, I wanted to treat information specific to each heart rate zone more like a snapshot that could be easily leafed through with a click of a UI. For this reason, I decided to add a navigation bar at the top so that a user can toggle between different heart rate zones easily.
I also added a gauge component in order to show where a specific heart rate zone resided on the entire spectrum. This provides a visual cue as to what the intensity level of a specific zone should be in relation to your maximum heart rate.
Adding a navigation allows users to toggle between different heart rate zones.
Post Production Notes
The app is currenlty undergoing some upgrades based on the feedback I gathered from my son. Nevertheless, he was very excited when I first presented him this app.