Improving a User Onboarding Experience for Coinmine

CLIENT INFO

Industry

Company type

Region

tech INFO

Technologies

Platforms

Tech Stack

Let's connect

Before 14.5s

After 2.5s

35k

lines of code

months of work

800

code commits

88%

decreased shimmer render time

50%

quicker load times for chats on subsequent visits

50%

faster rendering time for chats

18%

less frame junk when scrolling

before

The refresh time was 5-11 seconds

after

The refresh time was reduced to ~2 s

Instant Preview

Developers can instantly preview code changes on real devices without a complex setup.

Let's connect

CHALLENGE

define

Identified confirmed/reported issues such as re-renders and created a backlog for potential improvements.

measure

Used Macro tool measurements.

ANALYZE

Selected the most promising performance changes.

IMPROVE

Implemented changes following React Native best practices.

CONTROL

Re-measured with the Marco tool and compared to the 4.58.0 native version.

Deployment

Developed the release process for both Android and iOS.

API DESIGN

Proposed an API based on the Rive Android library features.

INTEGRATION

Implemented Rive SDK integration for Android and created an example app for testing.

iOS SUPPORT

Extended the integration to iOS after successful Android testing.

AUTOMATION

Created a Github Action workflow for automated library releases.

PUBLIC RELEASE

Made the library publicly available on platforms like CocoaPods and Maven.

DEPENDENCIES

Managing dependencies, including Expo and react-native packages for each new release.

RELEASES

Automating the release process with custom GitHub Actions.

TRAINING

Providing React Native training through pair programming, code reviews, and workshops.

CODE REFACTORING

Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.

MIGRATION

Migrated the codebase to TypeScript.

DEPENDENCIES

Upgraded major dependencies such as Expo, React Navigation, and React Query.

PAYMENTS

Created two options: In-app purchase with Google Play or App Store and credit card payment.

linking

Sorted out links, integrated content, and implemented html rendering.

We provided full front-end support, project configuration, feature parity, and expert advice on technical and user experience. We also implemented a new design guideline, including dark mode with auto theme detection.

RN PAPER

Forked the React Native Paper library.

Established continuous integration for automated code updates.

testing

Set up a Storybook for component testing.

design

Developed the basis of the design – color, layout, and typography.

Once we had the basics down, we started working on the UI library components. The components we developed included: AppBar, TextField. Button, Icon Button, Toast, which included animation and swipe-to-dismiss, Match Status, Search, and many more!

Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.

16.8s

App start time, before 48.5s

8.6s

Report screen load time, before 15.9s

2.5s

Sending a message, before 14.5s

60FPS

Average FPS on LHN

2.6s

Search screen load time, before 11.8s

Together

we acted as staff augmentation within Advantys’ team.

Engaged

in collaborative problem-solving and solution exploration.

supervised

by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.

migrating

from a custom server-side rendering (SSR) solution to Next.js

Focusing

on Core Web Vitals metrics

Optimizing

a large shared JS bundle

Introducing

Fast Refresh for accelerated development iterations

The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices. To find out more about the whole AutoZone project, head over to the case study on main case study title.

strong

architecture with professional maintenance and continuous updates

high

code coverage with quality-compliant unit and integration tests

Comprehensive

testing, including end-to-end.

Faster

time-to-market with mobile process automation.

New PoC

features like biometrics and mobile health kit integration.

Last but not least, our collaboration significantly enhanced the knowledge of Thriva's development team regarding React and React Native.

Students new to programming and React Native
Web developers unfamiliar with device APIs and native apps
Native developers exploring web app frameworks and React Native's UX potential
React Native developers prototyping and sharing ideas
Library maintainers creating examples and documentation
Users providing reproducible cases for bug reports
Speakers and workshop presenters conducting live coding sessions

“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.”

Farbood Nivi - CEO & Co-Founder

Your Success Story is Next

Let's connect

CALLSTACK APPROACH

Case studies

“Callstack played an essential role in helping us release our mobile app to the market. They helped us set up and optimise our mobile ecosystem.”

Donovan Isherwood - Engineering Manager

Thriva

get in touch

Trusted by

“The team at Callstack are the most experienced and trusted engineers in the React Native community and ecosystem.”

Nader Dabit

DevRel + XD at EigenLayer / EigenDA

at Amazon Web Services

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

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

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.

Table of contents:

Heading 2

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.

‍

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:

‍

A minimal API with platform tweaks

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:

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

‍

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.

‍

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.

‍

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.

‍