Get FIT with FITX workout
To create a web app that motivates people into an workout routine providing exercise of their choice with instructional information, videos and schedules.
This responsive web app is designed to encourage people who want to exercise get into an easy routine that fit into their schedule.
IconographyTypographyColour PaletteImagery and Illustration
Low fidelity prototypes
Mid fidelity prototypes
High fidelity prototypes
As a new user,
I want to learn about different exercises so that I can figure out what is best for me.I want to be shown how the exercises are done so that I know I am doing them correctly.
As a frequent user,
I want to be able to schedule exercises for working out so that I build positive habits.I want to track progression and record what I have done so that I can see my progress over time. I want to be able to share routines with my friends who may also be interested so that I can encourage them to become healthier.
USER FLOW AND
In order to define the screens the user must interact with to complete the tasks on the web app, the first step was to create the user flows for each user story.
Once the user flows has been created, low fidelity prototype was created to conduct user tests with potential users.
Wireframe: setup preferences
Wireframe: Homepage, Workout Program
After user testing, the screens were updated with the mid-fidelity created. The key function and components of each screen are shown here - UI elements, hierarchy, spacing and UI design patterns.
To communicate the visual direction of the web app, two mood boards were created to define different emotions.
Mood board <Retro Colours> was chosen after evaluating the 5 Ws and the goals, background, and environment of the persona.
The colours combined such as coral and aqua goes great with anything bright and dark background, similarly where most sports attire colours are made up of. It gives an engaging and energizing style to the users.
The bright coral could inject energy and passionate vibes to the persona whereas the aqua provides an inviting and playful feel. The colour scheme is more vibrant and lively. Also, the images is more accessible and playful communicating a more positive and approachable experience.
Also this option does not present the level of perceived professional skill level of <Olive Army Sport Mix>.
Once the visual direction of the web app is decided, high fidelity prototype is developed.
find workout videos exercise schedulecreate user accountadd workout program to scheduletracking user's progressdaily challengessocial sharing
The design of the web app has been adapted for different devices.
FITX: Click the link to see the clickable prototypes in InVision.