Finding exercise routines for your level can be difficult, especially if you want to try something new. With HXercise, you won't have to worry about finding one. HXercise is a responsive fitness app/web app for users who want to get into exercising. The app is designed to provide guides, interactive examples, info, and routines that fit into users' busy schedule.
Motivate people into developing an exercise routine that suits their level, schedule, and interests
• Search and filter exercise videos
• Exercise scheduler
• Option to add sessions to calender
• Create user accounts
• Tracking users' progress
• Daily challenges and achievements
• Social sharing for routines or exercises
• Users need motivation to keep up with their exercise routine
• Paying for services can turn away users
• New users have little to no knowledge of how to exercise or where to start
• App will provide an exercise routine tailored to users' interests and goals
• Users will be able to track their progress and receive notification reminders
• Series of exercise options for different types of users
To understand our users and the UX Research provided by CareerFoundry, I created a realistic character or user persona that will likely use our app. Having a persona will help me make better design decisions.
Meet Rebecca
Rebecca is a Software Developer who lives in an apartment with her boyfriend and 3-year old daughter. Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising. To help achieve 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 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.
"I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”
With my persona, I wanted to visualize what a user's typical experience with HXercise would be like. Therefore, I created 3 different User Flows to help determine what the app would look like to reach users' expectations and needs.
.jpg)
"As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits."
"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 complete daily challenges, so that I can have an additional way to stay motivated."
"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 track progression and record what I’ve done, so that I can see my progress over time."
"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."
After getting to know our persona and the UX research provided, I began sketching a low-fidelity prototype. Utilizing the User Flows allowed me to design basic details and layouts for each screen.
Once I am satisfied with the overall layout of my design, I refined my screens in Sketch/Figma and created mid-fidelity prototype. I combined the different design patterns, responsive layout and grids, visual hierarchy, icons, typography, imagery guidelines, and UI elements to create the high-fidelity prototype.
To establish the right visual direction for users, I explored different color palettes, iconography, imagery, moods, and typography. I created two mood boards to explore which mood direction the app will bring out. I chose Option 2 since it best suited what a fitness app should feel like; powerful yet fun.
The following images are allowed to be used for this app because they follow our branding colors and the illustrations can be depicted one exercise at a time. The main color; orange, will evoke the right emotions for users. Users will feel the motivation and excitement from using the app.
The following images are NOT allowed to be used for this app because they do not follow our branding colors. The color does not evoke the right emotion that is set for the app.
The following images are allowed to be used for this app because they follow our branding colors and the illustrations can be depicted one exercise at a time. The main color; orange, will evoke the right emotions for users. Users will feel the motivation and excitement from using the app.
The final step was to design the app for different device screens. Using the responsive grid system, I can adapt each screen for multiple device formats. Adding more features for each screen will allow users to access more functions efficiently.
I realize how important it is to establish good communication with developers from the beginning of the project to ensure no confusion and keep everyone on the same page.
The most challenging part of the project was to keep the content consistent and functional with different breakpoints. Early-stage, I spent the most time designing and redesigning each breakpoint to look similar. While resizing elements, part of the pages looks empty and plain, so I added extra content to make the pages look balanced.
Overall, I enjoyed working on this project, even though this was a more UI focus. To further develop this project, I would take more time to do more UX research and testing to have better UI designs. Without conducting more user research and usability testing, I found it hard to make a design decision.
