UNDEFINED Basketball Training

Curating a site for a personal basketball trainer ready to push the boundaries.

Prototype Walkthrough

"I want to turn my passion into a career"

Project Overview

UNDEFINED is a company started by Emanuel Bryson III as a personal basketball trainer. Without a website, he had a hard time competing with local training gyms for clientele and selling his company merchandise. This site was designed to set him apart from the competition and advertise his skills.

In order to show a cutting edge on current trends and technology, an AI trainer was a suitable addition to the site to allow users to get training and feedback even when they are unable to book a session.

My Role

UX Designer

UX Researcher

Product Strategist

Tools

Figma

Maze

Midjourney AI

Timeline/Purpose

July 2023 - August 2023

Create a Responsive Site

Incorporate New Technology

Background

Overview

Emanuel has significant experience playing basketball and a Masters of education in Exercise Science. He wants personal basketball training to be his primary source of income, but has struggled to get clients due to not having a site to direct potential participants.

His competitors have curated websites that brings clients in while Emmanuel has been strictly using word of mouth.

Goal

My goal is to create a website that stands out from the local training competition to encourage clients to book sessions with Emanuel. This site can evolve with his business as he grows.


In order to elevate the site, I wanted to develop a trainer that could be accessed at any time for clients who want additional assistance and training or are unable to fit in person training into their schedule.

Discovery

Competitive Analysis

I began to observe what local basketball training companies had done to cater to their users. Going Vertical, Coach Moe Academy, and One Gym Sports all advertise these key components that make them stand out to clients.

User Interviews

To truly understand the goals of those participating in basketball training, I spoke to basketball players and parents of child basketball players about what they look for in a basketball training program.

AI Trainer Insights

With the blend of in person training and AI training, I wanted to gather thoughts from my participants about what they valued in a personal trainer and any concerns related to those qualities pertaining to an AI.

Who is looking for training?

Looking to go Pro

Players in high school who want to be one step ahead of the others will seek training to get the one on one attention that they can't get at practice.

Proactive Parent

Parents want their kids to be the best at what they love! In order to give their kid the best chance on the court they will place them in a personal training program.

Conscious Past Player

Without an official team and practices, past players want supervision to provide motivation and to ensure that their technique is still safe and game - ready

Creating the Flow

Using my personas and research insights, I began to create task and user flows to prepare for which screens would be imperative and to begin crafting a flow that allows potential clients to maximize their time on the site hassle-free. It was very important that the services offered were obvious to assist in the sales funnel and ease of use for the site.

Additionally, I created flows to determine how a user would navigate training with an AI system. Features like inputting a video to get feedback on needed to be seamless in order to eliminate any hassle in the gym and motivate users to return to the trainer.

Flows @ Figjam

Booking Emmanuel

Submitting content to the AI Trainer

Visualizing the Solution

Getting a Trainer

Using Midjourney AI, this comic portrays how a user like Chris can benefit from signing up for personal training and receiving one on one attention to improve their game.

Making the Time with AI

This storyboard shows how a user could be positively impacted by using the AI trainer when they are unable to meet up with their human one. It allows for flexibility and 24/7 availability to fit into any time in a user's life.

Define

Dirty Work

I created some Lo-Fidelity Sketches to begin to visualize how the training site and AI trainer may appear in tandem while prioritizing the service sales funnel and accessibility.

Exploring the Possibilities

In creating mid-fedality mockups I began to explore the energy of the site to align with the look and feel that Emmanuel was looking for. Mid fidelity also gave me a low risk playground for how the AI could interact with a user and how the interface would be displayed for an easy messaging experience.

Simple

With visible access to the training options, the landing page draws a user in and shows them what they need.

Clear Options

Laying out the options for a user allows them to pick what is best for them before booking a consult, saving them time.

How it Works

For those who haven't tackled training before, having clear expectations set out permits for an anxiety-free booking!

Starting with AI

AI starts the conversation, helping a user to identify their specific needs the same way a human trainer would.

Video Uploading

An AI trainer is only helpful if the feedback is direct. Treating this like a chat, a user can simply upload their video of training.

Feedback

The AI adjusts to the user needs, providing specific feedback and allowing a user to repeat before moving forward in the workout.

Desktop Browsing

For the website to be accessible from anywhere, I created a desktop version as well. Since users would be unable to bring a laptop to the gym, this site focused solely on the in person training bookings.

Branding Emmanuel

Emmanuel wanted to stand out and be UNDEFINED, so his branding needed to portray that at every step.

Set the Mood

I sat down with Emmanuel to discover what he was looking for with his brand. He already was working with a logo designer, but needed help in refining his visual message. We explored dribbble, pinterest, and other basketball websites to find what he loved.

