Branding and a responsive website made for a bad-ass local personal training business

As the saying goes, if it sounds too good to be true, it probably is. We all want to be fit and fabulous with minimal effort and eat whatever we want. Unfortunately, THERE IS NO MAGIC PILL, only hard work and lifestyle changes.

Magic Pill Training is a small personal training business run by Dakota Ushigome in Portland, Oregon. Dakota brings her twist on training and nutrition to her clients, specifically customized to individual goals.

In four weeks, I helped research, brand, and design a responsive website to provide an engaging, user-centric experience.

Key Takeaways

• Minimal navigation design, clear and consistent CTA's, and visual hierarchy are critical to lead users in the steps of their buying journeys.

• High-quality videos prove to be an essential design choice to provide the overall personality of trainers and insight into how they work with their clients.

• Highlighting "about me" and testimonials on the homepage of trainer’s websites are critical to building rapport and trust among users.

• Using social media as a way to collect testimonials is an intelligent way to advertise for free while also achieving growth and engagement.

• Solid websites have overall professional, empathetic, and trusting tones.

• Displaying or mentioning certifications can show off fitness expertise and can be an excellent way to gain confidence from users.

• Weak points are attributed to unintuitive navigation and lacking design aesthetics.

After synthesizing market research, I sat down with the stakeholder of Magic Pill Training to build provisional personas so that we can zero in on their target market. We recognized the following four potential persona's.

User Research & Insights

We established our main objectives during early conversations: Primarily, we wanted to tap into what user's processes, preferences, and pain points were when searching for a personal trainer online. We also wanted to learn what drives and motivates users in different phases of their buyer journeys. I conducted one-on-one user interviews to gain empathy and better understand Magic Pill Training's potential clients.

Through interviews, we learned users have "trust issues" when it comes to testimonials; they are interested in personal trainers that can prove credibility. Participants also strongly dislike when personal trainers have a "one size fits all" program. They are looking for customized programs to fit their specific goals.

Some eye-catching features that draw potential users include an easily navigable layout with clear CTA's such as "contact," viewable testimonials, and client transformations that have photos from current/previous clients.

Social media and community interaction have a powerful influence when it comes to the customer's buying journey. Participants use social media to search, validate, contact and purchase. All participants confirmed using their mobile device first if/when they searched for a personal trainer.

A few recurring themes such as the need for social media presence, credibility, personability, versatility, and intuitive navigation allowed me to gain clarity and led me to think about some layout design questions:

• What pages and titles are necessary for users to have a seamless experience?

• What call-to-action buttons and labels do I need to design to guide users in their journeys?

• What would the best way to highlight personal trainer personability and credibility to users?

• What's a unique way to show off Magic Pill's versatile programs?

• Is there a way to tie social media and testimonials to engage, advertise, and build rapport at the same time?

After getting a feel for user needs, we narrowed down two primary personas based on key findings from all research phases and analysis.

Oliver is an educated and disciplined guy. He likes being challenged and pushed to his limits. He's been fit most of his life but wants to switch up his routine and crush some new goals. He is motivated to build muscle, get stronger, look good, and needs an experienced personal trainer to get him there. He is quickly turned off by "bot testimonials" and trainers that offer a "one size fits all" program.

Jessica has been trying to live a healthy lifestyle for as long as she can remember. She tries her best to eat clean but knows she has been slacking in the physical activity department. Jessica is explicitly looking for a personal trainer to motivate and teach her how to balance diet and fitness to achieve her body type goals. Word-of-mouth and social media are the primary ways she likes to search for and hire people.

I created a journey map to visualize the process and understand emotions that our specific user would go through while searching for a trainer, finding the information they were looking for, and ultimately reaching out. This exercise helped me identify essential feature and component opportunities:

• Integrate social media tools such as Instagram and Facebook and use them as a tool to engage, educate and build trust with potential clients

• Highlight certifications, expertise, training programs & success stories

• Design mobile-first approach with straightforward navigation and call- to -action buttons

Based on research and gaining empathy for Magic Pill Training's potential customer journeys, I designed a sitemap to serve as a visual blueprint of the website's primary pages. Key pages include Home, About, How it Works, Success Stories, Shop, Blog, and Contact. Services will consist of subpages: Training, Nutrition and Mindset, and Shop would include subpages: Apparel and Supplements.

To create a seamless user experience and visualize how the website would act and connect with user's interactions, I designed a user flow. This flow revealed a scenario where Jessica, a potential Magic Pill customer, moves through different decision nodes while exploring and filling out a contact form on the site.

Low-Fi

To gain a basic concept of the user interface and make the wireframing process smooth, I sketched up a few different versions of the site's key pages. Prominent CTA's and visual hierarchy were at the top of my list when illustrating. I met with Magic Pill's stakeholder to review the sketches, and we finalized three drawings for the Home, About, and Services pages. We selected the winning illustrations based on a combination of essential and aesthetically pleasing elements.

Mid-Fi

While upgrading my sketches to mid-fidelity wireframes, I started forming answers to my previous questions. 

• A hero video of the personal trainer on the homepage gives users an insight into their personality and how they train their clients.

• An image carousel and description on the homepage highlights versatile programs.

• Client testimonials get validated through real people via Instagram social media links.

• Credibility gets confirmed through "success stories" as well as specific "experience and expertise" content on the "about me" page.

I focused on visual and usability principles to guide people in their different buyer journeys. 

Defining Brand Identity

I created a mood board to set up a visual brand direction and use it as a resource to keep the style and aesthetic consistent with my client's goals and expectations.

Magic Pill Training represents authentic, powerful, evolving energy shown through dynamic architecture, raw textures of nature, and abstract patterns. A feeling of boldness and minimalism is present through san serif fonts. Images reflect hard work and spark motivation for a challenging yet exciting journey ahead.

It's essential to be easily recognizable, marketable, and exhibit variation and flexibility in a modern brand identity system. I kept this in mind while designing Magic Pill's logo. After bouncing a few ideas back and forth and talking through several iterations, we narrowed our decision to options 1, 2, and 3 as we felt 4 & 5 resembled a cell phone signal.

We finally decided to proceed with option 3 because it exudes a contemporary and trustworthy feeling.

To use as a visual reference for design language, I created a style tile. The one-page design guide included the logo in responsive formats, fonts, colors, and more. My goal was to tell the brand story in an accessible, client-friendly manner.

Hi-Fi

After defining the brand identity and laying down the site's basic structure, I started adding detailed visual features that would allow me to get feedback on specific elements and features during usability testing.

Responsive

Once high-fidelity design layouts were confirmed, I created responsive designs for key pages so that content and elements automatically scale to match the screen size on which it is viewed.

Design System

I built a UI kit of ready-to-use components, including responsive logos, navigation, footers, buttons, card layouts, and more. This kit will keep future designers and me from drawing UI elements from scratch and will help with streamlining the entire design workflow process.

To be continued…

This project was an excellent opportunity to work one-on-one with a local small business stakeholder. Conducting research was eye-opening and allowed me to empathize with users regarding their online personal trainer buying journeys. It was interesting to see how big of a role social media plays in different users' journeys. If I had the opportunity to continue work on this project, I would love to build out the remaining pages of the site and test again, focusing on social media and community interaction.