A React Native app for High Intensity Interval Training (HIIT)
While working at Rigma.io, we developed a series of apps for iOS and Android using a new technology called React Native that allowed us to develop apps that would natively port to both systems, so we would only need to code things once instead of twice.
For the first project, we decided to start with an app for tracking your progress on HIIT trainings, a type of exercise that makes you work really hard for a short interval, and then rest, instead of just constant exercise. Our goal was to create something slick and that would allow to be run both on phones and smart watches.
Because of screen size and little attention users can give to a screen while working out, my approach was to create something very visual, with big typography and audio complements so that it wouldn’t be necessary to keep looking/touching the device to interact with it; as it is very complex to do so while tired and sweating.
Product Design, UX
Designing with both screens in mind
Besides the technical challenge of creating iOS and Android versions with the same code, we had to support people using it both on the phone and on their watch, and being able to interchange.
The solution came reducing the app to clear typography only, and a simple concept: Time would be represented by a vertical progress bar which will scale down to 0 as the workout progresses.
This allowed the user to understand quickly what went on, and have a feeling of how much longer would they need to keep the high intensity.
I am happy to say that over two years after this project, HelloFresh is very happy with the designs and continues to use them to onboard their customers.
I am always happy when I can solve a UI just with typography and the bare minimum of iconography. The real estate of the screen was so critical, that the interface design required high attention to detail and lots of testing.