Colors and Font

Emanuel's brand color is a shade of purple that works well to show exclusivity, unconventional creativity, and youthfulness. Using this base color, I created a color palette to illicit those values in a bold yet minimal way to lead the eye rather an overwhelm it.

Make an Impact

The font choice for this site was IMPACT, which brought that bold flavor while still maintaining readability for users. For all headers and CTA's, this font was in all capitals for emphasis. It's companion font is Manrope, which brings more sophistication to the site and paired well for body text that was not overwhelming to the eye compared to the loud attention grabbing headers.

Iconography

Emmanuel wanted the icons for his site to be bold, but fun. Using imagery within the menu and text kept the approach fun, ust like basketball. After exploration, I settled on a phosphor icon set, using bold outlines that had filled states when clicked for a playful aspect to browsing.

Desktop Site

Accessible by desktop and mobile, UNDEFINED reaches it's target audience of individuals seeking personal basketball training.

Purposeful About Page

Since research and competitive analysis demonstrated that years of experience is a key factor in deciding on a trainer, having an about page that portrayed Emmanuel's experience was imperative to meeting the goals for this site.

Note: Emmanuel is working with a videographer for a highlights video to include at the top of this about page, I have a placeholder image there until the content is available.

UNDEFINED Mobile

The portable version of UNDEFINED includes an AI trainer along with all the same capability to learn about and book a session with Emmanuel. This gives the user the choice of in person or virtual training, in the palm of their hand.

Testing

Method

Maze Usability Testing

Google Meets Moderation

UNDEFINED Tasks

Read about the trainer

Book a consultation

Locate a merchandise Item

AI Trainer Tasks

Onboarding

Start a workout

Upload content for feedback.

Why Seperate?

While UNDEFINED has the ability to go live to enable Emmanuel to begin booking sessions, the AI chatbot was a concept feature. I tested these separately to ensure that each test only included participants who pertained to the target audience and the results were accurate for each part individually.

UNDEFINED Results

Stated no problems when completing the tasks for the training website.

Task completion rates for all tasks with primary or other routes taken.

Of participants rated the experience as "Completely Seamless"

AI Trainer Results

100% of participants were satisfied with the information from the AI Trainer.

Participants that reported that they enjoyed the personification of their AI Trainer.

60% of users did not find the in-chat timer helpful.

Confusing Options

3/5 Users stated that the quick action buttons created some confusion as they were the same colors as their message bubble.

Iteration

While the UNDEFINED site did not require iteration, the participants in the AI Trainer testing encountered two major frustrations: the in chat timer and confusing button options.

Timer Tribulations

Users reported that during a workout they did not want to see the passed time, but rather the remaining time.

"When I am working out, it is motivating to me to see the time I have left decreasing rather than increasing"

Starting the Workout

Decreasing Time

By reversing the function of the timer, users are able to have a better understanding of their remaining time. This is more motivating and useful when completing basketball workouts.

Quick Action Switch-up

Using the mental model

Users reported that the quick action options were not clearly distinguishable from the messages.

After some market research on current chatbot tactics to differentiate buttons from messages, I decided to to include the options within the message bubble.

Takeaways

Flexibility

Working with a client meant that understanding what they were looking for in the product took time and patience. I would have long periods of time without stakeholder feedback and reading between the lines for their specific needs. This taught me how to continue working in a way that allows for quick iterations once I have received feedback.

AI Integration

I am very interested in how the AI systems will develop into everyday life tools. This project allowed me to explore what people find important in these products. How to design different personalization options is an area that I found interesting as each individual is going to have a different level of comfortability with the AI systems.

Organization

The UNDEFINED basketball site will be put into development, meaning I needed to ensure that my component library was put together in an accessible manner. Ensuring that everything I created was in line with the brand needs and could easily be pulled from my UI component library when changes need to be made in the future when I am not working directly with the project. For example, UNDEFINED merchandise is not yet finalized, but I created a setup that would allow for easy addition of the products once they are available.

Prioritization

Working on an MVP forced me to identify what was the bare minimum of features that would allow an AI Trainer to be functional. I would love to add the ability for users to get video demonstrations from the AI or even create an AI avatar that would appear in the chat to personify the trainer even further. Additional features could also be rewards for training a certain amount of times or badges for improvements that a user makes in their training. In further development into it's own product rather than a companion product, a 'livestream' chat with an AI avatar that is able to give feedback instantly would be a high level of development for this AI training concept. Prioritizing what to include in a minimum viable product allows me to ensure I can stick to deadlines and get a product out for user feedback.

Let's Connect

Let's Connect

Created by Julia Young powered by espresso