FITNETE: creating designs, user flow and animations for a fitness mobile app

How we created over 200+ animations in 6 weeks and developed an outstanding UX design and user flow for a React native app

Fitnete is a mobile app developed in React Native for iOS and Android for facilitating workout with a full selection for muscle parts and advancement levels. Instead of using usual videos, all the exercises are animated, so the users don't feel intimidated by the "gym bodies" of trainers.

Challenge:

We were asked to design a fitness app for iOS and Android dedicated to people relatively new to the fitness and workout world. It had to have a relaxed, welcoming tone and not intimidate users who are just starting with regular exercise.

The overall challenge was creating a unique app on a pretty saturated market that will stand out from the crowd.

To provide something unique, the Client wanted to portray no videos but animations of female and male silhouettes. Using animations instead of real people would help the users not to focus on the great looking bodies of the trainers (which is often irritating for the people who are just starting fitness) but on actual body movements.

Some fitness videos were delivered by the Finite team - the challenge was to recreate the exercises as animations and also propose some fresh ones.

Process:

We started our work with a design workshop and UX analysis. After collecting all the data we designed wireframes and interactive prototypes, which were created in Sketch.

Since the app was about to be quite complex (over 50 screens and 200 animations) we have introduced our own Design System adaptation process. It was a great help in maintaining consistent delivery of screens with no interruptions caused by changes in branding.

We have also proposed a new flow of profile creating and registration, based on the height, weight, diet, and body parts of the users.

The main challenge was to create over 200 animations of exercises for the app. By setting up the mood of the app in the early UI exploration process we were able to look for the right kind of animation expert within our talent network.

After getting the right person on board, we started working on the animations in After Effect. They were recreated from the video materials delivered by the Fitnete team. We managed to quickly push the animated characters into a fully operational module for a proper workout technique.

In order to make the app stand out from the competitors, we proposed a set of branding improvements that were also planned in the first place. Thanks to the outstanding workflow we were able to take on this extra challenge and still deliver all the designs within the original deadline.

Because there was no set branding to start with, we knew that using a robust component structure in a prototyped Design System will allow us to make quick iterations to colors, fonts and atomic design structure when the final brand will be delivered.

Adam Kozłowski

Head of Design at Ideamotive

Outcome:

After our designs were done, the Fitnete team was able to dive into development straight away.

Not only we delivered UX/UI flow, all the screens needed and the workout animations which are the Unique Selling Point of the app.

We also took on some extra work to make sure that the branding side of the app is taken care of and that it can compete on a dense market.

The app is now available on the App Store for Android and iOS.

200+ animations
50+ screens

Based on minimal direction, they were able to collect competitive intelligence and find examples of work that would be a good fit for our product. They understand and navigate the industry to deliver a design that will truly stand out. Despite a heavily saturated market, they’ve delivered creative solutions that I haven’t seen before.

Adam Casole-Buchanan

President, Rierra