Designing a community-based application for all-level volleyball players.

PROBLEM

Volleyball players of all skill level are having trouble finding places to play and learn.

SOLUTION

Design an application that connects players to new gyms and friends based on skill level.

ROLE

UX Researcher
UI Designer

SOLUTION

8 weeks

Overview

Background

I've always been a "sporty" gal. My parents have supported my athletic endeavors the best they could with outside circumstances, and my favorite one being volleyball. Playing volleyball since 2013, I've seen the different levels of play, competition stages, and community development across Southern California. After covid restrictions were lifted, I was itching to dig out my kneepads. However, the pandemic left the community confused, insecure, and raring to get some swings in. Some gyms were still closed, others closed down permanently, and some friends have lost contact after 2 years of inactivity.

Challenge

There is difficulty starting and improving in team-based sports like volleyball or basketball, which requires at least two teams, equipment, and place to play. This problem has been exacerbated with the community decaying from quarantine regulations, thus players, new and experienced, don’t know where to play anymore.

Goals

Business Goals

• Increase user base and retain them through community-building and organization
• Increase in specialized content to increase ad-revenue and perhaps introduce membership perks
• Be the most reliable, number one source for volleyball (perhaps in the future, all team-based sports) information and content
• Increase rating on app stores

User Goals

• Want to find open gyms that fit their requirements and be able to see that information before having to attend in-person
• Be more sociable and engaged in the community by making friends
• To improve volleyball skills
• Organize and have easy access to all volleyball information, friends/community, content in one place

Goal Matrix

Discovery

Research Methodologies

Competitor Analysis

Using SWOT Analysis(Strength, Weakness, Opportunities, and Threats), I collected data and analyzed competitor's best features as well as their pain points to understand how to better the user's experience and see how users are currently navigating through information.
Comparing the most current and comparable competitors, the closest application that meets the user's needs is MeetUp. Other competitors either provide information or allows socialization, not both. Despite socializing aspect for Meet Up and Facebook, it does not have a structured form of information presentation or compare other playing opportunities.

User Interviews

After researching and analyzing competing applications, I used my connections within the volleyball community to gather a range of players, new and experienced, to get a first-hand insight into their journey as an athlete. They shared with me their journey into starting the sport as well as how they learn about playing opportunities and their experience using competing applications. A total of 8 participants were between the ages 16 to 45 and have played volleyball in varying competitive settings.

Affinity Map

User Personas

After referencing the user interviews and analyzing through the affinity map, I created 3 distinct user personas. Each user persona has a unique outlook and problem with the current way of finding playing opportunities such as Bryan having trouble finding an open gym at a higher competitive level while Emilia wants to find a friendly, beginner open gym that has a supportive environment. Although all three are interested in sports and volleyball, they each reflect different types of users that will most benefit from this application according to the user research conducted.

POV Statements

Using the user personas, I defined the problems each persona is having by putting myself into their shoes. With this more specific persona in mind, I am able to empathize with the personas and understand how to best provide a solution.

Accessibility

• I’d like to encourage new, interested players to play more often, because it can be intimidating and difficult to find plays and communities to interact with
• I’d like to help avid volleyball players to find better playing opportunities suited to their preferences and enjoy themselves, because not all gyms are operated the same despite having the same people from other gyms. Due to covid, word of mouth has not had the same impact as it once did pre-covid

Usability

• I’d like to help all new and avid volleyball players to find efficiently find and schedule into open gyms, because there is no singular application that effectively takes into consideration all their needs such as a guest list with friends feature, map location, rating and reviewing system, weekly scheduling, etc.
• I’d like to explore ways on how to actively encourage more play time for new and avid players using UX/UI research because it has been difficult for players to find open gyms without already established groups. It is also tedious to track who and where other teammates may be going.

HMW Statements

With the POV Statements and User Personas, I am able to narrow down the problem each persona is having and reflect "how we might" be able to provide a solution using UX/UI design.

Accessibility

• How might we encourage new volleyball players who may be anxious to go somewhere new?
• How might we best encourage new players to interact with the volleyball community before and after open gyms so they may be comfortable attending more consistently?
• How might we guide avid volleyball players to open gyms that suit their preferences better?
• How might we explore alternatives and more effective ways of letting avid players be aware of better suited open gyms than by word of mouth?
• How might we explore ways of facilitating better, more compatible communities?

Usability

• How might we efficiently create a system to effectively track and inform players of all levels about open gyms their friends attend?
• How might we be able to notify and inform players of their scheduled open gyms as well as new open gyms without overwhelming them?
• How might we encourage new players and avid players to attend new open gyms?
• How might we encourage friendship making and community building for those attending open gyms?

Storyboard

