COLAB25 PORTFOLIO

GamePlanr

A progressive web app (PWA) that streamlines recreational sports team management, empowering team captains with effortless team creation, efficient game scheduling, and seamless communication for an enhanced sports experience

Product Experience  

Introduction

Approximately 1 in 5 people in the US actively participate in adult recreational team sports, driven primarily by 'personal enjoyment and fun' (59%) and closely followed by 'health and fitness' (54%) according to Civic Science.

Problem

Despite the popularity of recreational teams, persistent communication and coordination issues hamper the gaming experience. 

Picture this: You're eagerly gearing up for a recreational sports match, excited to engage in the activity you love. However, as game time approaches, you discover that some of your teammates won't be able to make it. If only they had informed you earlier, right?

To address this, we delved into conventional approaches to finding substitutes, revealing inefficiencies and disruptions.

Research Insights 

Process

Surveying 22 individuals and conducting 4 in-depth interviews with recent recreational sports players seeking substitutes, our affinity mapping revealed key themes:

Social Ties Prevail in Recreational Sports:

  • 78% join teams through friends

Word of Mouth and Chat are Primary Communication Channels:

  • 96% use word of mouth, text, and messaging services such as Whatsapp and Messenger for game coordination

Player Management Challenges:

  • 61% reported that teams struggle with uncertainties in player availability and unresponsiveness
  • 82% required substitutes due to last-minute scheduling conflicts
  • 72% noted adverse effects on team dynamics from difficulties in managing the team roster, citing physical exhaustion, decreased competitiveness, and even forfeits due to insufficient player turnout

Our Users

After uncovering two key personas - the team captain and the team player.

We focused our MVP on addressing the team captain's pain points:

  • Communication Struggles: Difficulties disseminating crucial information swiftly to team members, especially when faced with the challenge of quickly assembling enough players for upcoming games
  • Game Coordination Difficulty: Lack of centralized system for tracking team players complicates the efficient management and monitoring of player attendance
  • Player Scheduling Challenges: Fluctuations in player availability and unpredictable schedules contribute to unresponsiveness and no-shows, leaving teams in a bind as they scramble to find last-minute replacements

Pivoting and De-scoping

Initially, we honed in on the player substitution challenge, only to discover a broader issue: the lack of efficient overall team management. To address this, we prioritized enhancing team management in our MVP, reserving features like substitution management  and chat for future phases.

Additionally, considering time, budget, and technical constraints, we chose a Progressive Web App (PWA) for the initial development, with the future goal of expanding into a fully-featured app.

Solution

Introducing: GamePlanr

Through our findings, GamePlanr emerged as a platform designed to empower team captains, offering:

  • Effortless Team Creation: Seamless setup and invitation process
  • Efficient Game Scheduling: Simplified tool for specifying game details
  • Seamless Communication: Timely notifications for attendance confirmation

Low/Hi-Fi Designs & Task Flows

In line with user needs, we crafted low-fidelity wireframes for foundational representation. Three main task flows were prioritized:

  • Task Flow 1: Signing Up For an Account
  • Task Flow 2: Creating a team & Scheduling the first game
  • Task Flow 3: Confirming Game Attendance

Testing and Iterations

To assess the effectiveness of our designs, we conducted unmoderated usability testing using Maze with 34 participants. Overall, participants enjoyed the features for their simplicity and straightforwardness. When tasked with rating each activity on a Likert scale from 1 (very hard) to 5 (very easy), the responses underscored the positive user experience:

  • Task Flow 1: Signing Up For an Account: 4.7/5
  • Task Flow 2: Creating a team & Scheduling the first game: 4.5/5
  • Task Flow 3: Confirming Game Attendance: 4.6/5

Despite this favorable feedback, refinement was needed. To prioritize these changes effectively, we utilized a severity x frequency matrix to identify key usability issues and ranked them by impact x effort.

The primary concern raised by users centered on the process of confirming game attendance. They perceived the button used as small and non-intuitive, confusing it with a 'help' button.

Looking ahead, our commitment to iterative enhancements remains steadfast. Subsequent phases will involve ongoing iterations and further usability testing as we progressively roll out the PWA.

Implementation Details

Tech Stack

Frontend: JavaScript, React, Vite

Backend: Firebase, Firestore (database)

Technical Challenges

Backend:

Attempting to connect Firebase to an Android App, encountering challenges with inaccurate documentation.

Hardest Part of Development:

Deciding the initial direction between a mobile app and a Progressive Web App (PWA). Subsequently, ensuring a delicate balance between facilitating the app's development process and setting it up optimally for future scalability presented tough decisions.

Scaling Considerations:

Initially prioritizing the development of a mobile-based application, the team recognized the importance of planning for scalability from the outset. Opting for a Progressive Web App (PWA) instead of committing solely to an Android app strategy offered broader device accessibility and mitigated potential scalability issues inherent in platform-specific development.

Key Takeaways

Communication: Consistently maintaining effective communication across team members spanning a 9-hour time difference was indispensable for fostering adaptability and ensuring project success.

Adaptability: Remaining agile and receptive to evolving requirements and unforeseen obstacles was crucial for navigating the dynamic landscape of project development.

Technical Proficiency

GitHub Mastery: Collaborative work on GitHub empowered the team with essential skills in version control and streamlined team coordination, bolstering technical proficiency for future endeavors.

Continuous Learning: Embracing a culture of perpetual growth and dedicating resources to ongoing skill enhancement in React, JavaScript, Firebase, and other pertinent technologies underscores the team's commitment to staying abreast of industry advancements and seizing future opportunities for innovation.

