Transcending the barriers of fitness
Introduction
The market is full of various fitness training applications mainly targeting individual user. As of yet, LiftSync app has no equivalent among other fitness mobile apps on the market. LiftSync targets teams as a whole unit. These can be university, college, school teams etc. Sports teams make up the app’s end users.
Our customer, LiftSync Inc., came to us with the general idea of the concept. Onix team had no technical documentation to begin work on development or design for fitness app. We only had a general concept summary that required deep market research efforts.
For the app design and development, we worked directly with the client’s contractor. To get the project going, we conducted a business and market analysis of the existing fitness apps. We worked through the idea, drew wireframes, created supporting documentation, developed a user flow map and an interactive prototype, did full app design, and turned it into a multi platform software product.
Approach
In this project, Onix team served less than a contractor side, but more as a product manager. The customer was interested in the final product and was very limited in terms of involvement in the ongoing process, for app design it was limited to color scheme examples.
As a result, the design and software implementation for the LiftSync app was based on our vision of final product.
Main challenges
During the development process, we have encountered several main challenges:
Design
We created unified design for both target platforms - Android and iOS. Our goal was to produce something that would look different from what is already available on the fitness app market, but provides the best user experience.
Analytics
The task included creating a rich analytics component for the entire team as a single unit, groups of athletes and individual athletes. Analytics are fully integrated with a fitness wristband, calculations, averaging, etc. It is by far the largest and most complex part of the app.
Permissions
LiftSync app provides diverse features for different
groups of users, so programming the part that allows to
separate permissions for various staff members and individual athletes was a rather intricate task.
For whom this product is
staff and athletes. Both app versions support full metrics for team, groups and individual athletes and putting it all together allows following dynamic workout progress for each logical unit. The app is built around workouts, exercises, schedules, weights, sets, reps and much more with a sophisticated flexible monitoring progress view and analytics comparison features.
The app solves the main goal - collecting data and displaying metrics for the team as a whole, groups and individual athletes. It allows to monitor and follow the progress dynamics and compare them at different points of time – weeks, months, years and custom time range.
User flow of the app
The project consists of three main parts:
- Mobile app for staff
members and athletes - Web administrative
panel and back-end - Wristband integration
with the mobile app
The key features of LiftSync app:
1. Workout metric analytics:
Receiving, viewing and comparing workout progress data for individual athletes, groups of athletes and team as a whole by separate workout iterations and in dynamics4. Exercise and workout management:
Creating, editing, adding and deleting exercises and workouts for team, groups and athletes2. Profile management:
Adding, editing, updating, deleting of athlete and staff profiles5. Management of athletes’ groups and staff:
Creating, editing, deleting groups of athletes or staff3. Social component:
Broadcast messages to team or groups6. Support:
Assistance to any staff member seeking help in using the application
Prototypes and UI/UX Design
Design was one of the main challenges in the project since the app had to display analytics data, lists of workouts, exercises, workout iterations, profiles, etc. And we strived to display and work with metrics in a playful manner.
Our goal for app design
The app exhibits different metrics. The main goal for the app’s design was to make UI as easy and clear as possible and minimize the number of controls. We tried to avoid using complex multi level elements.
We made each concept interactive and conducted testing to click through it and identify any extra steps a user had to make and potential difficulties. Then we went back to concept development and worked on its simplification. This step was repeated several times and each time we cut down the number of controls, taps and implemented intuitive swipes where it was suitable. Location of each control had to be easily accessed on devices with different screen sizes so that users could navigate through the app at the reach of one thumb.
Testing design according to UX requirements
Each screen and each control was discussed by our project manager and designer in the attempt to find the best approach and maximize simplicity with no functionality being cut down.
Options menu presented as action/bottom sheets
To add some kind of UI eye candy all menu options were implemented as action/bottom sheets animated from the bottom of the screen. This design feature has significantly changed the final look of the app. As a result, users see the screen and all actions are performed in an intuitive and easy manner at the bottom of the screen and with great reachability while having the screen almost fully visible.
Pleasant looking design
The app consists of numerous screens that can be rather similar to each other (lists in most cases). We wanted to add something that would differentiate the look. We created action/bottom sheets, added animation, developed hierarchical color scheme to make the app more vigorous. The number of colors used for the app was intentionally limited - red, grey, green and blue to make all elements in the app sectionally distinguishable, but yet keeping the app from looking flashy.
Design that considers different platforms (iOS and Android)
We developed the design so it could be symmetrical both for iOS and Android and tried to use native solutions of each of the platforms to avoid unnecessary complications. The project budget was also taken into consideration, so we made a design that utilized the best possible solutions for each platform, keeping the code logiс robust and maintaining a high performance level.
Technology stack
We had very specific timeframe for the final product delivery. Backend is done on Node.js and MongoDB, iOS is done on Swift and Android on Java.
Result
During this project we’ve learned that:
Holding daily meetings is very efficient. All team members knew what was going on at every step of the project and could easily help or correct each other during decision making.
Working on one design that fits two platforms is not easy but possible. But for this, strong knowledge of the platforms is a must in order to find the golden mean for the design implementation. As a result, we were able to save time and budget and also create a unique design that also feels familiar to all users.
Only due to an intense collaboration between our designers, developers and QAs we were able to implement the project most effectively, within the set deadline and optimize each part of this product.