Coach Jenny Pike
Jenny Pike Coaching
Designing a website for a local strength coach to help her move her business completely online.
Coach Jenny Pike lives and owns a gym in Colorado Springs.
She's moving to Florida, and wants to move her business entirely online. Offering private coaching, group classes, memberships, workshops, and sell products, all online through her website.
I met Jenny through my sister, who is also a local gym owner, here in Denver, Colorado. Because of my background as a Personal Trainer, and former Strength Athlete, we immediately felt a bond and connection, and started working together immediately!
Problem: How can I create trust with new visitors and clients, while generating confidence in Jenny and her ability to help them, all through a website?
Solution: Design a website that highlights Jenny's dedication & passion, through story, several high quality pictures, reviews & testimonials, and full transparency of services and prices.
My Role: UX Designer & Web Designer
Tools: Zoom, Figma, Google Forms, Google Drive, Google Presentation, InVision, Whimsical, Unsplash, Coolors.co, pencil, paper, Wix.com
Research
An interview with Jenny
I decided on an interview, because I wanted to understand Jenny better, so I could help represent her and her story
What made her become a coach? What's her background? Why this path for her?
What does she hope to accomplish with a website redesign? What are her main hopes and goals? What does she want from her online presence?
INSIGHTS:
She's EXTREMELY passionate about coaching, and helping people (especially women) discover their strength
She didn't find her strength until her late 30's. Jenny believes, If she can do it, ANYONE can do it!
Jenny wants to reach as many women as she can with her new website!
Survey Data in Figma
Gathering Survey Data
I chose to send out surveys to gather some quick and general data about what makes people hire a trainer.
What are the key aspects they would need to see in their online presence to feel comfortable?
I sent out surveys using Google Forms
8 people responded
There were 7 short answer questions
INSIGHTS:
users want to see lots of reviews; they want to be able to tell that the coach CARES about their clients
have a clean website
EASY to contact and ask questions;
TRANSPARENT about what they offer and prices
Competitor Analysis in Figma
The Competition
I started researching big health & fitness company's websites. I wanted to get a good picture of what the competition is offering, doing well, not doing well, doing the same, etc...
I researched some of the top online competitors including some indirect competitors like nutrition programming sites.
Gold's Gym
Born Fitness
Noom
Kickoff Fitness
Crossfit
Even my sisters gym, Lux Strength
INSIGHTS:
Most offered relatively affordable online programs (depending on ones definition), with lots of online classes, lots of options for trainers, and support.
Jenny's depth, warmth and passion were clearly the big difference. The franchises are clearly for volume and therefor can't easily reproduce the genuine touch of a Private Trainer.
Who is this site serving?
Our User Persona, Jessica Allen
Meet Jessica Allen
I wanted to build a persona to help me remember WHO this website is really meant to serve. People of all ages who want some help with their health, and wellness, and are yearning for a community.
Much of the persona was based on the responses Jenny gave in our interview.
Jessica is a 40yr old mom, with so much on her plate, and no idea how to start taking care of herself
She wants community and support more than anything
She HATES gyms, and would love to be able to workout from home to save time and money
The idea for Jessica came straight from the interview I had with Jenny. She herself was a mom, in her 40's. And hopes to inspire other women like her
Jenny wants her online group classes to be an easy way to reach women who are on a tight budget, like Jessica
Jessica's Flow in Whimsical
Jessica's Flow
I designed a User Flow using Whimsical. I wanted a clear image of the path Jessica might take when first visiting Jenny's website.
The Survey data helped guide me. What was most important to the users? What would they be looking for first when vetting a trainer?
Jessica would check out the Homepage to read about Jenny and go through several of Jenny's 5-Star Reviews
She reads Jenny's story to better understand her as a person
She then goes to the Services page to check out the programs and prices
What steps are most important to Jessica? Testimonials, contact, story, services and prices
Sketches to Wireframes
First sketch of the Homepage
Sketching ideas
I sketched out several wireframes to generate ideas. What were the main things people wanted to see on a website before hiring a coach? What would flow the best? Social media, photos, links... where might those go?
I tested out 4 different versions, with various layouts all focusing on the main sections mentioned in the survey data:
Section for Good reviews & Testimonials
Being able to contact the coach is easy throughout the website
Programs and Prices are very clear & upfront
Jenny's story, and lots of clear photos of her and her training
Style Guide in Figma
What kind of style...
Jenny had new photos taken, so we could use those for the site. I mostly held off from choosing colors or going too in-depth with the style guide, until she was able to send me the new photos.
I wanted to base the style on the color schemes and ideas present in the photos to make a really beautiful and cohesive website.
The photographer was new, and the photos she sent me weren't super great or usable...
Starbucks cups in the background
Lots equipment in the background
Lots of editing was needed but not done
The colors in the photos, and that she wore were different in every shot, which made it harder to coordinate with colors for the site
I put together Color Palettes with a lot help from Coolors.co
I chose a bubbly font, to match Jenny's enigmatic personality
Prototypes & Testing
Low-Fidelity Wireframes in Whimsical
Low Fidelity Wireframes
After the first week, I put together a small presentation to show Jenny my progress. This would be a weekly meeting. Weekly meetings were very important to me, to make sure we both stayed on top of everything (deliverables, content, links, etc...) and to make sure we were both happy with the direction.
I used Whimsical and InVision to put together low-fidelity wireframes and a prototype to present to Jenny
A User Test before the presentation helped me feel more confident in my initial design ideas
We felt good and decided to move forward
Jenny started gathering the content I needed from her, and I moved forward with more wireframes
Hi-Fidelity Homepage in Figma
Hi-Fidelity Prototypes
I used Figma to put together my Hi-Fidelity Wireframes and Prototype. I used my style guide and started playing around with the many photos Jenny sent me.
I added a photo of Jenny coaching a client, for the Homepage Hero Image because the research shows preference for coaching images, and not just a ton of images of themselves
The Navigation was simple. Homepage with story and reviews. Programs page that includes prices. And contact page. Plus easy and clear ways to contact throughout the site
These 3 categories were mentioned repeatedly in the research
Hi-Fidelity Programs wireframe in Figma
User Testing & Iterations
The User testing was the most important part to me. I wanted to get as much feedback and usability testing as I could, before moving forward to building the website.
The feedback was crucial to making sure I was designing the most user friendly, and beautiful site I could, for Jenny.
I was able to get 4 User Tests of the Hi-Fi Prototype in Figma
The testers and I met and recorded the tests over Zoom.
The alignment could be "tighter" in areas.
The size and color of the social icons I used in the header and footer (red & large) weren't well received. "Less harsh color" and smaller would feel better.
Otherwise there wasn't much to feedback.
Final Website
Jenny and I decided to move forward with Wix, for her website. It had the most options for small business owners, it's affordable, and offers a ton of support for each customer. I had never used it before, and I only had two weeks to get the website complete.
My integrity as a person and as a designer is very important to me. I told Jenny I could get her website completed before she left for Florida and I meant it! But there was more to the website than originally discussed. I failed to ask all the right questions when we first went over scope of work (rookie mistake). There were also some limitations in Wix, that only came up after most of the website was built.
In addition to the main pages, I needed to make Member pages, make an online store and checkout pages, and add ways to link her online classes to Zoom through the website.
Wix.com has some limitations that required a few meetings with Jenny to decide the direction she wanted to go
She's selling booking services AND a product, and doesn't want certain things to be bookable by clients
We figured it out and moved forward the best we could.
Jenny has since updated some parts of her website
You can check out the finished product here! Jennypike.com
After publishing
Working with Jenny
This project helped cement my passion and confident in UX Research and Design. There was so much to learn, and fumble through, but now I know SO much more to make the process easier for me and my clients.
Jenny was extremely happy with the website. And has been one of my biggest supporters since working together. Soon after we published she got engaged, and started the move from Colorado to Florida. She took a long hiatus from all things business to focus on moving her family across the country. So there are no STATS to report in regards to her busines and her new website.