Starring two of the user personas, Bryan and Emilia, I wrote two scenarios where each persona has run into a particular problem such as too many notifications or afraid of new gyms and both problems are resolved using a feature of the application Rally.

Storyboard 1: Bryan

Storyboard 2: Emilia

Ideation

Site Map

I started the ideation process with a site map, as it allowed me to gather my thoughts and have a visual representation of how to efficiently organize each page to suit the users needs and wants.

With the time constraint, there are many elements and features that would greatly help users but was not included in the final design. I focused on the main features and pages in this iteration but for future references, I would love to add more of these features and get feedback from users and clients.

Task Flow


After getting an broader idea of what the application needs and the pages required for this project, I further narrowed down the features that were going to be designed out at a high-fidelity level using Task Flows.

For the sake of time, I had to further narrow down the task flows and remove the group chat feature although the chat button is still included in the navigation section. In further iterations, the group chat feature would be the first to be included.

User Flow

Taking the narrowed down task flows, I organized and blocked out how the users would navigate the applications according to each task flow. I also included how each page may flow into each other, including flows that may not directly connect through the navigation bar.
Click or tap image for closer look into each task flow!

Low-Fidelity Wireframe

Based on the Task Flow and User Flow, I designed a few variations of the key frames needed for each task flow.

Mid-Fidelity Wireframe

Using feedback from potential users, colleagues, and mentor, I revised and made design choices that clearly reflect the users needs and wants as well made accessibility revisions and efficiency modifications.

Delivery

Branding

Based on the users and the users' needs, the branding and visual components reflect a trusting, friendly tone that welcomes users and encourages them to try new playing opportunities and meet new people. Using rounded, yet bold typeface and bright, yet light colors, the branding invokes the supportive nature and competitive edge of the volleyball community and targeted audience.

UI Kit

To keep a consistent visual concept, I made a conceptual design system using the branding elements above.

Usability Test Overview

After an initial iteration of a high-fidelity prototype, I conducted a usability test with participants that aligned with the previously created user personas.

Success Metrics

5/5

Participants found no errors during the usability test.

4.5/5

Participants were satisfied with visual design.

5/5

Participants completed all task flows.

Overall Impressions

• Overall app felt like a real app according to participants
• Main comment was to add more spacing between text and buttons
• Add more color and contrast, make use of the teal/green color
• Many parts of the applications were not accessible yet but shows there is intrigue from participants in these features that are shown but not available yet

Changes in Next Iteration

Changes in Sign Up Orientation

Minor changes to color choices to better clarify to the users choices and steps during the sign up task flow.

Moved the shortcut buttons closer to the user's view and eliminate awkward spacing in-between.

Adjust Home Page

The teal section made the home page look too busy, so switched it to white.
‍
The open gym names were too long and inconsistent, so it was changed to just "View Gym" for consistency.

Changes for Accessibility

Changed the colors for the search bar for better visual intrigue and accessibility.
‍
Also spaced out text to increase accessibility and contrast.

High Fidelity Prototype

Task Flow #1: Sign Up Task

A simple sign up task before proceeding with the home page of Rally.
Check out this prototype! ➡️

Task Flow #2: Search and Send Friend Request

Users can explore the home page and use the Search feature to find players they have met to befriend.
Check out this prototype! ➡️

Task Flow #3: Search and Register for Open Gym

Through the Search page, users may also search for open gyms near their area
Check out this prototype! ➡️

Takeaways

Future Adaptations and Additions

There were many features and additions I would love to add in a possible, future iteration of this application that were mentioned but not implemented into the project. In consideration for this being a solo project as well as the time constraint, I am proud of the features I was able to include but also felt that I was too ambitious with what I wanted to accomplish. I would love to see how this project would evolve with more time and a team of designers and developers.

The main features I would focus on to include in a future adaptation would be:
• map feature that can compare and show users open gyms near them, as a different visual representation of new playing opportunities.
• live stream feature that shows past and live plays of an open gym which will show potential players the level of play and crowdedness of a gym to either draw or deter players to come
• discussion board feature where players can share tips, tricks, experience, and further build the community off the court

Insight as a Designer and Athlete

As an avid volleyball athlete who attends these open gyms about 2-4 times a week, I have a great insight into the community and the needs of the audience for this project. However, despite my experience and understanding of the community, being able to interact with my community and talk about their experiences gave me a great insight to creating this project as well as further appreciating the volleyball community in Southern California. While this project was a great learning experience, it was also allowed me to further bond and experience the volleyball community in a new way. I would love to one day get this project off the ground as an real, working application as I, and many other volleyball enthusiasts that I had the upmost pleasure of working with, would love to see in the app store.
iris99kang@gmail.com
Los Angeles, California USA
© 2023 Iris Kang