ui/ux/web/mobile
New image fitness
back to projects
new image fitness
MOBILE APP REDESIGN
I was given the task of re-designing New Image Fitness mobile app and providing some concept shots of how the app could look. This was purely a UI concept shot task but I decided to go about it in a UX way as well as the app was quite confusing to understand.
All I was given was the existing app and told I had to keep the colour scheme 'close' to what it is now but the font was allowed to be updated if necessary.
All I was given was the existing app and told I had to keep the colour scheme 'close' to what it is now but the font was allowed to be updated if necessary.
Aa
Larssiet
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Dark Orange
primary colour
#F7618B
R 251
G 85
B 0
R 251
G 85
B 0
Hot Pink
secondary colour
#21CEC9
R 254
G 3
B 82
R 254
G 3
B 82
Light Orange
secondary colour
#FC7631
R 252
G 118
B 49
R 252
G 118
B 49
Dark Grey
primary colour
#212121
R 33
G 33
B 33
R 33
G 33
B 33
White
primary colour
#ffffff
R 255
G 255
B 255
R 255
G 255
B 255
PROCESS
Figuring out the problem.
The first step I had to take was to work out what was wrong with the existing product and why did it need a re-design. This is why I decided to begin by taking a UX approach to the problem.
There were quite a lot of issues with the UI of the app but for me the UX was just as difficult to use, most specifically the onboarding where the app opens up and the user is bombarded with information they are expected to take in all at once.
It was at this point I came up with the idea of a progressive onboarding so the user can become used to the UI of the application so the next step was to work out which screens needed the most attention.
As the most important part of the process was the new onboarding, it made the most sense to re-design the onboarding process, homepage and the user's profile page, above you can see the screens that were chosen.
INSPIRATION
Inspiration and inital mockups
As the content was a large part of the issue with the app, I had a look round at other fitness app UI's on Dribbble and then MyFitnessPal and Fitbod as these are the two most popular apps on the market in this area.
Often when I design, it isn't only apps in the similar market that I look at, but also apps that are renowned for doing things well such as Monzo with their onboarding and Duolingo with their gamification so I also took a bit of influence from both of these aspects.
The gamification of apps such as Duolingo and MyFitnessPal are what make them so popular today so I'm a big believer in modern applications having some sort of gamification element to get the user excited, I'm particularly interested in this after taking on a 14,000 word study into 'The Gamification and Future of eLearning', where I also designed and developed an eLearning quiz app, if you want to have a look at it here.
The gamification of apps such as Duolingo and MyFitnessPal are what make them so popular today so I'm a big believer in modern applications having some sort of gamification element to get the user excited, I'm particularly interested in this after taking on a 14,000 word study into 'The Gamification and Future of eLearning', where I also designed and developed an eLearning quiz app, if you want to have a look at it here.
The next step was to create some nice UI with the new content and inspiration I had found before, along with the existing application and the colour schemes/fonts I had created/been given.
You can see in the image above how all of the different apps I looked at before have had their own influence on the designs I created.
I usually sketch out designs on paper first and then move to a lo-fi figma wireframe before going into hi-fi key screens but after coming up with the onboarding idea, I had quite a clear image in my head of what I wanted to be created and below you can see the final designs and concept shots created.
I usually sketch out designs on paper first and then move to a lo-fi figma wireframe before going into hi-fi key screens but after coming up with the onboarding idea, I had quite a clear image in my head of what I wanted to be created and below you can see the final designs and concept shots created.
FINAL DESIGNS
Key screens, concept shots and prototype.
.png)
