Overview
Getting into a fitness routine can be hard for those new or returning to ecorcise. It is important to have routines that suite their skill levels, schedule and intrests.
Tools
Figma 1
Role
UX Designer
UI Designer
Challenge
Developing an app that motivates and provides various exorcises at different levels. It should give users the ability to fit exorcise into their busy live by searching with filters, scheduling and customizing workouts.
Solution
Flex is an app that allows users to choose from and customize various workouts. With features such as scheduling, daily challenges, reminders and levels from beginner to advaanced users can make fitness their own.
Empathize
01
Who
What
When & Where
Why
To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new)
Exercise should be fun and suited to each user
To save time by fitting exercise into daily routines, such as walking or cycling to work or school
Exercise should be fun and suited to each user
To save time by fitting exercise into daily routines, such as walking or cycling to work or school
People who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Flex.
A responsive web app is best for Flex, as users can search and view routines, guides, daily challenges, and other information on any device. They can also keep a schedule by adding sessions to their personal calendar.
As the web app aims to get users into a routine that suits them, the web app can be used whenever and wherever they like. They will use the web app while they are searching for, scheduling, and following routines.
Define
02
Environment
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.
Social: She has several friends from her software development job, and one of them recommended this tool as something she should check out to help her reach her
goals.
Technological: Rebecca is very tech savvy, as she works on computers every day.
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.
Social: She has several friends from her software development job, and one of them recommended this tool as something she should check out to help her reach her
goals.
Technological: Rebecca is very tech savvy, as she works on computers every day.
Tasks
Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape.
In addition, she wants to find short exercises that she can do multiple times per day in between other activities.
She wants the tool to keep her motivated as well, as her schedule can often be distracting
Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape.
In addition, she wants to find short exercises that she can do multiple times per day in between other activities.
She wants the tool to keep her motivated as well, as her schedule can often be distracting
User Persona
Age: 36
Job: Software Developer
Fitness Level: Beginner
Job: Software Developer
Fitness Level: Beginner
Rebecca
Goals
Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule.
As a beginner to working out, Rebecca also wants something that will help her learn how to properly exercise.
Rebecca wants help finding routines she can enjoy.
Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule.
As a beginner to working out, Rebecca also wants something that will help her learn how to properly exercise.
Rebecca wants help finding routines she can enjoy.
Ideate
03
User Flow
User Stories
As a new user, I want to learn about different exercises, so that I can figure out what is best for me
As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.
As a frequent user, 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.
As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated..
As a new user, I want to learn about different exercises, so that I can figure out what is best for me
As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.
As a frequent user, 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.
As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated..
Design
04
Sketches/Low-fidelity Wireframes
I made sketches for the steps in the user flow. Then was able to turn them into mid-fidelity wireframes making sure to keep in mind that they would need to be easily scalable for larger screens
After the wireframes I created a few mood boards in order to try and capture the look an feel I wanted the app to have
Mood Board
Mood Board
Iterate
05
High Fidelity Wireframes
After deciding on the right look and concept I was able to further refine my design.
Style Guide
Main logo
Variant
Aa
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
Encode Sans
Aa
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
Poppins
Heading 4
Heading 3
Heading 2
Heading 1
Encode Sans | Black | 40
Encode Sans | Medium | 34
Encode Sans | SemiBold | 24
Encode Sans | SemiBold | 20
Encode Sans | Bold | 18
Heading 5
Poppins | Regular | 18
Body 1
Poppins | Regular | 16
Poppins | SemiBold | 14
Body 2
Body 3
BUTTON
Poppins | Medium | 18
Text Emphasis
Bold
Italics
Hyperlink
10
10
10
10
10
10
Icons should be easily recognizable by the users even while moving.
Icons should have rounded edges in order to convey a welcoming and more relaxed mood towards working out
Icons should have rounded edges in order to convey a welcoming and more relaxed mood towards working out
Icons should have a minimum of 24x24px touch target as they are to be interactive. Icons can be used on buttons.
Button
Button
Button
Button
Button
Button
Default
Default
Default
Active
Input Field
Day selector
Star rating
Option
Filter chip
Success
Error
Hover
Pressed
Pressed
Pressed
Hover
Day
Day
Day
Crunches
Crunches
Label
Label
Label
The main emphasis should be that people are actively working out no matter their fitness level. Pictures should pertain to the content being shown on the page.
Primary
Secondary
Success and Error
Grey, Black and White
Responsive Breakpoints
In order to make my design responsive I seleceted the breakpoints for the other devices, then scaled the grid before adding the visual elements.
4:54
Cycle
Goal: 5k
2 Mile Run
Goal: 21 min
Core Workout
Goal: Open
Workouts
Key Takeaways
I learned a lot throught this challenge, not just scaling a design consistant to different breakpoints but also how to keep the design consistant when adding more content. I also learned how to better schedule my time as the was time requirement was much shorter than my previous project and thus helped me become more decisive.
Through this process I have learned the value of creating mood boards to getting inspirationand using them to help set the look and feel of a design.
This project has allowed me to broaden my foundation by deepening my understanding of tools I have previously used and also has given me knew knowledge in the form of style guides, ui patterns, mood boards, color theory and more.
The future of this app I see a lot of testing, expanding the functionality, and adding new features.
Through this process I have learned the value of creating mood boards to getting inspirationand using them to help set the look and feel of a design.
This project has allowed me to broaden my foundation by deepening my understanding of tools I have previously used and also has given me knew knowledge in the form of style guides, ui patterns, mood boards, color theory and more.
The future of this app I see a lot of testing, expanding the functionality, and adding new features.
Thank you for viewing
Conclusion
06
Check out the prototype