Act of Fitness
A responsive webpage for booking personal training services.
Brand development. UX research and testing.
Act of Fitness is a small business looking to expand its corporate client base. At the moment, the majority of their clientele is either small group or individual fitness training sessions. In order to transition, the needs of corporate benefits coordinators must be taken into consideration.
The Problem: How might we successfully market wellness services to a corporate audience?
The Task: Design a responsive service-booking website that allows users to contact an Act of Fitness personal trainer and schedule a session.
The Challenge:
Making a Pivot
Small group and individual sessions do not make for a sustainable business plan. The founder has decided to pivot to corporate wellness.
In the first interview the founder expressed how the company is transitioning to focus on corporate wellness instead as an opportunity for growth and stability.
Project Needs:
Develop branding based on desired client base and company values.
Design a responsive website from scratch.
Solve for booking services.
Project Hurdle:
Defining Clientele
For this product there are two groups with needs to design for.
The stakeholder/company founder’s needs:
Simple UX solutions for communication with customers.
Visibility to more potential customers resulting in more corporate contracts.
A professional brand and web presence.
The end user/benefit coordinators’ needs:
The ability to see all relevant information in order to compare providers.
Contact information in order to gather more info or to start the hiring process.
My Role
UX Design + Research + UI Design
Stakeholders
Act of Fitness Founder | Corporate Wellness Coordinators | UIUX Mentor
Discovery & Research
Stakeholder Meeting
At the onset of this project I contacted the business owner to mutually set expectations and to communicate my own internal deadlines since the 2 week timeline was short. We scheduled 4 check-in meetings for his feedback.
With the founder of Act of Fitness, the target audience was identified as corporate leads who are interested in the health and wellness of their employees. More specifically we decided to target either California (a long term location for him) or Tennessee (where he is currently located).
Research Goals
Planning
In order for this product to be successful, the interests of 3 parties needed to be taken into consideration. After the founder identified corporate fitness as his main target, we still needed to understand the following:
“What wellness opportunities are employees interested in and what is currently available to them?”
“What are benefits coordinators looking for and how do they complete the booking process?”
Research Methodology
Strategizing, Conducting
To find answers to these remaining questions I needed to talk to benefits coordinators and their employees. I conducted a series of interviews and analyzed similar websites to learn more.
Primary Research:
Research to answer specific questions.
Benefits Coordinator Interviews: Interview questions to understand the booking process.
I chose to ask benefits coordinators about the individual steps they take to contract a trainer so that I would better understand what information would be important for them to see on my client’s website.
Participant Demographic: 3 individuals who currently work as benefits coordinators for midsize companies.
Interview Questions:
1. How do you go about searching and signing a contract for a fitness/health trainer or gym build-out?
2. What would you be particularly looking for in a wellness/fitness coach?
3. What are the most urgent employee wellness needs that you have noticed at your office?
Employee Survey: Interview questions to understand what wellness opportunities employees would be interested in.
For more specific results, I used Reddit and Facebook to search for corporate/business groups and fitness groups located in California and Tennessee. These interviews were important to decipher what services employees would show up to and therefore, what services their companies would sustain interest in.
Participant Demographic: 15 individuals who are currently employed at midsize companies.
Interview Questions:
1. What wellness opportunities are currently available at your company?
2. What fitness or wellness opportunities would you be interested in? (Fitness bootcamp, Yoga, Meditation, Nutrition)
Secondary Research:
Research on available statistics and examples.
Competitive Analysis: Research to understand the current market for corporate health training (what competitors have done/are doing)
I chose to look at other trainers’ websites in order to learn from what they have tried successfully and unsuccessfully.
Research Findings
Synthesizing, Product Plan
Benefits Coordinator Interviews
After speaking with coordinators it became clear that potential clients would be looking for the following in a trainer’s website:
A single point of contact for starting a contract.
A simple booking process with the option to ask more questions before hiring.
Employee Survey
Due to Reddit and Facebook group membership requirements, I was only able to connect with California-based companies for feedback. Surveys revealed the following about California employees:
Interested in onsite gyms
Biggest health concerns are ergonomics, inactivity, and stress
Interest level by training type: 66% fitness bootcamps, 16% yoga, 16% nutrition
Competitive Analysis
Similar sites use the following patterns to display their services:
Pre-packaged service options visibly represented using cards
Dynamic hero images/videos
Bold and simple UI
Alternative forms of content
Research Summary
Through the use of interviews, surveys, and competitor analysis I gained the following insights in response to the original research goals:
Prepackaged services enable benefits coordinators to quickly understand and choose a plan.
A clear contact page is essential for booking services.
Employees are primarily interested in fitness bootcamps.
Successful competitors employ visually stimulating imagery on their home pages.
Persona
Creating a representative Act of Fitness customer profile
This profile was based off customer interviews for the purpose of guiding design decisions and keeping real user needs in mind.
Participants in these interviews currently work as benefit coordinators at their companies.
Age—47
Location—Nashville, TN
Occupation—HR Benefits Coordinator
Bio
Tricia started working for JumpCrew two years ago. It has been a learning experience for her since it is a much younger company than the one she left. In a way, many of the millennial employees are her nephew’s age and she takes her role in their lives seriously. It has always been a battle in her line of work to negotiate between the values of company profit and employee benefits, but she is persistent and used to working within that tension.
At her past workplace the primary health concerns were aging and healthcare benefits, but at JumpCrew she has noticed that preventative care is a big concern, especially ergonomics since they have such a casual work culture. This year has been wearing on her as she is up to date with forums on mental health, but does not have much to offer stressed employees. An increase in work-from-home opportunities has been a challenge for her as she hears less feedback from employees.
Goals
Find virtual and in-person fitness opportunities
Solutions for employee inactivity and stress
Improve ergonomics for each individual
Frustrations
There are few resources for corporate wellness in her area
It is difficult to retain employee engagement
Wellness is on the company’s backburner
Structural Design & Layout
Feature Matrix
Defining the Product
A list of features necessary for a minimum viable product
Site Map
Organizing the website based on the relationships between features based on competitor patterns.
The landing page leads to a variety of training services ranging from individual training to corporate programs. Multiple options for contacting the team are provided so that customers can get more information or book a demo immediately using the service packages.
User Flow
Exploring the checkout process.
Since corporate training is the stakeholders primary focus, I chose to focus on the checkout flow for that particular customer group. As voiced in benefits coordinator interviews, customers would like to have the option of requesting a demo before committing to a service package. The user flow shows how the modal would accommodate this.
Branding
Stakeholder Moodboard
Gathering look & feel assets.
To begin crafting a brand identity I met with the founder to define the brand identity. I gathered UI references via Pinterest and discussed options with the stakeholder. From competitor analysis, it seems preferable to chose a bright color to lead the brand. Based on the prior stakeholder meeting, I selected imagery that suggested the founder’s focus which is not in the niche interests of bodybuilding or injury recovery, but in training the average person to become healthier. Thankfully, the stakeholder did have feedback that the imagery should convey less of an intense mood and more that the participants are enjoying themselves making personal training a more accessible and attractive idea. He also notified me that he prefers simple and clean imagery with natural light and approved the color choices I had selected.
Color Source
Imagery Standard
Logo
Logo design started from a set of traits the stakeholder valued during our first meeting. Those values included a simple, approachable aesthetic and motivating customers toward movement. I started with hand sketching and explored a figure sprinting from the blocks to imply the theme of explosive potential.
Inspiration
Iterations
UI Design Guide
Company branding beginning with defining a style guide and UI Kit.
I cataloged a UI Kit for Act of Fitness including colors, button shapes and states, typography, logos, icons, and components.
Competitor training websites that I analyzed utilized bold sans serif fonts for their headers connoting strength and power. Two of these websites use lighter colors to target a female audience while one of the websites targeting a male audience used dark neutral colors. Other websites that did not have a gender-specific audience used a mix of neutral and vibrant deep colors so I chose colors along these lines. I chose to pair two vibrant colors for primary and secondary CTA’s with more neutral background colors for accessibility.
Imagery:
Original Sketches
Low-Fidelity Wireframes
Sketching a variety of desktop layout options led to low-fidelity wireframes.
These were used to refine the website information architecture before finalizing high-fidelity versions.
High-Fidelity Screens
Realizing the product
Once the information architecture was established and a UI Kit was developed, these two came together to flesh out original high-fidelity mockups. Eventually responsive screens for tablet and mobile were designed.
Usability
User Testing
Analyzing site patterns
Participants: 14 individuals
To test if the product was successful in allowing users to contact and schedule a trainer, I tested users with the task of requesting an Act of Fitness demo to understand where they may encounter issues. The affinity map below describes their feedback as they completed this task.
Objectives:
Is there anything blocking users from booking a session?
Is there anything misleading when filling out the contact information modal?
Are there any confusing moments that cause the user to make an error and how did they recover?
Requesting a Demo
Can users successfully locate the CTA for the contact form?
Contact Form
Can users fill out relevant information easily?
Error Recovery
When users misclick or do not fill out a form field, how do they recover?
User Testing Summary
Testing further revealed the user’s need for gathering more information before starting a contract. Currently, the contact modal is designed for a quick selection and checkout process, however an alternative structure is necessary for customers to gather further information.
Task: Request a Demo
85.7%
Success Rate
10.7%
Misclick Rate
5.6s
Duration
Iteration
Implementation
After user testing several issues surfaced that particularly inhibited users from accomplishing the main task. Of these issues several could be easily solved for. These changes were made immediately.
Frequent Urgent Issues:
1. Benefits coordinators need to know at what locations Act of Fitness can provide training.
Solutions Utilized:
1. Add a travel range to the homepage and applicable travel fees to the checkout flow.
2. Pre-packaged services do not cover all customer needs.
2. Add text description on the packages page allowing for this via email.
Next Steps
After implementing the changes above the next step would be to undergo a new round of user testing to evaluate the effect of these changes. If users are still finding the same issues with getting more information and booking, further iteration will be necessary.
Phase 2 Issues:
Users are requesting more information about the team before booking.
The terminology "Corporate Wellness" may have been confusing.
When booking for a company one user misclicked Small Group Training.
Potential Solutions:
Build out “Meet the Team” page and provide an email for contact.
Try A/B testing against a version with the header "Our Services".
Add a redirecting link on individual/corporate pages.