.png){kind=small}
Context
First, finding exercise routines for your level can be difficult, especially if you want to try something new. This responsive web app aims to help people get into an exercise of their choice by holding their hand a bit and providing routines, guides, interactive examples, and info.
Second, finding routines that fit into your schedule is not easy. The web app is designed to encourage people who want to exercise get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
Objective
Motivate people into an exercise routine that suits their level, schedule, and interests.
My Role
UI Designer
Wireframing
Prototyping
User Testing
Icon Design
Graphic Design (Achievements)
Animation
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 frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.
-
As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
-
As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.
Wireframing + Prototyping
The dashboard will have large images covering the entire screen and give access to all parts of the app including Workout of the Day, Calendar, Community, the Workout Library and more. Users will have ability to see progress of their achievements then can post about their success on the community tab.
UI Mood Boards
Two very different Mood Boards were created. It's the classic battle of Light vs. Dark.
Intense. Hard-Working. Rugged
The light mood board was more inviting to new users and didn't make them feel intimidated by the professional athletes from the the dark mood board. I chose the light mood board and although the colors changed by the final iteration but the feel was the same.
Mobile Mockups
Stick With It: Daily Workouts Screens
Animation and Gestures
Splash Screen Animation
Filter Screen showing multiple choices
Workout Screen Hold Down to Skip
Stick With It Style Guide
Breakpoint Mockups
Breakpoints displayed on Desktop, Tablet, and Mobile.
Breakpoints displayed on Desktop, Tablet, and Mobile.
Breakpoints displayed on Desktop, Tablet, and Mobile.
Breakpoints displayed on Desktop, Tablet, and Mobile.
Solution:
Users can use this daily workout app to stay active, healthy, and most importantly keep motivated. Most users stories are based on frequent users and therefore motivation is the number one thing that I focused on when building Stick With It
Motivating factors:
-
Achievements and Rewards with the ability to share the news with others.
-
The Community makes users feel like they are in this together.
-
The Progression aspect. At the end of each workout, it visually adds those reps to your overall rep count for each workout. Then each move has an achievement attached to it as well.
Full Clickable Prototype
Navigate through the prototype to get a feel for how it all works.
Tasks:
1. Check out the community tab.
2. Complete a Workout of the Day.
3. Sift through your achievements.
4. View the Workout Library.
5. See which days you are scheduled for a workout.
Stick With It
Prototype
Let me know what
you think!
