Mobile Application Development for Football Fan Club

As a company with more than 10 years of software development experience, we create top-notch mobile applications for startups, medium-sized companies and enterprises. Today we want to share with you a case study of one of our recent mobile application development projects.

We believe that knowledge is power, that is why we are always open to provide our clients with as much technical expertise as possible. By showing this case, we want to share with you our experience in mobile app development and provide you a clear view of what pitfalls you may face when developing social mobile application. If you will have any questions regarding this article or mobile application development industry you can always contact us here by filling the form. 

Client background

The client requested us to develop a cross-platform mobile application for a Dynamo Kyiv football fan club. The main idea of the app was to create a social platform which could unite the fans of the club with minor e-commerce integration, such as ticket purchase option and online merch store. Also, we were requested to make a mobile application for both iOS and Android platforms in short terms due to the national football championship with minimum amount of budget. Our customer required high level of mobile app development experience to meet the deadlines and realise the fully functional top-notch social mobile app product. Due to the strict deadlines and low budgets, it was necessary to evaluate the most viable version of the product which could be released in time.

Evaluating the MVP

When all of the information about the project was provided to us we begun to evaluate the most viable version of the project  to fit the development process into the scopes and budgets. Due to the lack of clients technical expertise we had to provide a consultation on the principles of most viable product development compared to a full version from the business point of view. After making a deep research of an application’s context we begun to evaluate the most valuable features which could be delivered to the first release version of a mobile app. Then we provided the evaluated content to our client and agreed on the final scope of work. Later, our evaluated version of future mobile application made it possible for the application to be released within only two months of development process.

Football app development process

At first we were needed to make a UI/UX design for a future application. As soon as  we launched the project, our senior designer has made a relevant for both iOS and Android platforms high-quality user interface design with exiting and yet intuitive user experience. As a main technology stack for the mobile app development we decided to choose React Native to meet the deadlines for cross-platform mobile app development product. As for the back-end part of the project we used Node.js and MariaDB as a database decision. We decided to use MariaDB due to the app’s simplicity and it’s ease integration with Amazon Web Services, where the servers of the app was planned to be hosted. To allow the management of the content within the app, we used Ext.js to deliver a flexible admin panel. For this project we decided to use agile development methodology which allowed our mobile developers to code in the most efficient way along with the continuous quality assurance testings.   Based on our technical experience we managed to plan an optimized workflow for the development process and even delivered a product a few days earlier than it was agreed in the contract. 

App Store application submitment

While the development part was done in time we faced such problem as a misunderstanding of Apple’s store submission process from the client side. The client was not aware of requirements that should be done to successfully submit mobile application to the App Store. Due to the use of already existing Dynamo Kyiv FC brand customer was needed to provide all the proving materials that he owns the rights to the name of the club to be accepted to the store. In spite of our great experience if mobile app development, it was a first time that we faced such problem as brand ownership prove during the App Store submission process. Unfortunately it was not done in time which delayed application’s acceptance for two weeks.

Delivered Value

Within such short terms as 2 months of cross-platform mobile app development we delivered following value to Dynamo Kyiv FC fan application.

Features already available in Football Fan App:

• Log in and authorization via Facebook account or email address.
• Review Feed screen of the app, which is represented by 3 horizontal scrolls with latest media content: news, videos, players.
• “Lazy Load” is implemented for each horizontal scroll.
• Each horizontal scroll turns into vertical one by tapping the special icon or scroll title. There you’ll see the vertical list of all the relevant content cards and choose what you would like to review in more detail.
• All the content is managed from admin panel by content managers.
• There is an ability to add up to 5 photos and 5 videos to each article in News section. Photos and videos are placed in two nice looking sliders on top and in the bottom of the article screen. 
• YouTube sdk is integrated to the app, so you are able to watch videos in minimized or full screen mode,set the video to pause, rewind and share the video in social networks.
• The list of the team members is sorted by roles and filtered by 3 groups: Base team, U21 and U19.
• By choosing a team member you can watch up to 10 pictures of the player in the slider, read general information about him and find statistics on all his games filtered for one year period.
• The bottom panel is placed on every screen of the app. It contains self-explanatory icons for navigation: home, schedule, tickets, bets.
• By tapping 3 dots icon on the bottom panel one can open up additional elements of navigation: About club, Fan-shop, Profile. The menu is open and closed with a smooth animation. Another row of icons is shown/hidden as well as the name under each icon.
• Schedule is available in the navigation panel. On the top of the schedule screen you are able to see which is the closest match of your favourite team. Also, you can review the schedule (date and time) for all the matches filtered by year, month and players group (Base team, U21 and U19). A year picker is implemented as a dropdown menu and a month picker is designed as a slider.
• By tapping any match in the schedule you appear in the match screen with an evening stadium in the background. In this screen you may see the date and time of the match, teams’ logos and a timer which counts time left till the start of the match. You may buy a ticket or make a bet by clicking one of the relevant buttons. 
• Buy tickets option is available from navigation panel as well. By clicking on it, you may see the list of coming matches of your favourite team for which you may buy tickets.
• Bets icon in the navigation panel and “Make a bet” button in the match screen leads you to the screen with Favorit Sport picture for now, as App Store prohibits publishing apps containing gambling features under single developer accounts. It was supposed to lead you to webview of the bets site though.
• About club screen gives you structured information on all the achievements of the team since its foundation till present time.The information is represented by the achievement cards with pictures in slider and years of championships listed under each card.
• Fan Shop is coming soon, so for now it’s just a promo screen.
• Profile screen contains fields the user may fill with their data: name, surname, date of birth. E-mail address is filled automatically after first authorization. There are also informative pages like Terms of Service and Privacy Policy, Feedback form and the ability to remove the account completely.

Features in progress:

• Fan shop: section of the app which lets the user review and order souvenirs with the team logo
• Hiding and unhiding navigation panel by swipes
• Autoplay of the videos in the articles inside the slider
• Adding animation: grey pulsing placeholders of the cards on Feed screen upon loading content
• About app screen – an informative screen available from Profile with the description of developers and sponsors of the app
• Push notifications about new articles published
• Invite friends option
• Adding video as the background in the registration screen

By the end of the project, we delivered a fully functional MVP, for Android and iOS platforms both and finished the project even even earlier that it was required by short terms and strict deadline. This result was achieved due to our technical expertise by using an agile development methodology approach and our expertise in React Native as our main technology for cross-platform mobile application development.

If you are looking for the right development partner to make your next or first mobile application – we are always up for a new challenge!

OS-System. We build your ideas.