UNDEFINED
Redefining Basketball Training
Project Overview
Background
What's your Problem?
Emanuel has significant experience playing basketball and an 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.
Discover
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.
Versatile Training Types
Years of Experience
Undefined Site
To ensure client satisfaction, it was important to hear from users about what types of services they are looking for and how they would like to set up those services. I conducted interviews to hear from potential users.
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.
"I want to turn my passion into a career"
My Role
UX Designer
UX Researcher
Visual Designer
UX Writer
Tools
Figma
Figjam
Google Meets
Tactiq Transcriptions
Maze
Adobe Photoshop
Timeline
July 2023 - August 2023
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.
Project Goals
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.
Define
User Personas
Using the data from my research, I created personas that reflected my users' desires for basketball training.
Creating Flows
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.
If you'd like to view the flows I created, continue exploring by clicking the button below.
Storyboard
Using the persona, Chris, I laid out how this product could assist those in the target population for the product.
In order to visualize how an AI trainer can adequately supplement human training, I created a storyboard to show how it could be incorporated for users to have options to stay consistent despite life circumstances.
UNDEFINED
Redefining Basketball Training
Project Overview
"I want to turn my passion into a career"
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
Visual Designer
UX Writer
Tools
Figma
Figjam
Google Meets
Tactiq Transcriptions
Maze
Adobe Photoshop
Timeline
July 2023 - August 2023
Background
What's your Problem?
Emanuel has significant experience playing basketball and an 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.
Project Goals
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.
Discover
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.
Versatile Training Types
Years of Experience
Non-Basketball Services
Undefined Site
To ensure client satisfaction, it was important to hear from users about what types of services they are looking for and how they would like to set up those services. I conducted interviews to hear from potential users.
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.
Define
User Personas
Using the data from my research, I created personas that reflected my users' desires for basketball training.
Creating Flows
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.
If you'd like to view the flows I created, continue exploring by clicking the button below or here>>>
Develop
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.
Refining
I began to refine the look and placement of elements based on feedback from peer groups and my mentor. My focus here was to ensure I was laying the ground to have a bold site that allowed a potential client to enter and quicky understand how to go about signing up for a consult.
My client was offering a bold idea of being UNDEFINED within the realm of basketball and creating a culture of intensity and individuality. It was important that the site reflect that with large bold lettering and that the main tasks for potential clients were clearly visible. Some of the ideas pictures here, such as the menu icon changing to reflect the current place that the user is on the site, are removed in later versions. This is due to feedback and iterations that showed that sticking to recognizable features were more appropriate on this site as the potential clients will ideally be able to quickly book services and avoid any unnecessary learning curves.
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.
Deliver
Learning from peer reviews, mentor sessions, and client feedback, the high fidelity prototype was born. The basketball site itself as well as the complimentary AI trainer. With further development, the AI trainer would become a paid feature for clients to utilize when unable to meet with an UNDEFINED trainer. Due to this necessary compatibility, the same style is reflected in the chatbot with a modern twist of messaging and keeping up with current AI chatbot trends.
Refining
I began to refine the look and placement of elements based on feedback from peer groups and my mentor. My focus here was to ensure I was laying the ground to have a bold site that allowed a potential client to enter and quicky understand how to go about signing up for a consult.
My client was offering a bold idea of being UNDEFINED within the realm of basketball and creating a culture of intensity and individuality. It was important that the site reflect that with large bold lettering and that the main tasks for potential clients were clearly visible. Some of the ideas pictures here, such as the menu icon changing to reflect the current place that the user is on the site, are removed in later versions. This is due to feedback and iterations that showed that sticking to recognizable features were more appropriate on this site as the potential clients will ideally be able to quickly book services and avoid any unnecessary learning curves.
Since individuals using the site desired both desktop and mobile access to the site, the icons were used as a menu in this version as users could differentiate their location easier when seeing the other options simultaneously.
The Colors of UNDEFINED
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.
The Fonts of UNDEFINED
Finding a balance of bold and professional, I searched for font that would be attention grabbing but also align with accessibility standards to ensure all users would easily be able to understand the site.
Usability Testing
Using Maze, this prototype was put through usability testing to ensure that users could easily preform tasks and experience satisfaction.
This eye catching and familiar font elevated the site with it's clear lettering and thick appearance.
Manrope was chosen as a companion font due to its refined appearance that allows the headers to stand out with a complimentary yet simple body text to foster simplicity and ease of reading material for the user.
UNDEFINED
Tasks
Read About the Trainer
Book a Training Consult
Locate a Merchandise Item
AI Trainer
Tasks
Onboard with the trainer
Start a workout
Upload content for feedback
Usability Results
Stated no problems completing tasks.
Task completion rates for all tasks.
Of participants rated the experience as "Seamless" with the other 20% rated it "Nearly Seamless".
100% of participants were satisfied with the information provided by the AI Trainer.
80% of participants enjoyed the personalization of the trainer.
20% desired to select a trainer from multiple options rather than assignment.
60% of users did not find the in-chat timer helpful.
Since individuals using the site desired both desktop and mobile access to the site, the icons were used as a menu in this version as users could differentiate their location easier when seeing the other options simultaneously.
The Colors of UNDEFINED
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.
The Fonts of UNDEFINED
Finding a balance of bold and professional, I searched for font that would be attention grabbing but also align with accessibility standards to ensure all users would easily be able to understand the site.
This eye catching and familiar font elevated the site with it's clear lettering and thick appearance.
Manrope was chosen as a companion font due to its refined appearance that allows the headers to stand out with a complimentary yet simple body text to foster simplicity and ease of reading material for the user.
Deliver
Learning from peer reviews, mentor sessions, and client feedback, the high fidelity prototype was born. The basketball site itself as well as the complimentary AI trainer. With further development, the AI trainer would become a paid feature for clients to utilize when unable to meet with an UNDEFINED trainer. Due to this necessary compatibility, the same style is reflected in the chatbot with a modern twist of messaging and keeping up with current AI chatbot trends.
Stated no problems when completing the tasks.
Task completion rates for all tasks with primary or other routes taken.
Of participants rated the experience as "Completely Seamless"
Usability Testing
Using Maze, this prototype was put through usability testing to ensure that users could easily preform tasks and experience satisfaction.
UNDEFINED
Tasks
Read About the Trainer
Book a Training Consult
Locate a Merchandise Item
100% of participants were satisfied with the information from the AI Trainer.
80% of participants enjoyed the personalization of the trainer.
60% of users did not find the in-chat timer helpful.
AI Trainer
Tasks
Onboard with the trainer
Start a workout
Upload content for feedback
Non-Basketball Services
3/5 Users stated that the quick action buttons created some confusion as they were similar in color to their message bubble.
100% of participants were satisfied with the information from the AI Trainer.
80% of participants enjoyed the personalization of the trainer.
60% of users did not find the in-chat timer helpful.
Storyboard
Using the persona, Chris, I laid out how this product could assist those in the target population for the product.
In order to visualize how an AI trainer can adequately supplement human training, I created a storyboard to show how it could be incorporated for users to have options to stay consistent despite life circumstances.
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.
My client was offering a bold idea of being UNDEFINED within the realm of basketball and creating a culture of intensity and individuality. It was important that the site reflect that with large bold lettering and that the main tasks for potential clients were clearly visible. Some of the ideas pictures here, such as the menu icon changing to reflect the current place that the user is on the site, are removed in later versions. This is due to feedback and iterations that showed that sticking to recognizable features were more appropriate on this site as the potential clients will ideally be able to quickly book services and avoid any unnecessary learning curves.
Refining
I began to refine the look and placement of elements based on feedback from peer groups and my mentor. My focus here was to ensure I was laying the ground to have a bold site that allowed a potential client to enter and quicky understand how to go about signing up for a consult.
Develop
Deliver
Learning from peer reviews, mentor sessions, and client feedback, the high fidelity prototype was born. The basketball site itself as well as the complimentary AI trainer. With further development, the AI trainer would become a paid feature for clients to utilize when unable to meet with an UNDEFINED trainer. Due to this necessary compatibility, the same style is reflected in the chatbot with a modern twist of messaging and keeping up with current AI chatbot trends.
Conclusion
This was my first project working with a true client. This led to lessons in working with a stakeholder and ensuring that the product is aligning with their vision. Likewise, creating an AI chatbot allowed me to explore what humanizes technology and fosters connections between technology and humans.
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.
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.
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.
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.
Since individuals using the site desired both desktop and mobile access to the site, the icons were used as a menu in this version as users could differentiate their location easier when seeing the other options simultaneously.
The Colors of UNDEFINED
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.
The Fonts of UNDEFINED
Finding a balance of bold and professional, I searched for font that would be attention grabbing but also align with accessibility standards to ensure all users would easily be able to understand the site.
This eye catching and familiar font elevated the site with it's clear lettering and thick appearance.
Manrope was chosen as a companion font due to its refined appearance that allows the headers to stand out with a complimentary yet simple body text to foster simplicity and ease of reading material for the user.
Usability Testing
Using Maze, this prototype was put through usability testing to ensure that users could easily preform tasks and experience satisfaction.
UNDEFINED
Tasks
Read About the Trainer
Book a Training Consult
Locate a Merchandise Item
Iterations
In order to ensure that the trainer is able to be easily used and understood, I wanted to address the main issues that caused problems for my users.
Adjusting the Timer
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"
Quick Action Switch-up
To ensure that quick actions are easily differentiated from sent messages, I went through a process of creating new versions of the button.
I had decided to incorporate shadow to ensure that the buttons were more obviously 'pressable' rather than blending with the flat feel of the messages.
After some market research on current chatbot tactics to differentiate buttons from messages, I decided to test out including the options within the message bubble.
With further insights, I enlarged the buttons to ensure they were accessible touchpoints and the final result was an inclusive and clear selection for users to give quick answers to the AI Trainer.
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.
AI Trainer
Tasks
Onboard with the trainer
Start a workout
Upload content for feedback
Usability Results
Stated no problems when completing the tasks.
Task completion rates for all tasks with primary or other routes taken.
Of participants rated the experience as "Completely Seamless"
3/5 Users stated that the quick action buttons created some confusion as they were the same colors as their message bubble.
Iterations
In order to ensure that the trainer is able to be easily used and understood, I wanted to address the main issues that caused problems for my users.
Adjusting the Timer
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"
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
To ensure that quick actions are easily differentiated from sent messages, I went through a process of creating new versions of the button.
I had decided to incorporate shadow to ensure that the buttons were more obviously 'pressable' rather than blending with the flat feel of the messages.
After some market research on current chatbot tactics to differentiate buttons from messages, I decided to test out including the options within the message bubble.
With further insights, I enlarged the buttons to ensure they were accessible touchpoints and the final result was an inclusive and clear selection for users to give quick answers to the AI Trainer.
Conclusion
This was my first project working with a true client. This led to lessons in working with a stakeholder and ensuring that the product is aligning with their vision. Likewise, creating an AI chatbot allowed me to explore what humanizes technology and fosters connections between technology and humans.
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.
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.
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.
Work With Me
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.
Holistic Approach
Reliable Communication
Personalized Skills Training
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.
Holistic Approach
Reliable Communication
Personalized Skills Training