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.
02
UI/UX JOURNEY
UI
Brand Identity
Mood Board
Style guide:
- Iconography
- Typography
- Colour Palette
- Imagery and Illustration
UX
User flows
Usability Tests
Low fidelity prototypes
Mid fidelity prototypes
High fidelity prototypes
03
PERSONA
04
DESIGN CRITERIA
User StoriesAs 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.
05
USER FLOW AND
LOW FIDELITY
PROTOTYPE
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.
User flow
Wireframe: setup preferences
Wireframe: Homepage, Workout Program
06
MID FIDELITY
PROTOTYPE
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.
07
MOOD BOARD
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>.
08
HIGH FIDELITY
PROTOTYPE
Once the visual direction of the web app is decided, high fidelity prototype is developed.
09
MOCK UP
Key features:
- find workout videos
- exercise schedule
- create user account
- add workout program to schedule
- tracking user's progress
- daily challenges
- social sharing
10
RESPONSIVE DESIGN
The design of the web app has been adapted for different devices.
11
STYLE GUIDE
12
PROTOTYPE LINK
FITX: Click the link to see the clickable prototypes in InVision.
Cindy Lin-Tschoeke | UX, UI & Visual Designer | [email protected] | Last updated in 2021