MOVE Shanghai

MOVE Shanghai allows you to have access to all the premium fitness venues in the area just from one single place. With its help, you can book different activities like swimming, yoga, dance classes, and much more. Available on iOS, Android, and web, MOVE Shanghai is designed to provide the same experience no matter which ecosystem you prefer. In this article, we’re going to share with you the challenges that we’ve faced during the implementation process and how we’ve solved them.

Challenge

The work on the MOVE Shanghai project comprised a whole bunch of various challenges. Initially, the task was to clone the existing MOVE GB application which was written in Perl. However, a more in-depth look at the code showed that dealing with a different language was to be the least of our concerns. It turned out the app didn’t comply with our stack of technologies at all. Not surprisingly, the idea to improve or anyhow refine the existing app was decided to be considered a basket case. That said, we came to the point that making an app completely from scratch would be the best option. Hardly had we started the mobile application development when another unpleasant discovery popped up. For those of you who don’t know, in China, there is a thing called The Great Firewall which blocks whatever it may consider harmful or malicious. This has lead to many of the services we are used to having absolutely no issues within most regions being inaccessible. What is more, the Internet connection can get really slow especially if you’re outside the territory of the country. Needless to say, both the notification (Twilio) and the payment processing services (Stripe/Braintree) that comprised the core features of the MOVE Shanghai app were either almost unavailable or didn’t work at all. So, we had to find their alternatives. As the application was being developed, we received new requirements from the client. One of the biggest changes to be introduced was the app integration with third-party services, e.g. mindbodyonline.com. The challenge was imposed by the fact that the vast majority of the services were implemented in a rather sophisticated way. In other words, they were simply not designed for such kinds of manipulations.

Solution

The first thing we did was borrowed some logic from the existing application written in Perl. Part of it was used while integrating MoveShanghai with the third-party services, e.g. mindbody.com. To save time for solving bigger challenges, we decided to take the database structure as well and, thus, were able to get out the most of the existing application.

Having finished with the dismantling part, we started building the applications. One of the requirements was that both Android (app for clients) and iOS versions had to be released almost simultaneously. After the right approach was found and the management issues settled, our team was able to deliver the apps within the deadline. Thanks to the unified API we developed, they work the same no matter what mobile device you are going to use.

Plus, MOVE Shanghai is integrated with AliPay and WeChat, offering a full Chinese in-app experience. If you’re unfamiliar with these services, you can read our ultimate guide to building a web/mobile app for China.

In a nutshell, AliPay is one of the two most popular payment systems that are used by the Chinese. How popular? Take any Chinese mobile application – there will be a support of payments with AliPay. As for WeChat, it’s the country’s most popular messaging app with an audience of nearly 1 billion people. Whether it’s ordering pizza or paying bills, WeChat allows you to perform almost any kind of online activity. Besides, WeChat comes with an in-built payment system called “WeChat Pay”. Earlier, when I mentioned the two most popular payment systems, I meant AliPay and WeChat Pay.

Speaking of The Great Firewall – it was quite of a problem to deal with. As a replacement for Stripe, we picked Paymentwall which turned out to be a bit tricky to look into and work with but still integrable. Since Twilio functioned quite unreliably in China, we had to find another service to implement the notification feature. The best suitable option for this purpose was a Chinese service called YunPian. With the help of some extra logic, the app is now able to send SMS to Chinese phone numbers through YunPian, while the numbers from the outside are notified through Twilio. With that said, let’s have a quick look at the flow of the mobile version of MOVE Shanghai. Both the sign-in and the sign-up procedures are quite simple. To save users time and effort, we’ve implemented confirmation through SMS.

After that, MOVE greets you with a screen, where you can search for desired activities. The application also comes with a very convenient and powerful search. With its help, you can search for activities by time, date, relevance, and type.

When you’ve found the activity that fits your preferences and schedule, you can book it straight away. Here is how the booking flow looks like:

Since the application is primarily aimed at the Chinese audience, one of the client’s requirements was to implement the integration with WeChat. For those of you who aren’t familiar with this service, it’s an insanely popular mobile app for communication with almost 1 billion users (most of which are from China). Over the last couple of years, WeChat has grown from a simple chatting app into an entire ecosystem with tons of features, including the ability to pay for things right from the app.

MOVE Shanghai is also perfectly adapted for display in mobile browsers (and works just as fast as the native app).

Oh, and did we mention that we implemented a nice-looking chat so that users can go swimming/boxing/etc. with their friends?

Technologies that we’ve used:

• Ruby on Rails-based API;
• React.js web client;
• Native iOS (Swift) and Android.

The Result

Inspired by the successful MOVE Shanghai counterparts, we built a great fitness application with all the specifics of the Chinese market in mind. The work on the project proved to be an invaluable experience allowing us to learn about and master new tools. With our stack of technologies and skills improved, we are now able to flawlessly develop web and mobile solutions for the Asian market. Hope you’ve liked our case study. If so, please support it with claps :)