Creating a next-gen sports tech app in the UK – 40Love case study

Even though launching a sports-tech startup seems exciting for the outer world, there are a massive amount of challenges behind such a venture. Driving a startup to the growth stage is a phase filled with right vision and right decision-making. A sport-tech product has no survival in the market in the long run without offering seamless mobile experience to the users in a world where mobile devices have become staples in everyday life. 

Possessing that vision, 40Love, reached us to create a mobile app for their UK-based tennis club management software. Their tennis club management software was originally built as a web platform. Most importantly, 40Love already had acquired traction in the tennis community. But, 40Love was keen on serving players, coaches, and organizers in the tennis ecosystem via high-level mobile-first approach.

With over years of our expertise in mobile UI design, UX consultancy, and outsourced development, we helped transform 40Love from a functional web app into a modern hybrid mobile app.

Tennis clubs, players, and coaches were relying on numerous scattered tools. Spreadsheets, emails, and social media platforms are a few of them that they use to stay organized. In such a situation, 40Love set out to unify everything in one mobile platform where players compete, organizers manage, and coaches connect. The end goal of building 40Love is to make tennis management simple, transparent, and accessible to the entire ecosystem.

The 40Love web app served its purpose to the fullest. But like many early SaaS products, 40Love web app struggled on smaller screens with UI, navigation problems along with limited real-time features like live leaderboards and push notifications.

The visionary founder behind 40Love had a clear idea of the value of moving fast to acquire the growth stage. There, 40Love decided to transform the web experience into a mobile-first product which is smooth, scalable, and always in users’ hands.

At Exline Labs, we merged design strategy and technical execution utilizing our expertise in UX consultancy. 

Throughout the design journey we created a user-friendly mobile experience backed with strong visual identity. Regarding the development journey, our team engineered a cross-platform mobile app that has the potential for scaling.

The Design Journey

First, we referred to the client’s existing web app and then we completed the design process in a few phases.

Phase 1: Discovery & Planning 

We referred to each and every page of the web app. There we could find effective pages and ineffective pages on smaller screens. Moreover, we could realize that certain flows were confusing. As per our discovery, the entire UI required modernization.

Phase 2: UX Research & Competitor Analysis 

We closely reviewed existing sports and tournament apps in the App Store and the Google Play Store.There, we were able to study design patterns, and we could learn about the user expectations by referring to the user reviews. That helped a lot to build the UVP(Unique Value Proposition) of 40Love.

Phase 3: Defining Goals 

Our key focus is on ensuring easy user navigation, designing modern UI, and building consistent brand identity.

Phase 4:  Mapping User Flows 

We mapped how players, organizers, and coaches would move through the app utilising each and every feature.

Phase 5: Wireframes 

Our team sketched low-fidelity wireframes on Figma to structure screens before focusing on style.

Phase 6: Building The Style Guide 

To maintain consistency, we built a design system with the following elements:

• Colors: Soft purple, dark grey, and white
• Typography: Poppins (bold for headings, regular for body)
• Buttons: Rounded corners, tap-friendly sizes
• Icons: Clean line icons with consistent strokes
• Spacing: 8pt grid system with generous white space

Phase 7: Finalizing UI/UX Designs

With the approval from the client’s end, we created polished screens with clean layouts, readable fonts, and engaging visuals. Our objective was to develop the UI/UX offering similar user experience offered by Instagram and WhatsApp.

Phase 8: Prototyping 

At this stage, we connected all screens into a clickable Figma prototype. There the client could test flows prior to starting the development process.

Phase 9: Refining Upon Feedback

Depending on client’s feedback, we made a few minor adjustments, and then finalized a design with balanced aesthetic appeal along with functional usability.

Once the designs were finalized, we moved to the development stage. The 40Love original system was built on FileMaker. Even though it was functional there were numerous limitations on speed, accessibility, and features.

The following is a summary that elaborates how Exline Labs engineered 40Love mobile app development.

The Tech Stack

• Frontend: Flutter
  We used a single codebase for iOS and Android.
  
  
• Backend: Firebase
  Firebase services were perfect for building super fast and responsive systems. Since score updates, leaderboard updates, and real-time notifications were a major requirement, we decided to utilize Firebase services. Firebase services are ideal for ensuring players and organizers always receive the latest updates while handling authentication, Firestore database, and file storage.
  
  
• Payments: Stripe
  We implemented Stripe to handle in-app payments like tournament fees securely and seamlessly.
  
  
• Push Notifications: OneSignal & Firebase Messaging

Major Milestones 

Key milestones included enabling real-time updates with Firebase for instant scores and notifications, integrating Stripe for smooth payments, and re-architecting the system for a global cloud platform.

Challenges & Solutions 

As 40Love grew beyond local tennis clubs, scaling to a global, cloud-based audience became both a challenge but it was essential. We had to ensure speed and reliability at every step for meeting the expectations of sports communities To acquire this, we adopted a continuous cycle of testing and fine-tuning. There we could resolve everything from small design gaps to gameplay flow. Consequently, we could deliver the app with a smooth, responsive experience that felt effortless to users.

We built a hybrid mobile app for 40Love that runs on both iOS and Android with the native feel. Via this mobile app, we were able to connect the entire tennis ecosystem as follows:

40Love app functions as a hub for tennis players. They can register, track their rankings, and connect with other tennis players. When considering tennis tournament organizers, this app offers simplified match management and leaderboards with ultimate convenience. Moreover, this app offers visibility and new opportunities for tennis coaches.

The ultimate impact is ensuring accessibility for the whole ecosystem with mobile-first experience which can be enjoyed anytime from any corner of the world.

If you are a founder or an aspiring founder who is dreaming about a tech startup with scalable MVPs, keep the following key points in your mind.

1. Mobile is no longer optional: Nowadays, people spend most of their time on their phones. If your MVP does not run smoothly on mobile devices, that means your product has the risk of losing users even before they try it out.
   
   
2. Simple design drives users: Embedding powerful features does not add value all the time. The challenge is to offer a clean, and easy-to-navigate user interface that makes people want to keep using your product.
   
   
3. Outsourcing is always a smart shortcut: Hiring a skilled MVP agency like Exline Labs  will save time and avoid miscommunication issues. Consequently, the MVP development process can be speeded up for a greater extent. Hiring separate designers and developers is a waste of time and money.
   
   
4. Prototyping is a must: Prototyping helps you see how users interact with your MVP before investing in development. This practice is helpful to spot issues during the early stage of the MVP development and at the end of the day it saves a lot of money.
   
   
5. Keep improving your MVP even after launch: It is essential to update the MVP on a regular basis in order to transform it to a successful tech product. Moreover, this practice helps you to build long-term trust with users.

The 40Love mobile app showcases how high-level mobile UI design, UX consultancy, along with mobile development consulting can transform a functional idea into a scalable high-end sports-tech product.

40Love chose Exline Labs as their MVP agency to build this cross-platform application. This case study is a proof that demonstrates that startups can globally compete with the help of right mobile app development services in the UK.

Finally, we would like to emphasize that it is always worth it to build apps that offer the feeling of effortless use and engagement. Such MVPs have a greater potential for scaling.