National Fitness Campaign is on a mission to promote free fitness and healthy living by bringing their state of the art Fitness Courts® to over 4,000 cities nationwide and abroad. Powered by an all-star team of fitness experts and industrial designers, National Fitness Campaign teamed up with Yeti to build a mobile app for users of all fitness levels to engage with their local fitness court in an entirely new way.
Making fitness free and accessible to everyone is at the heart of the National Fitness Campaign.
With this mission in mind, the team was tasked with creating a fun and highly engaging mobile experience that encouraged users of all fitness levels to take advantage of the free outdoor fitness courts. So how do we boost engagement with the courts and bring a fitness community together?
Social media was showing that court goers loved the flexibility that the equipment offered. National Fitness Campaign’s Instagram hashtag was full of videos of users finding creative and challenging ways to use the stations. The app needed to capture this spirit of creativity and accessibility in the fitness community, while also promoting the full-body circuit training workout.
Using React Native to simplify the technical stack and reduce time to market while implementing platform specific native functionality.
National Fitness Campaign needed to quickly create a mobile application for both iOS and Android before rolling out their first fitness courts in late 2017. In order to reduce the time, effort, and money it would take to get an application on both platforms, React Native was the best option to maintain a singular code base.
The challenge though was that the Fitness Court app also makes heavy use of native features like location, camera, and low-level video editing. This meant the application needed to call into natively written functionality for each platform to get the best performance and desired outcome. Unfortunately, performance and native functionality is the specific area where React Native can get mucky.
“Yeti brought creativity, drive, and a powerful team to our project. We are thrilled with our new app and early reviews are exciting!”
Mitch Menaged, Founder, National Fitness Campaign
We designed and developed a video-based mobile experience that encourages users to learn, share, discover, and challenge themselves on and off the fitness courts.
The app is built around three primary concepts of the National Fitness Campaign:
- Learn the 7 minute 7 movement fitness circuit
- Record a clip of your best moves, or
- Discover creative ways that others are working out, locally and nationwide.
The 7 minute 7 movement fitness circuit
National Fitness Campaign’s Fitness Courts are designed to give you a full-body workout that can be completed in just 7 minutes. Physical signage explaining the movements on the courts were weathered, easily overlooked, and expensive to prototype, so the mobile app was our opportunity to bring awareness and recognition. The 7 movements are the core of the app, with navigation and content structured around them.
For each fitness court, National Fitness Campaign will host special challenge competition events as part of their activation strategy. To qualify for the event, users submit a custom video of their best timed circuit, recorded and compiled through the app.
Creating powerful videos
Since National Fitness Campaign’s philosophy is rooted in promoting a healthy lifestyle for people of all levels of fitness experience, it was important to prioritize the fun and rewarding aspects of working out, not just a showcase of physical perfection.
React Native does not come with advanced platform specific functionality built-in. This means we had to implement and find solutions for the camera and video editing features needed to accomplish our goal. Since we were supporting both iOS and Android we had to specifically tailor this functionality to each platform.
Due to performance and user experience reasons we wanted the video processing to happen on-phone instead of offloading it to a server where we’d only have to write it once. This led to more duplicated front-end code but overall a much better experience for the user creating shooting and creating videos with the application on both platforms.
- React Native
- Video editing with 'AVFoundation' on iOS and 'ffmpeg' on Android
- Python & Django Backend
Jonathan Fudem, Product Manager, National Fitness Campaign