Objective
Objective
Flow Fitness is a responsive web app designed to motivate people to get their bodies moving through dance-based exercise classes for everyone from beginner to advanced.
Flow Fitness is a responsive web app designed to motivate people to get their bodies moving through dance-based exercise classes for everyone from beginner to advanced.
Problem
Problem
Finding the right kind of exercise program can be difficult, and oftentimes the options are focused on bulking up with heavy equipment. Furthermore, finding the time in busy schedules can make it challenging to stick to a regular routine.
Finding the right kind of exercise program can be difficult, and oftentimes the options are focused on bulking up with heavy equipment. Furthermore, finding the time in busy schedules can make it challenging to stick to a regular routine.
Solution
Solution
Flow Fitness offers users unique and engaging exercises based on dance styles from around the world. It provides tailored daily routines, the option to schedule workouts, and to even share your favorites with friends.
Flow Fitness offers users unique and engaging exercises based on dance styles from around the world. It provides tailored daily routines, the option to schedule workouts, and to even share your favorites with friends.
Primary Persona
Primary Persona
About
About
About
Mali, 36
Mali, 36
Mali, 36
Occupation
Occupation
Software Engineer
Software Engineer
Motivation
Motivation
Mali has a sedentary job and would like to get in better shape. She would like a tool to help fit exercise into her busy schedule. She doesn’t care for most traditional types of workouts with lots of equipment.
Mali has a sedentary job and would like to get in better shape. She would like a tool to help fit exercise into her busy schedule. She doesn’t care for most traditional types of workouts with lots of equipment.
Expectations
Expectations
Mali seeks an app where she can learn new and exciting exercises that she’ll look forward to doing. She would like variations in workout length, so she can do short routines when she’s strapped for time, as well as the ability to schedule workouts around her schedule.
Mali seeks an app where she can learn new and exciting exercises that she’ll look forward to doing. She would like variations in workout length, so she can do short routines when she’s strapped for time, as well as the ability to schedule workouts around her schedule.
User Flows
User Flows
Discoverability
Discoverability
Users need a way to search & filter through different exercises to fit their goals
Users need a way to search & filter through different exercises to fit their goals
Education & Connection
Education & Connection
Users need a way to learn about exercises, save their favorites, & share them with friends
Users need a way to learn about exercises, save their favorites, & share them with friends
UI Style Guide
UI Style Guide
Logotype
Logotype
The brand embodies a relaxed, feminine approach to exercise.
The brand embodies a relaxed, feminine approach to exercise.
Typography
Typography
The Kannada MN font adds whimsy to the headings, while Raleway ensures optimal readability for the body.
The Kannada MN font adds whimsy to the headings, while Raleway ensures optimal readability for the body.
Ag
Ag
Ag
Kannada MN
Kannada MN
Kannada MN
Display 1
Display 1
Display 1
bold, 36
bold, 36
bold, 36
Display 2
Display 2
Display 2
bold, 40
bold, 40
bold, 40
Heading 1
Heading 1
Heading 1
bold, 32
bold, 32
bold, 32
Heading 2
Heading 2
Heading 2
regular, 24
regular, 24
regular, 24
Heading 2
Heading 2
Heading 2
bold, 24
bold, 24
bold, 24
Heading 3
Heading 3
Heading 3
regular, 20
regular, 20
regular, 20
Heading 3
Heading 3
Heading 3
bold, 20
bold, 20
bold, 20
Ag
Ag
Ag
Raleway
Raleway
Raleway
Paragraph 1
Paragraph 1
Paragraph 1
regular, 20
regular, 20
regular, 20
Paragraph 1
Paragraph 1
Paragraph 1
medium, 20
medium, 20
medium, 20
Paragraph 2
Paragraph 2
Paragraph 2
regular, 16
regular, 16
regular, 16
Paragraph 2
Paragraph 2
Paragraph 2
medium, 16
medium, 16
medium, 16
Paragraph 2
Paragraph 2
Paragraph 2
semi-bold, 16
semi-bold, 16
semi-bold, 16
Paragraph 3
Paragraph 3
Paragraph 3
medium, 14
medium, 14
medium, 14
Paragraph 4
Paragraph 4
Paragraph 4
medium, 12
medium, 12
medium, 12
Buttons
Buttons
Buttons
medium, 20
medium, 20
medium, 20
Labels
Labels
Labels
medium, 16
medium, 16
medium, 16
Links
Links
Links
semi-bold, 14
semi-bold, 14
semi-bold, 14
Color Palette
Color Palette
The colors portray a moody, sultry, and energetic vibe.
The colors portray a moody, sultry, and energetic vibe.
Iconography
Iconography
The icons are simplistic, rounded shapes to match the feel of movement, whithout being too distracting.
The icons are simplistic, rounded shapes to match the feel of movement, whithout being too distracting.
Imagery
Imagery
Through dark, yet warm imagery, the aim is to imbue a sense of intrigue, curiosity, and strength.
Through dark, yet warm imagery, the aim is to imbue a sense of intrigue, curiosity, and strength.
Components
Components
Buttons
Buttons
Default
Selected
48px height x 323px width
24px rounded corners
Center-aligned text
2px stroke for selected state
48px height x 323px width
24px rounded corners
Center-aligned text
2px stroke for selected state
Input Field
Input Field
48px height x 323px width
4px rounded corners
Title 4px above input field
Left-aligned text
48px height x 323px width
4px rounded corners
Title 4px above input field
Left-aligned text
Category
Category
Beginner
48px height x 323px width
12px rounded corners
Center-aligned text
48px height x 323px width
12px rounded corners
Center-aligned text
Carousel
Carousel
Ballet
Burlesque
Hip Hop
36px height x 94px width
4px rounded corners
20px space between carousel categories
Center-aligned text
36px height x 94px width
4px rounded corners
20px space between carousel categories
Center-aligned text
Standard Card
Standard Card
Barre Basics
15 mins
Card height 110px x 323px width
Image height 94px x 140px width
4px rounded corners on image
8px rounded corners on card
8px card padding
20px padding between image & title
4px padding between title & duration
Card height 110px x 323px width
Image height 94px x 140px width
4px rounded corners on image
8px rounded corners on card
8px card padding
20px padding between image & title
4px padding between title & duration
Small Card
Small Card
Upper Body Ballet
15 mins
Card height 152px x 152px width
Image height 94px x 136px width
4px rounded corners on image
8px rounded corners on card
8px card padding & between image & title
4px padding between title & duration
Card height 152px x 152px width
Image height 94px x 136px width
4px rounded corners on image
8px rounded corners on card
8px card padding & between image & title
4px padding between title & duration
Final Mockups
Final Mockups
Reflections
Reflections
Exercise should be fun, engaging, and empowering. Too often, exercise apps are focused on bulking up, utilizing heavy gym equipment, and garish interfaces. Flow Fitness offers a different approach that is tailored for individuals seeking dynamic, dance-based workouts that require no special equipment. This allows people to get fit from the comfort of their own homes, or even on the go. It offers tailored workouts for any skill level, daily challenges to keep the momentum up, and the ability to share your favorite workouts with friends.