Future Steps

To ensure a systematic rollout, we planned multiple stages, helping prioritize features and distinguish between "must haves" and "nice to haves." This approach guides us in delivering essential functionalities and refining the platform.

Phase 1: Launching the Foundation

Google Authentication:

  • Allow users to sign in using their Google accounts, enhancing security and user convenience.

Team Captain Features:

  • Enable team captains to create games and manage basic game-related and creation functions. 
  • Schedule games with date, time, and location details.

Game Management 

  • Introduce the ability for captains to create their first game and team 
  • Allow users to set up their profiles with photos 
  • Implement push notifications 
  • Dashboards and profile creation 

Phase 2: Enhancing User Control and Functionality (in progress) 

User Permissions:

  • Introduce different permission levels, including co-captains, to delegate responsibilities within the team.
  • Define and implement additional permissions for different user roles

Integration Features: 

  • Calendar Integration: Synchronize game schedules with users' personal calendars.
  • Reporting: Provide basic reporting features for game statistics and team performance.
  • Location Functionality: Enhance location services to facilitate better coordination during games and events.
  • Advanced Notifications: Implement more sophisticated notification settings for users to customize their preferences.

Phase 3: Advanced Team Management and Gamification

Substitutes: 

  • Introduce features for finding substitutes when team members are unavailable.
  • Implement comprehensive team management tools for captains and co-captains.

Player Stats:

  • Integrate player statistics, allowing users to track individual and team performance over time.

Gamification:

  • Introduce gamification elements to encourage user engagement.
  • Reward users with unlockable features, upgrades, or special privileges for consistent participation in games.

Post-Launch Considerations

User Feedback and Iteration:

  • Collect user feedback through surveys or feedback forms.
  • Iterate on the application based on user suggestions and identified areas for improvement.

Marketing and Community Building Partnerships with Rec leagues: 

  • Develop a marketing strategy to promote the app.
  • Foster a community around the app through social media and other platforms.

Continuous Improvement:

  • We will regularly update the app with new features, improvements, and bug fixes based on user feedback and emerging trends in team management.

Learnings

Product Manager Learnings:

David

  • Prioritization is key - We constantly had deadlines that shifted and oftentimes got caught up with this. I learned to focus on what’s important to break down large tasks into small bite size chunks. This made even the toughest tasks seem possible! 
  • Learn from your mistakes: Mistakes are going to be made, but it’s how you adapt to them that matters most. Don’t be afraid to step out of your comfort zone! I recall our mid-point demo presentation not feeling super confident, however looking back on this journey it was all part of the process 
  • Important of Communication - Working across multiple time zones proved to be challenging however we would constantly communicate via discord and daily standups (async) which helped to keep us on track. 
  • Ask Questions: As someone who works in tech, but does not necessarily come from a technical background, this course challenged me to ask questions for clarification, but also to lean into a growth mindset! 
  • Being able to zoom out into the details while maintaining a vision of the future and keep an eye on the prize is important. Not just thinking small or big but having to both at the same time.

Designer Learnings:

Hanna Silva

  • Communication played a pivotal role in our fully remote team. Prioritizing regular meetings, documentation, and fostering inclusivity were essential for every team member to feel integral to the product. A personal highlight for me was organizing a workshop that not only deepened our understanding of our users' mindset but also united us with a common goal.
  • Giving the team something to react to. Providing the team with something to react to by sharing early iterations of deliverables, even if not perfectly polished, proved invaluable. Witnessing how these early deliverables, like low-fidelity designs, sparked collaborative discussions, feedback, and swift iterations was both eye-opening and gratifying.
  • 7 weeks fly by! It was a challenge to try to create a comprehensive product within a tight timeframe. Learning the art of concessions and prioritization was crucial. A key takeaway is the importance of solidifying core functions before delving into more dynamic features.

Developer Learnings:

Alex Merkel

  • Frequent Communication: Maintaining open lines of communication was integral in ensuring that all team members were aligned on goals and progress. We held bi-weekly meetings to discuss our tasks and address any roadblocks, which proved vital in keeping the project on track.
  • Prioritization of Features: Learning to prioritize features based on user stories and feasibility within our timeline was crucial. We used a trello to visually organize tasks, which helped us meet our project milestones efficiently.
  • Feedback and Brainstorming: Engaging in regular feedback sessions enabled us to fix and refine our app. By getting feedback and ideas from each team member we were able to identify easy to miss errors that we might not have otherwise and come up with more efficient ways of implementing important features.

Developers Learnings:

Mitchell Hamm

&

  • Product Teamwork Triumphs: Embracing the multifaceted process of product creation through teamwork was eye-opening. Collaborating with diverse talents highlighted the importance of collective effort in navigating the complexities of product development.
  • GitHub Guru: Mastering GitHub's intricacies was like unlocking a treasure trove. This skill will be invaluable for future projects.
  • Documentation Humor: Discovering the quirks of documentation was enlightening. It underscored the importance of adaptability in software development.

Full Team Learning

  • We've developed effective collaboration across diverse time zones, blending our varied skills and work experiences. Recognizing the significance of iterations and trade-offs in transforming our product vision, we've learned the importance of effective communication, flexibility, and making necessary adjustments. We are really grateful for the mentorship from Keyuri that has guided us through these learning curves. Equipped with these experiences, we are prepared to tackle upcoming projects, leveraging the diverse insights of our team members.