Improving a User Onboarding Experience for Coinmine

Let’s talk about your project

Let's connect
Callstack Cosmos
Callstack Cosmos

Callstack is one of the best software teams I've ever worked with. They plug into your team and process seamlessly. They are responsive and professional. I've worked with a lot of software contractors and firms. Callstack is simply the best.

Farbood Nivi
-
CEO & Co-Founder at Coinmine

In brief

We optimized the client’s mobile app performance and introduced a custom tool to measure performance regressions. We set up performance tests and documentation to enable a seamless transition of knowledge with the in-house team of developers.

Client Info
Entain is one of the world’s largest sports betting and gaming entertainment groups.
Industry
Commercial gaming
Company type
Enterprise
Region
Australia, Asia & Oceania
Tech Info
Performance optimization project with the best practices, approaches & tech solutions
Technologies
React Native | Native
Platforms
iOS | Android
Stack
Redux | Tanstack | Reassure | GraphQL

Performance Boost

87.5%

In 87.5% of the screens, the number of rerenders decreased or remained the same, which affected the acceleration of the initial performance.

React Universe

In brief

Mining cryptocurrencies has been gaining popularity for quite some time, while at the same time being difficult to set up and manage. Here’s where Coinmine One steps in - an XBOX-sized plug-n-play miner for everyone. One of the features that make Coinmine One so easy to operate is its companion Mobile App, where all the setup and management is done. Therefore, it is crucial to provide users with a great and smooth onboarding experience. Similarly to other IoT devices, Coinmine One is an Internet-connected device, which means the user has to configure it and setup an Internet connection. Hence, the onboarding performed from the companion Mobile App has to provide the user with a straightforward, smooth and robust flow.

Providing the user a seamless and robust experience

When configuring Coinmine One Internet-connected device, for the user onboarding experience to be smooth and seamless, we needed to meet the following criteria:

  • the user should never have to leave the app
  • the onboarding should behave similarly on both platforms - iOS and Android
  • technologies we use for the solution must be available on all users’ mobile devices
  • the solution must be robust and should have a low error rate

Given that the device was already in the pre-production stage, there was no option to change the underlying mechanism to configure it. We had to use WiFi and a hotspot provided by the device.

Coinmine app screens

A deep dive into the Native side

We knew from the beginning that there would be native code needed for this functionality. Unfortunately, there wasn’t any community-made solution that would work on both iOS and Android with similar capabilities. From our research, we have concluded that we would need to sacrifice some of the features of the Android platform, to make the experience similar to iOS. When it comes to iOS, the API for interacting with hotspots is very limited:

app functionality


A minimal API with platform tweaks

Coinmine app screen

Having considered all the functionalities and limitations of each platform, we have settled on writing a Native module in Objective C for iOS and Kotlin for Android. The solution would provide only the API that is supported on both platforms with platform-specific tweaks and assertions in JavaScript to account for behavior differences on each platform.

The onboarding flow could be split into the following steps:

  1. Connect to the Wi-Fi network provided by the hotspot from the Coinmine One device
  2. Make GET and PUT request to the Coinmine One device to connect it to the target Wi-Fi network
  3. Remove previously connected Wi-Fi network hosted by Coinmine One’s hotspot

Coinmine app screen

The first order of business is to connect the Mobile App to the hotspot. The first thought would be to check if the hotspot is on. In other words, to check whether the Wi-Fi network from Coinmine One is available. This could be done on Android, however, iOS doesn’t provide any API to do so. Instead, from the native module (Objective-C/Kotlin), the Mobile App tries to connect to the Coinmine One’s Wi-Fi network by adding a new network configuration and then after some delay, it checks if the mobile device is connected to the aforementioned Wi-Fi network, by comparing SSIDs of the connected Wi-Fi network and the hotspot network, the Mobile App should have connected to.

There’s also an edge case the Mobile App has to handle. It is a situation when the Mobile Device is already connected to Coinmine One’s hotspot, so again a simple SSID check is needed.

Coinmine app screen

We could finish the first step here, but in order to make it even more robust, the Mobile App does a ping GET request to Coinmine One, to check if the request can reach the device. This check is more important than it seems. We found that on Android Pie, when mobile data is on and the Mobile Device is connected to Coinmine One’s hotspot, Android system routes all requests through the cellular network, since it has a connection to the Internet, whereas the Coinmine One’s hotspot does not.

To overcome this problem, on Android the Mobile App creates HttpURLConnection from Coinmine One’s hotspot, to ensure the requests will always go through the correct network interface.

Coinmine app screen

Now, the Mobile App established valid means of requests transport to the Coinmine One device, it does GET requests to fetch all Wi-Fi networks seen by the Coinmine One device and asks the user to select one, provide credentials and sends this information to the device with PUT request. On Android, all of those requests are routed through HttpURLConnection bound to Coinmine One’s hotspot network.

The last order of business now is to remove Coinmine One’s hotspot network from the list of remembered Wi-Fi networks. The effect of this step is also checked by comparing SSIDs of the currently connected Wi-Fi network if there is any.

Thanks to those extensive checks and edge case handling we ensure Coinmine One’s configuration and onboarding is smooth and robust.

A stable solution with an excellent user experience

The result of our work was achieving a stable solution with a low error rate that allowed to provide a flawless user experience. Moreover, it provided the ability to set up the WiFi network or the physical device without leaving the app and manually connect to the device’s hotspot. It resulted in making the whole user onboarding quick and effortless.

Coinmine app screen


The challenges we’ve solved so far

Related services

Service

Optimization of Products and Processes

Callstack illustration

get in touch

Fill in the form and tell us a little bit about your enquiry. We’ll get back to you promptly to discuss your requirements.

Get in touch
This information will be used only to contact you. For details, check our Privacy Policy.