Spooorty: Play Sports With Community Full of Mutuals

Spooorty is a mobile app currently under development, designed to unite sports communities on a single, comprehensive platform. This project showcases the complete end-to-end research and design process, including user interviews, analysis, and the creation of final design systems and prototypes.

🧢 Hats that I wore

User Research 20% + Product Design 80%
‍
Team: Ling Cao, Arthur Liao, Thomas Lu
‍
As a Product Designer, I analyzed user sentiment to define the problem space and brainstorm solutions for sports enthusiasts. I designed all features, developed prototypes for user testing, and created a comprehensive design system with detailed documentation.

Process

1. Understand needs and problems

2. Ideate opportunities

3. wireframing

4. Design review #1

5. Create initial high-fidelity design

6. Design review #2

7. Define and apply brand identity

9. Prototype high-fidelity design

10. Design system and variables documentation

11. Dev hand-off

Hypothesis

As a passionate pickleball player, we often wondered how people connect with others to play. At the start of this project, our initial hypothesis was that individuals are eager to join new communities in their city but struggle to find them.

🧐

If there is a platform for sports communities, more new players will join clubs, and organizers can easily promote their events.

Research

The goal of our research and analysis was to identify the stages at which users encounter challenges or obstacles when discovering and joining new sports communities. Using data from user 40 interviews, we created affinity diagram to discover opportunity area.

Pain Points

User research revealed that individuals often struggle to find suitable clubs and events that align with their busy schedules, particularly in terms of time and location. Additionally, many users feel intimidated joining new teams due to uncertainty about skill levels. They also prefer attending events with friends or mutual connections rather than going alone.

Problem Statement

Based on insights gathered from user research, we have defined the following problem statement:

😖

Users struggle to find sports clubs and events that align with their own and their friends’ schedules and preferences, hindering their ability to participate together.

Competitive Analysis

In our research, we also analyzed user sentiment toward competitive apps such as Volo, Meetup, NYC Footy and etc. This involved gathering user opinions and feedback to understand their experiences with these platforms. Key topics emerged during the analysis, highlighting both strengths and areas for improvement.

Never used before

“I have a friend who uses Volo”

“I have heard of people using NYC Footy to organize soccer leagues, but personally haven’t used it before”

App User Interface

“Volo had a point system that didn’t make sense to me at all”

“Quality of the fields and organization for what you’re paying for Volo is not worth it, but there is no better alternative”

“I used NYC Footy once for tournament and they wouldn’t stop emailing me. Tournament was fine but follow up was annoying”

Attending Games

“Generally these apps are great for reserving busy courts”

“Meetup is useful, though I only used it for groups I already knew about, not to find new groups”

Organizing Games

“It is hard to get to the teams to show up on Volo”

“Volo had team that are wildly different on skill-levels, which made less fun”

“Generally these apps are good to find already established games”

UX Goals

Users expressed a strong need for a unified platform that allows them to search for events based on specific criteria, such as time, location, skill level, and overall vibe. Additionally, many users highlighted the importance of attending events with friends, emphasizing the social aspect of their experience as a key factor in choosing sports activities.

🥅

Time and Location: Users can easily search for events based on specific times and locations, allowing them to find opportunities that fit seamlessly into their schedules.
Friends and Mutual Connections: Events and clubs spotlight the attendance of user’s friends or mutual connections, making it easier to discover and join events that foster a familiar and social environment.
Skill Levels and Atmosphere: Event organizers are required to define skill levels to set clear expectations and create the desired atmosphere, helping users determine if the event aligns with their preferences and comfort levels.

Opportunity

We ideated three opportunity areas, each directly informed by specific UX goals, to address key user needs and enhance the overall experience.

1. How might we allow the users to find sports events that seamlessly fit into their schedules?

Enhance the accuracy of the search experience by designing a detailed search page that includes fields for users to specify their accessibility needs and availability.

2. How might we foster social environment to attend sports events with friends or mutuals?

Incorporate information about friends and mutual connections attending an event as a core feature displayed prominently on club and event cards fostering a sense of community.

3. How might we deliver sports events information based on skill levels and clear expectation?

Offer detailed skill level options for club and event organizers to clearly define the expected proficiency and atmosphere of their events creating a more enjoyable and aligned experience.

User Flow

We created detailed user flows to identify the specific requirements for each feature and provide a clear structure. The flows focus on two primary user groups: organizers creating events and attendees searching them.

Initial Wireframe - A/B Testing

A. Two separated sections

Clear visual distinctions between types of content displayed on a single screen.

B. Divided using tags (Small Card)

Content is organized using a combination of bottom nav, tags and compact cards.

C. Divided using tags (Large Card)

Maintains the same organizations as B but enhances visualization with larger cards.

Result

🏆

C - The content organization is more intuitive with a combination of bottom navigation and tags, avoiding the clutter of multiple content types on a single page. Also, larger cards provide a clearer and more comprehensive view of all necessary details at a glance.

Initial High-Fidelity Design

Following the decisions informed by A/B testing, we developed high-fidelity designs for all key features. Below are examples showcasing six core features, each thoughtfully crafted to align with user needs and deliver an optimal experience.

1. Home/ Explore Page

2. Notification Page

3. Club/ Event Page

4. Create Club/ Event Page

5. Search Filter Page

6. Profile Page

Branding

During team feedback sessions, we concluded that the current design felt too bland and generic, lacking the distinctiveness needed to stand out—ultimately making it uninspiring. In response, we returned to the drawing board and reimagined the branding from scratch. Through multiple rounds of brand exploration and creative exercises, we developed a fresh, trendy theme designed to inject energy and excitement into the app, ensuring it leaves a lasting impression.

Final High-Fidelity Design

Building on the defined brand values and overarching visual theme, I reimagined the app's visual design to align seamlessly with the UX decisions informed by user research. This process ensured that the updated design not only reflected the new branding but also enhanced usability, addressing user needs while maintaining a cohesive and engaging visual experience.

1. Home/ Explore Page

2. Notification Page

3. Calendar Page

4. Club Page

5. Event Page

6. Create Club/ Event Page

7. Search Page

8. Profile Page

9. Other User's Profile Page

Final Prototype

Design System

To ensure a sustainable design system and minimize redundant work during potential design iterations, I developed a robust and well-structured set of design tokens and a comprehensive component library. Leveraging Figma variables and styles, this system will align directly with code variables and the UI component library. Additionally, it has been thoroughly documented to facilitate a smooth and efficient design-to-development handoff.