UX / UI Design
TeamPlay
TeamPlay
Making sports more accessible
Role
UX/UI Designer
Timeframe
June 2023 - August 2023 (Revised January 2024)
Team
Individual
Overview
During the summer of 2023, I wanted to learn more about UX Design and decided to pursue the UX Design Certificate course at BrainStation. For this course, we had to create a digital project to solve a problem and I chose to solve a problem that was closely related to my interest of sports by creating an app called TeamPlay.
For beginners, learning a new sport can be challenging, especially when competitive environments are perceived as intimidating. Additionally, it can be difficult to find both people and equipment to play with. TeamPlay is an app designed to address these challenges, making sports more accessible by connecting people with similar interests and backgrounds.
01 Preview
02 Context
The Problem
Throughout my life, I have always enjoyed playing sports such as basketball and volleyball. However, when I first started getting into each sport, I had a tough time as a beginner finding both people and the right equipment to play with. With basketball and volleyball both being team sports, I have always found difficulty finding people to play with. To add on, each sport required a facility with a court and a net making it even less accessible for those who want to play.
Fun fact: I was the team captain of my intramural volleyball team
My volleyball teammates and I
The Challenge
How might a digital product enable, encourage, and help people find others with a similar interest in sports and bring them together in equipped facilities?
The Solution
TeamPlay is an app designed to address these challenges, making sports more accessible by connecting people with similar interests and backgrounds. The app mobilizes personalization to resolve the pain-points that inhibit athletes from playing sports while providing access to all available sports equipment and facilities.
Design Process
5-Step Process
03 User Research and Results
User Research - Interviews & Questionnaire
Interviews were conducted on 5 participants ranging from those wanting to get into sports to those who were advanced players in sports such as varsity athletes. These interviewees were selected in order to gather a sample pool reflecting a diverse skill set and behaviour among people.
Key Findings from Interviews
Sports can be intimidating
Beginners found competitive environments to be intimidating which deterred them from learning a new sport. Likewise, more advanced players found that competitive environments such as contact sports can be toxic and hard for beginners to join in on.
Wanting to play at a higher level
Both advanced and intermediate players found it less enjoyable to play with people of lower skill levels and wanted more competitiveness to help improve their skills.
External Factors
Across the board, people found it hard to find spaces to play sports due to multiple variables such as high costs, lack of information, and unfavorable weather conditions.
Questionnaire
To confirm my findings, I sent out a questionnaire to a group of 30 young adults ranging from their early to mid-twenties. Individuals within the sample pool identified themselves as either beginners, intermediates, or advanced in skill level within their respective sports. Interestingly, the questionnaire helped support the key findings from the interviews.
It is hard to find other people to play with
73.3% of participants stated that having a lack of people to play with was a deterrent when trying to play sports.
Insider Information
86.7% of participants stated that they discovered places to play sports through friends, while only 23.3% found such information through a Google search.
Interacting with others is terrifying
73.3% of participants, along with 100% of beginner skill-leveled players, stated that intimidating environments or people were deterrents when attempting to play sports.
Private facilities are not used by most people
86.7% of participants play sports in school, 80% of participants play sports in recreational centers and 60% play sports outdoors. However, only 46.7% of participants play sports in private or rented sport facilities.
An Unexpected Result
Through user interviews and a questionnaire, I confirmed that people experienced difficulty in finding both facilities and other individuals to play sports with. However, a surprising discovery was that beginners often struggled to join in on sports due to an intimidating environment created by more advanced players.
User Personas
By using our key and most common findings, we created two hypothetical users, Zion Williamson and Sarah Miller. Zion is a college student who wants to play basketball in a high-level environment, and Sarah is a student who wants to start playing volleyball but does not know where to begin.
User Personas
User Journey Map
From my research, I was able to create a hypothesized journey map of the problems a user would encounter when trying to play a sport. This journey map helps us identify the specific areas where our users would need the most help.
User Journey Map
High-Level Goals
By understanding our user, I was able to take my key findings to create a series of high-level goals which needed to be achieved.
1. Access to sport facilities as MVP
First and foremost, I wanted to create this app to make it easier for people to access sports facilities. Therefore, I knew that building an easy-to-navigate interface with different ways of playing sports was a top priority.
2. Skill-Based Customization
Beginners found competitive environments to be intimidating while more advanced players wanted to play with people of the same skill-level. Through skill-based customization, users of all skill ranges will be able to find the right people to play with.
3. Social Interactions
People who play sports develop a sense of camaraderie and the most impactful experiences are created through social interactions. By allowing room for social interaction, people can interact with their friends or develop new relationships.
4. Option to Invite Others
By giving people the opportunity to invite others, teams can be formed with friends and strangers easily. Then when teams are formed, people can split the expenses to lower playing costs.
04 User Experience
User Experience
To achieve the high-level goals that were set out, I needed to start determining how a user would experience this app. I created information architecture flows and task flows to help understand how the app would run.
Information Architecture
I created an information architecture flow for all the different components and screens needed to create this app. When designing the rest of the user experience, I would reference this to have a better holistic understanding of the app.
Information Architecture
Task Flows
Using the information architecture, I mapped out task flows to understand how the user would experience the app. I created flows for two simple tasks, which were the MVPs of the app: joining a drop-in volleyball game and sending a message to a potential friend.
Task Flow 1: Joining a drop-in volleyball game
Task Flow: Sending a message to make a potential friend
05 Wireframes
Wireframes
To start off the design process, I used the information gathered from the different flows to help start my wireframes and guide my design decisions, leading to the final designs of the app.
Revisions
As this was my first ever project with a tight deadline, I did not conduct any usability test. However, revisions were made after studying the initial wireframe designs to help make the final product better.
Revisions of Task Flow: Joining a basketball tournament
Revisions
Findings
Revisions
1. Profile icon is unnecessarily large.
1. A carousel enables the display of more options on the home screen making them quickly accessible. The 'View All' option allows users to see all available locations if they are interested.
2. Find people" is unnecessary on the home page, and "Browse by category" creates too lengthy of a process for finding a sports facility.
2. The bookmark option allows people to save locations they are interested in for later, while the forward option allows people to share locations with potential teammates easily.
3. Most facilities or events will not be bookable, and joinable at the same time. There is also no need for a report button.
3. Hick's Law states that the more choices a user faces, the longer it will take them to make a decision. By presenting clear profiles with only one button, it helps users make decisions easily.
4. According to Zeigarnik Effect, a progress bar reminds a user that they a a few steps away from completing a task making it more likely for the user to complete that task.
5. Adding an extra step allows locations to have additional timeslots and enables the user to select the best availability for them.
6. By adding an agreement to the "Terms and Conditions," users can bypass the agreement and liability forms at the facilities speeding up the process.
7. Having a "Success" screen provides feedback and information to the user to know that they have signed up. The "Invite a friend," and "Become a free agent" buttons allow users to easily create or join teams.
8. A "Go Back" button allows the user to easily go back to the profile of the location.
Revisions of Task Flow: Sending a message to make a potential friend
4. The "View Profile" button was unnecessary since users could tap on the profile picture to access a user's profile
9. Buttons such as "Suggestions," "Your Friends," and "Close Friends" were added to allow users to see different lists of users based on their needs and interests.
10. The "Add Friend" button replaced the old "View Profile" button, allowing for easy friend requests. The number of "Mutual Friends" above provides the user with useful information regarding connections.
11. "Stats" were added to the user profile to give more information on a user's sports and friend history.
06 Visual Design
Logo, Colours, and Typography
The logo combines the first letter from Team and Play into one geometric form creating a simple but elegant shape.
Colour Palette
From research, dark mode seemed to be used more in sport-related apps than light mode. To enhance user-friendliness and accessibility, I acquainted myself with the dark theme color elevation principles of Material Design. Consequently, I opted to employ four subtly different shades of gray, with brightness increasing in tandem with component elevation, to maximize usability.
Inspired by Color Psychology, the color purple represents power and ambition, creating a positive connotation for the idea of striving to improve in sports.
Typography
For typography, I chose Product Sans as it was a geometric typeface which is optimized for (small) texts making it the perfect text for an app.
07 Final Designs
Final Designs
Lastly, came the prototyping for the final designs of the app where I would take the structural logic of the wireframes and implement the visual designs into it. Throughout the app, TeamPlay's purple colour was used sparingly to bring attention to call-to-actions, buttons, and important information without visually overwhelming the user.
Easy Access to Sport Facilities
TeamPlay makes sports more accessible by providing a list of events, tournaments, drop-in opportunities, and rentable facilities for others to play sports in.
- Curated sport events provide accessible information on all the different ways for people to engage in sports, considering their abilities, time, budget, and location.
- Event profiles give users more information on different events and facilities to let decide whether it is the right location for them.
- Simple sign-up process allow users to join in on events quickly without having to worry about the hassle of filling out their information every time.
Meet Athletes with Similar Interests
TeamPlay's friend system helps you meet people with similar interests and athletic ability through suggestions.
- Friend suggestions allow users to find those with similar interests and athletic abilities.
- Athlete Profiles allow users to learn more other people's personal stories, athletic history, and interests.
- 1 on 1 chats allow users to get to know each other before banding together to play a sport.
Easy Invitation System
TeamPlay makes inviting friends, colleagues, and strangers to events easy by allowing users to add people onto their team.
- Simple invite process makes inviting others to your team easier and quicker.
- Event and team lists help people keep track of how many athletic events they are attending and how many people are already on their team.
08 Takeaways
Project Takeaways
Don't make assumptions
Just because I experienced something one way does not mean everyone experiences it that way. I learned that user interviews are a great tool in discovering and generating new ideas from other people's perspectives.
Iterations are key
The first design will always have flaws. As this was my first UX/UI project, I learned that iterating helped in creating a product that aligned more with the user's goals. Through iteration, I was able to tweak the visual design as well as the user experience.
Asking follow-up questions
This was my first time doing user interviews and I learned that asking "Why" helped encourage users express their inner thoughts prompting a deeper reflection on their feelings and frustrations.