Design a user-centred responsive web app for people who need to improve their physical well-being for health reasons, to keep fit and to feel good. Attention is to be given to those with injuries in certain muscle groups.
– Offer a varying degree of workout customisations to achieve user fitness goals.
– Allow a function for users with injuries who need to include/exclude certain muscle groups from exercises.
– Enable socially active users to work out with friends virtually to improve their motivation and well-being
Adobe XD | Figma | Adobe Creative Suite | Usability Hub
I carried out research on existing fitness apps and websites to assess their USPs, positives and pain points for users. This was via the hands-on use of products and looking at reviews to gauge how well they had been received.
Video and face-to-face interviews were carried out with 6 health-conscious participants who had recently used or were currently using fitness apps or websites. I learned about the interviewees' habits, needs and pain points when trying to lose weight or get fit with current products.
These user personas would inform my decisions going forward. For instance, I would ask myself:
"Would Janine be happy with this flow? Does it fit her needs? Would it be easy enough to use and navigate as her tech ability is not that great?"
The main feature of the user flows, aimed at pleasing Janine and Duncan, is the custom workout flow.
This provides the option to define preferences, select specific exercises and then reorder exercises to create a bespoke workout.
The main structure of the original user flows stood the test of time, however, there were a few alterations to the 'Challenge participation' flow after user testing sessions indicated changes were needed. Therefore voice control instructions and the ability to view all friends at the beginning of the challenge were added to the flows.
I decided a progressive disclosure flow with a stepper was the most pleasant way for our personas to create their custom workout – with the option to exit and save the process if needed.
Take a look at the issues found in the testing, and the resulting iterations made below.
Following these design guidelines, I applied the style to each screen in Figma (below).
To view the interactive Figma prototype click below.