Fitness Program Planner
Provide high quality fitness programs to the novice instructor
Product
Responsive Desktop and Ipad Product
Client
Confidential
Role
Researcher, UX/UI Designer
Project Management
Lena Stachiw
Software Development
Time
Jan 2021 - Apr 2021
Dec 2022 - Feb 2022
Framework
Waterfall
Location
BC, Canada
Market research
Hey there, this is the
Journey map
Hey there, this is the
Visual Design
Hey there, this is the
Usability Testing
Hey there, this is the
Competitive Analysis
Hey there, this is the
Flow diagram
Hey there, this is the
High-fidelity UI
Hey there, this is the
Responsive Design
Hey there, this is the
User Research
Hey there, this is the
Wireframes
Hey there, this is the
Prototype
Hey there, thHey there, this is theis is the
Confidentiality
In order to preserve the privacy and confidentiality associated with this project, designs and branding have been slightly changed to mask the subject matter and keep the true designs in the hands of the client.
The target user group has been slightly generalized and the research findings have been edited as to not reveal the specific subect matter of this work.
Problem Space
How might we provide fitness programming to the notice instructor so that they can meet the diverse needs of their clients?
In some professional environments, there are people with little knowledge of physical movement concepts, but they are tasked with providing fitness programming to various participants with diverse needs and skills. The goal of this project is to design a digital solution that can help novice instructors such as these, develop quality fitness programming that meets the various needs of their clients/ participants. It is important that the solution addresses the needs of the novice instructor, but also considers those that will be receiving the programming and how well the content will support them.
Market Research
The Claim
The Digital Fitness and Well-Being market is anticipated to reach revenues of C$1,440.00 million by 2024, with projections indicating an annual growth rate of about 6%. This growth is expected to elevate the market volume to C$1,923.00 million by 2029.
User penetration is forecasted to rise from 46% in 2024 to 55% by 2029. The average revenue per user is estimated to be approximately C$80. When compared globally, the United States is expected to lead with revenues reaching C$19,930.00 million in 2024.
The Opportunity
In Canada, more people are incorporating digital fitness and well-being services into their daily lives. Canadians are signing up for online fitness memberships, using wellness apps, and consulting healthcare providers remotely because it is more convenient and flexible.
The COVID-19 pandemic has also sped up how quickly people are using digital options for fitness and healthcare. This has increased the demand for these digital solutions across the country.
Competitive Analysis
A competitive anlysis was conducted in order understand the strengths and weakness of leading fitness apps.
Fitness Plus
Explore Classes
Fitness Plus
Workout Details
Strengths
There are an incredible number of classes and workouts within this app. Of course user can also track activity metrics, view workout history, set personal goals, and monitor progress throughout the day. The app integrates with Apple Watch, displaying metrics like active calories and exercise minutes. Users can engage socially by sharing activity highlights and participate in competitions with friends. The user can also build customized programs for up to 8 weeks and workouts have personalized playlists from well known musical artists. Personalized coaching is also available to help users stay motivated.
Weaknesses
Users report problems with the gps distance tracking and challenges operating the user interface when using the app on their smart watch or fitness tracker. Users reported having a difficult time finding their personal statistics when they are in workout mode and some found glitches while using the service on their television causing them to have to re-start their workout and lose their progress. When looking at workout details the specific body targets are not clear. There is general information such as "lower body", but no detailed written or visual information that could help the user understand which muscles in particular are being targetted.
Fiit App
Explore Classes
Fiit App
Workout Details
Strengths
The overall layout and flow of the app is similar to many other fitness apps with a main page of suggested content and when an item is selected it offers vauable information such as intensity, level, body target area with visuals to show the user the body parts they will be working on. Another positive aspect is that the user can see how many other people have taken a class and what their rating of the workout is out of 5 stars.
Weaknesses
Some of the drawbacks of this app is that most workouts require additional equipment. The onboarding flow is mandatory so the user isn't able to skip over it if they wish to just start browsing content. There are no options to filter through the content in a different ways, such as by equipment, body target, skill level or class duration. This may be important to some user's who have limited access to equipment or would like to find classes of a specific duration.
SmartGym
Explore Classes
SmartGym
Workout Routine Details
Strengths
There is a high level of customization available for users who want to create a program. The user is able to select the type of equipment they have access to so that the app can customize a program that suits their resources and environment. The app has high quality visuals that shows the user the proper movements required for each type of activity and shows the targeted muscles as the excercise is being executed. Sets and breaks are timed so that the user doesn't have to keep track of this information. Additionally routines are created through AI technology offering a set of activities that is in line with the goals the user has input during the onboarding sequence.
Weaknesses
This app doesn't have videos that walk the user through workout routines. In some ways the visuals being shown on screen are more information such as being able to identify immediately which muscles are being targeted during a specific activity.
Some users may prefer to see a human being on screen coaching them and encouraging them, especially for users who are going from working out at a physical location to working out at home.
User Research
User research was conducted with professionals who deliver fitness programming.
Overview
Research Participants
I conducted 9 research sessions with professionals who deliver fitness programming aged 20 - 60 years old living and working in BC. Participants had a range of knowledge and experience creating fitness programs.
Deliverables
I developed a Research Plan outlining the activities I wanted to accomplish during the interviews and a series of tasks I wanted the user to go through while using the existing system.
I created interview transcriptions after the sessions were completed and a research analysis report on my findings with themes, evidence and quotes from the users.
I also created a journey map to make the data more memborable. It also encouraged empathy throughout the design process and helped make information more memborable for the rest of the cross-functional team.
Quantitative Results
Each user was asked to complete 4 tasks and their scores were averaged to find a task success rate of 75% with users completing 3 out of 4 tasks successfully on average.
At first glance, this indicated that users did not have much trouble navigating the interface, but through discussion it became clear that there were some barriers to desireability.
Users did not intially recognize the value of the product. They still preferred to use other products for various reason outlined in the key findings section. One of the major reasons was because they preferred video-based content and the system was primarily only showing images and text.
Research Sessions
Consent forms were sent to potential participants a few weeks before hand. One hour interviews were performed over Zoom and scheduled over the course of 2 weeks.
Users were asked to complete a series of tasks using the existing product while narrating their thoughts. My role was to observe and record. I took note of how difficult it was for them to accomplish each task and any other pain points they encountered.
After the testing portion of the interview, we had a discussion about how they currently develop and implement fitness programming and the challenges associated with that.
Key Findings
Value recognition
Since delivering fitness programming is only one aspect of the users' profession, they often don't realize the value of creating high quality fitness programming for their participants.
Inclusivity
There is a desire to see more content that focuses on inclusion for those with mobility issues, cognitive challenges or activities that promote gender inclusivity.
Challenging spaces
Users also have challenges finding an appropriate physical space to administer programming at times so it would be useful to include content that can be done in smaller spaces.
Diverse skills
It is difficult to create a program for participants with diverse abilities. Users need the building blocks of a movement so that movements can be deconstructed for those who are struggling. Alternatively, providing more advanced movements would benefit participants who need an extra challenge.
Less equipment
Users are often incredibly busy and lack the time needed to create quality fitness programming. This leads to a need for activities require very few or no equipment at all.
Assessment is difficult
Users are often not well trained in assessing the current skill level of their participants (the people who the user is delivering programming to).
When the instructors are not able to assess the skill level of their participants, it can lead to them creating programming that doesn't match the needs of the group. In turn, some participants may not enjoy the workouts, discontinue their service, or continue to attend without gaining much value from the classes.
Know the benchmarks
Most users have a general lack of understanding of the requirements and benchmarks they should be trying to achieve with their programming, which makes it harder for the user to tell that their participants are not hitting these goals.
Stakeholder Workshops
Multiple workshops took place with the business team and related stakeholders in order to gather feedback and ideate on user stories and priorities.
During design workshops many ideas were brought to the table by those on the business and technical team. There was a desire to create a calendar view that would show year, month and week views so that users could easily track their progress. Ideation revealed a desire to create a feature that would essentially create a customized program for the user so long as they input a minimum amount of information regarding their preferences and needs. The way the system tagged content needed to be improved in order support this automation. There was also mention of including a personalized dashboard to help with ongoing tracking and to further personalize the system.
Research Analysis
I created a journey map to consolidate my research findings and to keep my users needs at the front of my mind during the design process.
Flow Diagram
To outline the primary functionality, a simple site map of the primary features was created.
Wireframes
Once the flow diagram was established, low-fidelity wireframes were created of the primary flows.
Dashboard
The dashboard wireframe (left) contains information about the user's current upcomming classes and their weekly overview.
The user has access to all the sets of classes they have added to their program. The user can add or remove programs from the dashboard.
The dashboard has a section on weekly progress that tracks how many classes they have implemented that week and gives tells them how many classes remain.
Calendar
The calendar wireframe (right) contains a program with classes scheduled each week based on the user's preference. The content can be edited by removing, adding or re-ordering content.
The user can change the year they are viewing or edit program information. They have the ability to reset the plan to it's default state if the changes have been made to the program since it was created by the system.
Visual Design
Once the initial flow was complete, the fonts and colors were defined for use during high-fidelity design work.
Color Palette
Branding Colors
Grey Shades
Text Colors
Font Styling
Be Vietnam Pro
14px, 16px, 18px, 20px, 22px, 26px
Light, Regular, Medium, Semibold font weights
3 Body Fonts
4 Header Fonts
Primary Body Typography
Be Vietnam Pro, 16px font size, 21px line height, 300 font weight
Branding
The original branding for this project was altered to maintain client confidentiality. The updated branding chosen was centered around a deep green with blue undertones. This color was chosen to encourage feelings of balance, hopefulness, health and harmony with nature.
The iconography used throughout this product is from IBM's icon library. Additional icons from other libraries were used, but were kept consistent with IBM's 1.5px border thickness to keep a consistent visual aesthetic.
High Fidelity Designs
First Impressions
The user must register before they are able to login. Registration is made accessible by the business organization as this product is meant for users working in a specific industry. When the user logs into the system for the first time, they have the option to build a program or start browsing fitness content instead. If they choose to build a program after having viewed content, they have that option as well.
Building
Programs
When building a program, users specify the type of content they are interested in, the length of their classes, the start and end date of the sets of classes they have chosen, which days of the week they' d like to schedule their classes and what time of day they would like their classes to be.
Certain aspects of the program building questionnaire have been altered to preserve confidentiality. The questionnaire has been altered to be relevant for a more general user group that still has limited knowledge of fitness training.
Program
Calendar
Once the user builds a program, they can view their content by year, month or week. The user can select the 'edit program' button to reschedule their content or remove sets of classes from their program. The user also has the option to add or remove individual content by selecting the 'add' and 'remove' buttons. If the user selects any of the classes on their calendar, they can view the full class details.
Classes
with video guides
If the user selects a class they can view the full details including the outline, required equipment, foundational movements and body targets. In the original mockups this is where standardised guidelines would also be displayed. For confidentiality reasons this information cannot be displayed within this case study.
The user has a number of options when viewing the class details. They can read the text description of the movements and view an image gallery or they can select the video guide which takes them through a series of videos that shows them how to execute the activities and movements. For more complex group activities, it was recommended that diagrams be used in order to convey the setup of the space in a more easily digestable manner.
Within the video guide, the user can select preferences such as varations and progression or low impact adaptations. By selecting these preferences, the user can view additional instructions within the video that will make a group activity more suitable if there are partcipants with varying skill levels and abilities.
When the video guide starts, the system tracks which section the user on within the class and the content that has already been consumed will have a faded aesthetic.
If the user selects the buttons in the 'Skip To' section, the video will jump to those sections so that the user doesn't have to watch the full video if they prefer not to.
Search
By selecting the search button in the global navigation bar, the user can explore classes and programs. If a user selects a class set they will be essentially adding a set of classes to their program. A flow similar to the program creation flow will initiate and the user will have the opportunity to provide details on how they will like their classes to be scheduled.
Users can sort results and filter by content type, number of participants, low equipment requirements, accessibility options, and class length.
There is an option to add a class to the user's program be selecting the 'add' icon otherwise they can select the class card to view the class details. When the user adds a class to their program they will see the 'Add Content' modal where they must select the month and week they would like to add the class to. A static calendar displays on the modal to help the user select dates and weeks more easily.
Class Sets
By selecting a class set, the user has an easier way to manage content than by looking through all of their program content. For instance, if a user wants to remove a number of Cardio Burst classes from their program, they would only have to select that class set and select the classes they would like to remove rather than going through their full program to locate those specific classes.
the Dashboard
By selecting the dashboard button in the global navigation bar, the user can view personalized content helping them stay organized throughout their fitness programming. In the 'Today's Schedule' section, the user will find their upcomming classes that day with the option to print their full schedule include class details such as instructions and gallery images. The user also has an area to view all of the equipment they will need that day.
In the ' Weekly Schedule' section the user can view an overview of their week so they have a better sense of what content they will be delivering in the coming days. Their weekly proress is displayed showing the user how many classes they have completed so far and how many classes and hours remain in their week.
The user also has the ability to view the class sets they currently have within their program. These class sets are essentially sets of classes they have added to their program in bulk to make program creation more quick than if they had to add each class individually. There are progress trackers on each class set to show how much of each set they have completed so far.
Prototype
High fidelity designs were used to create a clickable prototype that I used to conduct user-testing sessions.
Create a Program
Calendar, Search, Dashboard
Video Workout Guide
Design Validation
The prototype was used to test the primary funcationality of the product with 8 participants.
Strategy
Testing sessions occured over Microsoft Teams. Sessions were recorded while the participant narrated their thoughts as they completed each task. Both the live updated desktop interface and the mobile mockups were used to illicit feedback from users.
Questions focused on asking the user to complete primary tasks such as finding a wildfire of interest on the map, finding events on the map, accessing the full details pages, creating a saved location, adding a wildfire to the user's saved events list and turning on notifications.
Single round of testing
Due to the scope of this engagement and the fact that I had conducted testing on the original product, there was a single round of usability testing conducted with the design prototype.
During the testing sessions, 70% of users wanted to be able to specify which pieces of equipment they had access to while building their program and also wanted to know if most of their classes could actually have no equipment required.
In response to this feedback, I added an additional screen to the program creation flow. Users can select which pieces of equipment they have access to and in addition, users can indicate that they would like to prioritize classes that don't require any equipment at all.
I also decided to add tooltips that will display equipment definitions because a large portion of the target users do not have a strong phsyical fitness background. To improve consistency and usability, tooltips were also added to the screen within the program creation flow that asks users to select preferred content types.
Each user was asked to complete 8 tasks and their scores were averaged to find a task success rate of 88% with users completing 7 out of 8 tasks successfully on average.
Other findings
Another finding during usability testing was that users wanted to be able to explore content on the search page by filtering content by required equipment. Users appreciated being able to filter content to show classes that had no equipment requirements, but they also wanted to be able to filter classes by specific types of equipment so that they would only see content requiring resources that they had access to.
In response to this feedback, I added a section to the filters that allows users to filter by specific types of equipment as well as be able to request classes that don't require any equipment at all. I also added chips above the list of classes so that the user can keep track of the various filters they have set and more easily be able to remove a filter they wish to turn off.
Positive Feedback
There was much positive feedback when users saw their full year of content laid out after their program building questionnaire was complete. There was also lots of positive feedback when users viewed the layout change of the search page. Initially the interface elements for filters did not follow common patterns most users were familiar with.
By using a simple checkbox filter list, users could see the various options and categories that they could choose from. Users were most excited about the option to filter content to show classes that had no equipment required.
Accessibility
The Lesson Plan
Enhanced Accessibility
One specific example is the styling of the tags on the class details panel present on the lesson plan screen. These tags help the user quickly understand which movements and body targets are related to a lesson plan. Initially the text color was the existing primary color of the product, but the color contrast proved to not be fully accessible. In the final version the text color was modified to enhance accessibility.
Visual Hierarchy
Visual hierarchy is an important aspect of usability. If we try to emphasize everything on a page, we end up with none of the content actually standing out. By emphasizing certain elements on a page, we are making it faster for users to process the information we are presenting to them.
Visual hierarchy should always be assessed in context; what stands out on one page might not have the same impact on another page if other elements on that page have a stronger visual impact.
I created visual hierarchy within the current design system by using size, scale, color and typography to draw more attention to high emphasis elements.
I used a grey treatment on buttons and text that required less emphasis and I drew attention to high emphasis areas by enhancing the visual distinction of the typography, adding iconography and color and strategically using spacing and alignment to help organize information.
I used an 8 pixel grid system (spacing and layout framework based on multiples of 8 pixels) in order to maintain visual harmony and alignment across elements and so that the grid system scales more effectively.
Below is a visual representation of how I have evaluated a particular screen for visual hierarchy and it's impact to design.
Device Optimization
All screens were designed with both desktop and ipad views in mind. The video guide flow was designed initially for tablet and then the desktop view was created afterwards.
Part of the work in this engagement was to create a layout for each screen that would scale from desktop to ipad. It had been established that the target users would often had access to an ipad or tablet in their professional environment and so it was important to craft a solution that could work well on both devices. We also learned that it was much more likely that the users would access the video guide feature while using their tablet rather than on a desktop due to the portability of the device.
Learning Opportunities
Technical Understanding
Throughout this project it was very important to understand the process with which the technical team was implementing solutions. As with many projects, there was a certain component set and system structure in place that needed to be kept in mind throughout the design process. As this is was one of my earlier projects as a designer, I found that I wish I would have grasped more of the technical complexity so that I could deliver designs that better reflected the underlying architecture.
With that said, the developers reached out to me after their work had been underway for a few months and I was very impressed with the implementation and it's faithfulness to the designs.
Workshop Facilitation
I worked with a very talented workshop facilitator and project manager for the entirety of this project. Witnessing her facilitate workshops with a large group of people from both the technical and business side was a wonderful experience. I would later come to appreciate how difficult this task is as I would begin to facilitate my own collaboration sessions in the future.
At the time, my key learnings were the structure, layout and agenda of the meeting. Now I look back and I see that alot of the success of these sessions was due to the communicator and the way in which she posed ideas and requests to the group.
Ways to Connect
Feel free to reach out to me if you'd like to learn more about my experience and design work or if you would like to collaborate on something in the future.
© Jacqueline Williams 2024 • UX Designer