Seek my Soulmate

League Management System - Web App
Dashboard on desktop and mobile for Total Sports Hub

Overview

Overview

Leveraging my love for sports and experience managing leagues, I built a time-saving sports management system. This web app streamlines league operations with features like online registration, automated team formation, simplified reporting, easy waiver management, integrated messaging, and a mobile-friendly design.  By using No Code tools, I created a fully functional solution to empower sports organizations.

Challenge

The sports management software market is crowded, so I knew my system needed a clear advantage. User-friendliness and seamless mobile functionality were non-negotiable. My challenge? Building a web app that stands out, offers essential features, and delivers a smooth user experience across devices. Next steps: marketing the app to attract new organizations and revolutionize league management.

Process

Building a better league management system wasn't just about code. It started with deep research. I dove into existing software, analyzing features and identifying gaps in the market. Equally valuable were meetings with league leaders and coaches. Hearing their pain points with current solutions solidified the need for a more user-friendly experience.

That user-centric approach continued into the design phase. My goal from day one was an intuitive and seamless interface. I started by creating a sitemap for the entire website, and flow charts for specific flows, then I began rapidly prototyping wireframes of the app's key pages, constantly iterating on details and maintaining consistency through a design system.

With the design locked down, development began in earnest using Bubble.io. This is where I tackled some of the app's more complex functionalities, like managing multiple divisions within a single program. But development wasn't a one-time thing. Once I had a Minimum Viable Product (MVP), it was time for rigorous user testing.  Their feedback is invaluable, fueling ongoing improvements and app refinement.

Outcome

The long hours are paying off! The app is fully functional and addresses many of the needs I identified in my research.  Early user feedback has been fantastic, highlighting the app's potential to revolutionize sports management.  With an easy-to-use system, league managers and coaches can spend less time on admin and more time on what matters: the game itself.

Conclusion

The startup journey has been an incredible learning experience. Wearing multiple hats – researcher, designer, developer, tester, and marketer –  forced me to see the big picture at every step.  Development, in particular, made me acutely aware of the importance of good design. I've learned how to design in a way that facilitates smooth development, ultimately leading to a better product. I can't wait to witness this app blossom and make a real impact on the sports community!

Role

Founder, UI/UX Designer, Developer

Programs Used
Figma logo
Figma
Bubble.io logo
Bubble.io

Reference

Reference

Thorough competitor analysis is essential for laying a solid foundation for any project. By examining successful and unsuccessful elements within the competitive landscape, I was able to identify opportunities for innovation. I conducted in-depth research through direct platform experience, available screenshots, and tutorial videos to gain valuable insights. This comprehensive analysis proved instrumental in shaping the direction and planning of the app.

SITEMAP

SITEMAP

The sitemap proved invaluable in defining the necessary pages and their respective content. It served as a blueprint for almost every aspect of the project, allowing for a rapid understanding of the user flow. By visualizing page interconnections and content hierarchies, I could effectively plan the overall user experience before diving into the design phase.

Sitemap of Total Sports Hub

FlowChart

FlowChart

When creating flowcharts, I carefully consider each step in the user journey, identifying potential decision points or multiple paths. Understanding these possibilities is crucial for development as it ensures a seamless user experience. Flowcharts often serve as the essential bridge between design and development, clearly communicating the desired user flow.

Flowchart of Total Sports Hub

WIREFRAMES

WIREFRAMES

To establish a strong foundational layout, I employ a minimalist approach, utilizing basic shapes to rapidly explore and refine page structures. This iterative process ensures optimal composition and visual hierarchy.

Wireframe of the dashboard

Design System

Design System

To jumpstart the design process, I leveraged the established AWS Amplify UI Kit. It provided a solid foundation of core components that I could tailor to  my own design aesthetic.  As the project progressed, I continuously expanded my design system by adding custom components to ensure a consistent visual language throughout the entire web app.

Figma components
Figma design theme

Figma Designs

Figma Designs

Figma became my design hub. I meticulously crafted each app page, prototyping them together for continuous user experience testing throughout the process. This iterative approach ensured a smooth user flow.  Once the design was finalized, I meticulously documented each component on every page. This comprehensive annotation ensures anyone referencing the design has a clear understanding of every element's function.

Program view in figma
Figma design of the dashboard
Figma design of the organization feed
Figma design of the registration process

Development

Development

Bubble.io presented both hurdles and triumphs.  I established a robust database to house all application data. Workflows were then meticulously crafted to not only create and edit this data but also control the user interface.  This level of control allowed me to dynamically hide or display elements based on my design, ensuring a truly interactive and responsive app.

Screenshot of the front-end development in Bubble.io
Screenshot of workflow development in Bubble.io

Final Product

Final Product

Program View page

Programs

I developed comprehensive program management tools for leagues, tournaments, and camps, accommodating multiple divisions as needed. Program pages are designed with clarity in mind, providing essential details such as program type, cost, and schedule. Organizers can tailor programs with specific criteria like age, gender, and custom branding. The platform offers real-time visibility into team and player registrations, as well as program-specific rules.

Responsive Design

A responsive design was paramount for this application given the prevalence of mobile usage. Certain elements were dynamically adjusted to suit various screen sizes, while others were designed to adapt seamlessly to different platforms. This approach ensured optimal user experiences across all devices.

Mobile view of Total Sports Hub
New message screen

Communication with Players

Effective communication is essential for any sports organization. To facilitate this, I implemented a robust communication platform that includes mass email capabilities and a personalized activity feed for players. This feature allows for efficient dissemination of important announcements, updates, and event invitations.

Team and Player Management

After player registration, organizers can effortlessly manage team rosters, division placements, and financial transactions, including refunds and removals. The intuitive drag-and-drop feature simplifies team assignments, streamlining the administrative process.

Assign players screen

Website & Emails

Website & Emails

Putting on my marketing hat, I created a comprehensive website that serves as a central hub for app information. It outlines all features, pricing, company details, and legal information. A direct link to the app's signup page makes it easy for visitors to transition from learning about the app to using it.

To generate early buzz, I crafted engaging email campaigns using Mailchimp, maintaining a consistent design aesthetic throughout. These emails effectively showcased the app’s value proposition and encouraged sign-ups among potential users.

Website screenshot of Total Sports Hub