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

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

Summary:

Client

Rierra

Country

Germany
Project scope and technology

UX/UI Design, Mobile App Design, Animation, Branding, Illustration Design

Industry

Health, Media & Entertainment
Team Composition

1 Head of Design, 2 Animators, 1 Project Manager

Work duration

5 months

Fitnete is a mobile app developed in React Native for iOS and Android for facilitating workout with a full selection of 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 for to people relatively new to the fitness and workout world. It had to have a relaxed, welcoming tone and to not intimidate users who are just starting with regular exercise.

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

To provide something unique, the client wanted to avoid videos and instead show animations of female and male silhouettes. Using animations instead of real people would help the users not 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 recreating the exercises as animations and proposing 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 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 for registration based on the height, weight, diet and body parts of the users.

The main challenge was creating over 200 animations for the app. By setting up 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 Effects. 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 right away.

Not only did we deliver the UX/UI flow, but we also delivered all the necessary screens and 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 was taken care of and that it could compete on a dense market.

The app is now available 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