Level Up
Level Up
Basketball training app for players & coaches
Basketball training app for players & coaches
See Final Design
See Final Design
What is Level Up?
What is Level Up?
Level up Basketball is your virtual basketball coach powered by AI, community, and gamification. It is the ultimate mobile app for basketball players who want to improve their skill level in basketball. You can level up your game with hundreds of basketball drills and workouts created by professional coaches.
Level up Basketball is your virtual basketball coach powered by AI, community, and gamification. It is the ultimate mobile app for basketball players who want to improve their skill level in basketball. You can level up your game with hundreds of basketball drills and workouts created by professional coaches.
Challenge
Challenge
Level Up has multiple teams of designers working on different sections of the application. My team was assigned to focus on the messaging and communications features of the platform. After speaking with our client, we were able to understand their pain points and frustrations. How might we create a team communication interface that facilitates multi-format information sharing (announcement, text, images, files) and fosters collaboration between coaches and team members?
Level Up has multiple teams of designers working on different sections of the application. My team was assigned to focus on the messaging and communications features of the platform. After speaking with our client, we were able to understand their pain points and frustrations. How might we create a team communication interface that facilitates multi-format information sharing (announcement, text, images, files) and fosters collaboration between coaches and team members?
My Role and Tools:
My Role and Tools:
Announcements
Roles
Announcements
Roles
File sharing and organization
Photo sharing
File sharing and organization
Photo sharing
Duration:
Duration:
September 2023 - Janurary 2024
September 2023 - Janurary 2024
Our Solution
Our Solution
In our design approach, we aimed to enhance user experience by centralizing all essential functionalities into a single, intuitive zone. This allows coaches seamless access to various channels within their teams, promoting efficient organization. Moreover, the feature facilitates effortless navigation between channels and direct messaging, ensuring smooth communication flow for coaches.
In our design approach, we aimed to enhance user experience by centralizing all essential functionalities into a single, intuitive zone. This allows coaches seamless access to various channels within their teams, promoting efficient organization. Moreover, the feature facilitates effortless navigation between channels and direct messaging, ensuring smooth communication flow for coaches.
Customer Problem Statement
As a dedicated basketball coach, their current reality involves juggling multiple fragmented tools that hinder effective communication with their players and team. They rely on a mishmash of inefficient methods to disseminate workout plans, track team finances, and monitor player statistics. By having a centralized messaging platform, coaches can manage their team and share any information they need.
As a dedicated basketball coach, their current reality involves juggling multiple fragmented tools that hinder effective communication with their players and team. They rely on a mishmash of inefficient methods to disseminate workout plans, track team finances, and monitor player statistics. By having a centralized messaging platform, coaches can manage their team and share any information they need.
Persona: Basketball Coach
Persona: Basketball Coach
Pain point to solve: Tracking the old-fashioned way on paper, spreadsheets, or ineffective apps
Pain point to solve: Tracking the old-fashioned way on paper, spreadsheets, or ineffective apps
Customer Insight & Value: One place to gain access to prepare workouts & drills, manage the team and grow knowledge as a coach
Customer Insight & Value: One place to gain access to prepare workouts & drills, manage the team and grow knowledge as a coach
Goals:
Manage and organize team information
Get in touch with players and their parents
Schedule and share event information with teams and players
Goals:
Manage and organize team information
Get in touch with players and their parents
Schedule and share event information with teams and players
Competitive Analysis
To kick off our research, I immediately took a deep dive into competitive analysis. After comparing and gaining insights from apps like Fullcourt, SportsEngine, HomeCourt, and some other similar basketball training apps, my team and I learned that simplicity and accessibility is key and that the coach should be able to access everything they need in just a few taps.
To kick off our research, I immediately took a deep dive into competitive analysis. After comparing and gaining insights from apps like Fullcourt, SportsEngine, HomeCourt, and some other similar basketball training apps, my team and I learned that simplicity and accessibility is key and that the coach should be able to access everything they need in just a few taps.
Well that’s great but how were we going to implement a messaging system with this info?
Well that’s great but how were we going to implement a messaging system with this info?
This lead us to conducting an indirect analysis between group messaging apps. We took some extensive looks into apps like Discord, Slack, Microsoft Teams, and Google Chat. Here, we learned that a lot of these messaging apps have a slight learning curve and isn’t entirely accessible to all. Our goal from here was to ensure the app was completely accessible, regardless of how experienced the user may be.
This lead us to conducting an indirect analysis between group messaging apps. We took some extensive looks into apps like Discord, Slack, Microsoft Teams, and Google Chat. Here, we learned that a lot of these messaging apps have a slight learning curve and isn’t entirely accessible to all. Our goal from here was to ensure the app was completely accessible, regardless of how experienced the user may be.
Feature Prioritization
During this stage of our project, my team and I came together and organized our thoughts into one chart. From here we went through and decided on which features were more important to have from the viewpoint of a sports coach. One of the issues we faced during this part was trying to be realistic with our features. You see, while we knew certain features were necessary, we wanted to introduce as many features possible to the user without completely overwhelming them. So we started cutting some of the more "extra" ideas until we were satisfied with our selected features. Afterward, we assigned each team member to work on specific features. I was assigned to the announcements, saved messages, and the organization of shared media (like files and photos).
During this stage of our project, my team and I came together and organized our thoughts into one chart. From here we went through and decided on which features were more important to have from the viewpoint of a sports coach. One of the issues we faced during this part was trying to be realistic with our features. You see, while we knew certain features were necessary, we wanted to introduce as many features possible to the user without completely overwhelming them. So we started cutting some of the more "extra" ideas until we were satisfied with our selected features. Afterward, we assigned each team member to work on specific features. I was assigned to the announcements, saved messages, and the organization of shared media (like files and photos).
User Flow
What did the flow reveal?
What did the flow reveal?
Establishing the necessary functions and the general idea of how they will perform allowed me begin wireframing while still allowing room for future improvements and iterations. Throughout this process, I ran into a couple intersection roadblocks and really had to leave space for communication with my team and getting their insights.
Establishing the necessary functions and the general idea of how they will perform allowed me begin wireframing while still allowing room for future improvements and iterations. Throughout this process, I ran into a couple intersection roadblocks and really had to leave space for communication with my team and getting their insights.
Pain Points:
Pain Points:
Miscommunication and function intersection
Separate flows calls for jumping from certain sections of the app. How might I make these flows into a combined unity during the wireframe process?
Miscommunication and function intersection
Separate flows calls for jumping from certain sections of the app. How might I make these flows into a combined unity during the wireframe process?
Wireframes
Low-fidelity wireframe flow for saving messages
Low-fidelity wireframe flow for saving messages
After creating my user flow, I was pretty much able to start designing. Leading with some basic low-fidelity frames, I knew my designs would require some iteration, but I wanted to get my general idea out there to my team. During this phase of wireframe construction, my team consistently exchanged constructive criticism. One thing I picked up on quickly was that, it was okay for people to judge what I was putting out there.
After creating my user flow, I was pretty much able to start designing. Leading with some basic low-fidelity frames, I knew my designs would require some iteration, but I wanted to get my general idea out there to my team. During this phase of wireframe construction, my team consistently exchanged constructive criticism. One thing I picked up on quickly was that, it was okay for people to judge what I was putting out there.
The biggest challenge I faced during this phase was understanding how to make my design cohesive with the rest of my team. A perfect example of this was during my ideation for accessing "more options" on the message page. There was an interaction issue between mine and another designer's design. In order to include both designs, we instead opted for a top bar where users could flip between tabs. Doing this would seamlessly take account of both designs without too much interference.
The biggest challenge I faced during this phase was understanding how to make my design cohesive with the rest of my team. A perfect example of this was during my ideation for accessing "more options" on the message page. There was an interaction issue between mine and another designer's design. In order to include both designs, we instead opted for a top bar where users could flip between tabs. Doing this would seamlessly take account of both designs without too much interference.
Low fidelity for accessing different medias. We combined our ideas (mine on the left) by understanding each other's design and its intention. Afterward, we found a way to incorporate both design ideas.
Low fidelity for accessing different medias. We combined our ideas (mine on the left) by understanding each other's design and its intention. Afterward, we found a way to incorporate both design ideas.
Once low-fidelities were done, I went ahead started updating them with proper, relevant information such as pictures and texts. Not only that, but I updated my wireframes using the UI kit provided to us by Level Up through figma.
Once low-fidelities were done, I went ahead started updating them with proper, relevant information such as pictures and texts. Not only that, but I updated my wireframes using the UI kit provided to us by Level Up through figma.
During our mid fidelity construction, we were faced by a couple challenges. My team and I were tasked with reiterating on some of our designs more than a few times. Not only that but, we were lacking on our communications end, lead to in cohesive designs and duplication of some work.
During our mid fidelity construction, we were faced by a couple challenges. My team and I were tasked with reiterating on some of our designs more than a few times. Not only that but, we were lacking on our communications end, lead to in cohesive designs and duplication of some work.
We came together and recognized our flaws as a team and ways to improve our communication methods. Our next immediate goal was to finish our mid-fidelity wireframes and prepare for usability testing.
We came together and recognized our flaws as a team and ways to improve our communication methods. Our next immediate goal was to finish our mid-fidelity wireframes and prepare for usability testing.
Usability Testing
We enlisted the expertise of a basketball coach for feedback on our initial wireframes. Unfortunately, I was unable to attend the live video session. Lucky for me, my portion of the design (and most of the design in general) worked as intended without a need for improvement. Subsequently, we refined our designs based on the received feedback.
Pain Points
unintended use of the “three dots” icon in chat
Confusion on Contacts/DM page on how to start a DM
Solution
We implemented multiple shortcuts to streamline access to direct messages, prominently indicating their availability with a messaging icon. Additionally, creating an add button on the bottom right associated with creating a new message.
High-Fidelity Wireframes
In this project, my responsibilities encompassed creating and implementing roles, facilitating photo and file sharing, overseeing announcements, and managing saved messages. The final piece of the puzzle was to finalize and upgrade our mid-fidelities into presentable, prototype ready, high-fidelity wireframes. The aim was to ensure that coaches have all necessary tools readily accessible with just a few taps. Whether it's communicating with a specific player or sharing photos with the entire team, our tailored design empowers coaches with effortless control over every aspect of team management.
Prototype
Prototype
Here is a quick video prototype I made for you. If you'd like to see the prototype for yourself, you can click here :)
Here is a quick little prototype presentation I made for you. If you'd like to see the prototype for yourself, you can click here :)
Here is a quick video prototype I made for you. If you'd like to see the prototype for yourself, you can click here :)
Conclusion
Conclusion
In the end, my team and I were able to create the features for messaging and communication. Our design keeps everything easily accessible in a centralized area for coaches. By doing this, we can ensure a platform with minimal learning curve while still providing coaches with all the tools they need for managing their team. After preparing a presentation for the stakeholders and the CEO, my team and I can successfully say that we solved the client's need while keeping the design consistent with the brand and the rest of the UI Kit.
In the end, my team and I were able to create the features for messaging and communication. Our design keeps everything easily accessible in a centralized area for coaches. By doing this, we can ensure a platform with minimal learning curve while still providing coaches with all the tools they need for managing their team. After preparing a presentation for the stakeholders and the CEO, my team and I can successfully say that we solved the client's need while keeping the design consistent with the brand and the rest of the UI Kit.
Reflecting on this project, I've gained valuable insights into the importance of flexibility and open-mindedness within team dynamics. We faced moments when our designs didn't align perfectly, underscoring the crucial role of clear and effective communication. What stood out to me was the importance of discerning between constructive criticism and mere judgment. This understanding not only helped navigate differing perspectives but also propelled my designs to reach their fullest potential.
Reflecting on this project, I've gained valuable insights into the importance of flexibility and open-mindedness within team dynamics. We faced moments when our designs didn't align perfectly, underscoring the crucial role of clear and effective communication. What stood out to me was the importance of discerning between constructive criticism and mere judgment. This understanding not only helped navigate differing perspectives but also propelled my designs to reach their fullest potential.
Thank you for reading my case study :)
Thank you for reading my case study :)
In this project, my responsibilities encompassed creating and implementing roles, facilitating photo and file sharing, overseeing announcements, and managing saved messages. The final piece of the puzzle was to finalize and upgrade our mid-fidelities into presentable, prototype ready, high-fidelity wireframes. The aim was to ensure that coaches have all necessary tools readily accessible with just a few taps. Whether it's communicating with a specific player or sharing photos with the entire team, our tailored design empowers coaches with effortless control over every aspect of team management.
Usability Testing
We enlisted the expertise of a basketball coach for feedback on our initial wireframes. Subsequently, we refined our designs based on the received feedback.
Pain Points
unintended use of the “three dots” icon in chat
Confusion on Contacts/DM page on how to start a DM
Solution
We implemented multiple shortcuts to streamline access to direct messages, prominently indicating their availability with a messaging icon. Additionally, creating an add button on the bottom right associated with creating a new message.
Contact