A multiplayer fitness game where 2 people battle to beat each other's rep counts on a variety on body weight workouts.
They only need a smartphone each and workout in front of it.
Task - New UI concept that makes the poster child product look professional enough & on par with competitors.
Team size - solo
Duration - 3 weeks (May 2021)
BACKGROUND
Insane AI is an ambitious company that
doesn't shy away from tackling the big players.
They want to revolutionize fitness
The game while showing the tech capabilities
and functioning well, lacked the visual appeal.
The comparison between competitors was a
differentiating factor they sought to eliminate.
Insane AI is an Indian start-up that believes in making the best personalized home workouts by turning them into games.
They use computer vision to achieve this.
CURRENT APP
- Missing visual consistency
- Redundant menus
- Hierarchy difficult to memorize
- Removes focus from main game mode - 1v1 fit battle
CONCEPT
I was given full freedom to make a new UI design. So I set 3 guidelines that follow the brand/company.
Note. It was oriented towards the few main screens. My task was not to fully recreate every inch of the app.
REFLECT YOUNG ADULTS
Target demography 22 - 35 working adults. They will not settle for a UI less than their daily apps - Instagram, Netflix, YouTube, Uber etc
SEMI-HARDCORE
Made for people who adhere to fitness oriented life-style but not necessarily gym freaks.
VIDEO GAME-esque
Not as utilitarian as conventional fitness apps like Nike run club or cult fit etc. Fit Battle has to be on the middle ground between app & game.
UI FLOW
W R F R M
VISUAL STYLE
ICONS
Line work/simple icons.
Placeholder icons from 3rd party vendors.
Custom icons was to be made only if the app is to be remade completely.
TYPE
Futura PT Demi Italic
Title 72pt
DIN Medium
Sub header 48pt
DIN Medium
Body 24pt
COLORS
Primary
Accent
Text & Icons
#00C2FF
#F89D14
#B5B5B5
Should represent brand's colors and element of competitiveness, hence the distinction with blue vs yellow
TITLE SCREEN
Appears upon launching the game.
Every fortnight, the top performing player from leader boards will be featured in the title screen.
The social/competitive aspect was a must-have-in-the-future feature, early in development.
ONBOARDING
Appears when playing for the first time. Short step by step of how-to-play to get into the game quickly.
Would be followed by a sign up/login screen.
MAIN MENU
Appears after logging in, the player spends most of their time here other than playing.
Has 3 screens for major purposes.
WORKOUTS
All body weight workouts are available to train and measure one's performance.
PLAY
Hub of the game, game modes can be chosen from here. Updates/new additions to the game can also be viewed.
PROFILE
Player details are visible such as ranking, unlock able achievements, fitness levels.
Rivals is a new feature intended to motivate player to engage in long term commitment to defeat stronger players.
GAME SCREEN
The player first stands in front of their camera so their entire body is framed. The game detects this and begins match.
Cam feed of the player player is also displayed at the center.
SET TURN
Both Player and the opponent are given different workouts and have to aim for the highest reps they can do.
Blue = Player
Yellow = Opponent
Blue flag = Player won the round
Yellow flag = Opponent won round
White flag = Current round
Higher the accuracy meter, more proper the player's posture is.
CHASE TURN
Both Player and the opponent have to try to beat each other's rep counts from Set turn round.
Due to change in priorities & technical requirements for the new UI, implementing it was ultimately not possible.
