A React Native app for the community of the best bettors
What is OddsCrowd?
OddsCrowd is a digital community of bettors. Initially we built a website where users could enter and create their own free competitions for the best picks and win prizes. There, players could also share their interest in sports, show and track stats on betting picks.
After several years, OddsCrowd decided to build a cross-platform mobile app for the website. They considered that its development would bring more users to the service because:
The app would make it handy to use the service by letting people track info on gadget screens while, for instance, watching their favorite games.
The app would support push notifications and other tools for engaging the audience.
The app would attract users who could possibly go to competitors that already had apps.
The idea of creating this app came to the client 10 weeks before Super Bowl. Hence, the first problem we had to deal with was how to make a robust and easily scalable app in such a short period. Let’s now explore how we managed it.
We started our work from defining the core functionality and drawing a user flow diagram. As a result we got functionality that offered bettors the whole range of possibilities. Among the main functions were those allowing users to follow other bettors and view their progress, read news on bets, enter picks, and track odds boosts and promotions that the app constantly downloads from legal sportsbooks in the US.
OddsCrowd had a rough sense of what they wanted to see and provided us with sketches of the future screens, based on which we then created wireframes.
Sign Up / Sign In
We’ve made a user registration process simple: you only need to type in an email address and password, or immediately sign up with your social account. Email verification is not required to start your interaction with an app.
If you are looking for a user friendly app design, check our Design Services.
An onboarding leads users through the main screens. Even if a user skips the onboarding on first use, there’s no chance to get lost, as screens are followed by titles and short texts explaining where the user is.
The Game Center page allows users to sort games by sports type, switch between upcoming and live events in the tap bar, and interact with event cards
A user can find other bettors, see stats on their picks, and follow them.
OddsCrowd proposed two brand colors — red and dark blue — that we used for UI elements such as charts, buttons, icons, and other. We used green color to highlight useful info: participation confirmation, free public competitions, wins, and odds boosts.
Typography & Colors
Logotype & Icon
OddsCrowd app logo is designed in the same brand colors with a white slanted font over them.
As always, we based our UI-kit on iOS and Android guidelines.
Ready to bet on our design and development services? 😉 Click below to leave your request.
The OddsCrowd app development process can be described in three stages, in which we:
At each stage, we supported the current version of the application and fixed bugs if necessary. After every milestone, we released updates in the App Store and Google Play.
The main framework for building the OddsCrowd app was React Native, an open-source user interface (UI) framework for making native mobile and desktop apps. We chose React Native for the mobile technology stack as the most convenient tool to create one app for multiple platforms.
If you want to launch or improve your startup, use our development services.
What are the benefits of this framework from the business side?
It saves your time
It saves your money
Maintenance costs are reduced due to writing new features and fixing bugs only once. Compare it to doing the same for each platform.
It has a reusable code
The code and logic are the same as in React.js, so you can use the same code for the frontend side of the product web version, and vice versa.
It gives you flexibility
You can evolve your app faster with a large number of ready-to-use solutions: OTA-updates, push-notifications, analytic tools, dynamic links, etc.
It can be distributed in official stores
React Native is wrapped in a native bundle, so you can easily make your app available on App Store and Google Play.
Another strong competitive advantage of the app is analytics
To display data on odds, games, and game results, the backend calls third-party APIs (data providers). We changed data providers every time, when OddsCrowd found more reliable partners or data providers to make the app relevant and even more trustworthy.
To provide our client with a reliable and flexible app we used ready solutions based on the React Native framework
These were Expo for tools, application development and testing; and Expo-Notifications for push notifications. We used Sentry to track bugs in production and keep the app, website, and backend stable. And we integrated Firebase Analytics for OddsCrowd to collect usage analytics.
With Deep Links technology, a user opening links on the website pages will be redirected to the same content on the app screens. It creates a seamless experience for users of different devices, no matter if they have already installed the app or not.
Firebase Dynamic Links
These are smart links providing users with smooth app usage experience. It’s the best solution for multiple platforms. Even if a user is viewing the screen from a web app, the link will bring him to the same screen after the app installation.
Firebase Analytics is a ready-to-use technology that helps to gather information on how users interact with an app. In the OddsCrowd case, it helped to track visits of app screens and time spent on them, and monitor conversions to the partner websites.
We had to deal with some challenging tasks in the process of development:
To reduce the cost of development
At first, the OddsCrowd suggested implementing Tapjoy library to track ad campaigns results. However, it would significantly raise the app’s cost, as it didn’t have a ready SDK compatible with Expo. Instead of getting rid of Expo, we used Dynamic Links and our backend for tracking numbers.
To comply with the requirements of online stores policies
We had to make sure that we followed the guidelines of Google Play and App Store to pass their reviews. For this purpose, we thoroughly elaborated the word choice and linking in the app
To release updates before game season starts
We adjusted every implementation of new features and app versions to game dates. It was important for OddsCrowd to give users a better experience before they start making their picks.
Design → 1st Release: 10 weeks to the start of the Super Bowl
Monthly number of users increased by 10 times shortly after the release
> 2000 downloads in app stores
Want to build your next React Native app with Ronas IT? Then React by contacting us. 😎
Thank you for watching!
Design & Dev Team