FitX App Redesign
My Role: UX/UI Designer
Tools Used: Figma
Scope: 2 weeks
Overview: The goal of this sprint was originally to create a dark mode UI design for the current FitX app. After some preliminary research, I knew that I had to do more and create a sleek, seamless, and intuitive UI experience for the user.
About the Company: FitX is a fitness app that uses AI to check trainers' form and create personalized workouts.
Discover/Define
I began by conducting a Heuristic Analysis on the current FitX app.
There are many places that do not have an option to go back, and there are some cases (such as this) where the back button is illogical.
The copy is unclear and not easily understandable.
The bar is not recognizable when compared to industry standards; it looks full instead of empty.
UI layers are bleeding into each other, making it confusing for users to know what the CTA does.
I then created a Proto-Persona based on the company's target user.
Meet Laura Anderson, a 29 year old marketing manager living in San Francisco, California.
​
Laura prioritizes working out consistently, but does not have the time to get a personal trainer.
Design/Deliver
One thing that was very important to the founder was to redesign the UI to be dark.
​
I began by looking at the colours in FitX's current Style Guide.
Colours from FitX's current Style Guide Part 1.
​
Colours from FitX's current Style Guide Part 2.
​
I then created a mock up of the current app's homepage with a dark background using different shades of their blues.
After presenting this prototype, the founder decided she wanted a completely black background.
​
Keeping this in mind, I put together dark style guide.
I chose this purple and sea foam green because I felt they were the best complimenting pops of colour over the black background, and stayed inline with the brand's current colours.
Background colour
Most copy/text
CTAs
New FitX Dark Style Guide colours.
​
Creating the next prototype, I referenced the Heuristic Analysis to create a complete app redesign, giving the homepage a new layout in addition to implementing the new dark style guide.
Greeting that gives the user the real world experience within a system.
Informative navigational architecture with logical back buttons
Onboarding for new users
Clear, concise CTAs
Contrast in colour between buttons and background.