Not practicing fitness activities for lack of time is not an excuse anymore. Lovelô's app is a kind of itinerant fitness club, providing the user two options: paying a monthly fee of R$98,90 (25 USD) and having access to more than 8.000 activities in studios, gyms and outdoors or exercising for free with an app.
Lovelô has two main goals: to make it easier to sedentary people to take the first step into exercising, and to bring more people to gyms and studios, allowing them to fill available and unused places in their classes.
I joined this project as a co-founder and cto/full-stack, dealing with all of its technology: developing web and mobile platforms, server management, aws services, etc. It was a great experience! I had the opportunity to work among very qualified professionals and learn a lot with them, specially a lot more about entrepreneurship (even though I had my digital agency before). This startup enviroment is the best: it makes you push yourself above your limit to face not only the usual company and development challenges, but exceptional ones, having to deal with them asap in an effective way.
In this case, I’ll talk about the process to create Lovelô’s first iOS app.
We first built an webapp where people could book their classes on studios and gyms, and it lasted quite some time! The problem is that as the number of partners grew, the performance started to become an issue for we had a lot of map interation. Also, while testing this webapp, we discovered many ways to improve the user experience and its UI. A lot could be done!
Then the golden question came: improve this webapp's UI/UX/performance or make a native app for once? After a deep thought about it, we decided to focus our efforts on the development of an iOS app. Also, since an app provides much more performance power, we decided to include online video classes as well!
The first challenge in this project was the short deadline. Being the only developer in this startup, developing an app would take away my attention from other possible issues and implementations (back-office, changes on the landing, etc). Our designer had to make a very lean approach to make his way through the short time with UI/UX so I could start asap to test it.
The first step was to gather every information and research we already had and start to put the ideas on paper. This was our designer's job, which I followed closely to discuss possible development issues.
The first step was to make some wireframes based on the users' feedback and our previous experience with the webapp. Our designer did an awesome job on that!
To make it faster to developer, I helped him telling what would be faster to develop in his approach. Also, we decided to make a high fidelity prototype: should it be a success, it would be a lot faster to implement.
All tests were successfully done and we got a nice feedback from our testers. Time to start implementing it!
The first steps were the usual: preparing repository, buying a developer's account for Lovelô and setting it up, etc. etc. Also, we had to decide which technology to use, which smartphones we would reach.
At last, we decided to reach users with iOS 8+ and make a "responsive" layout (using autolayouts) so users could also use our app in their iPads with a nice experience. And, of course, I used the beauty Swift to implement it :) (sry, object-c, but nope, just nope).
The first step is to choose between a program, an exercise or booking a class on a partner. In the program's list, you can select the best one based on the type of exercise, experience points, calories or time.
In the program's view, you can select between three levels of intensity: light, default or heavy. You can also find the exercise list and warm up tips.
The goal is to exercise in shortest time possible. The video starts automatically so you can focus in making the best time. Should you have any difficulties, you can learn more about the exercise in the view button.
After completing the program, you can leave a note to your feed, attach a photo and share it on your social network.
A tip for my fellow developers: video player consumes A LOT of memory! To get the best out of this kind of approach/app, I first created a xib file for the video thumb so I could use it as a UIView component everywhere. It contained everything needed to load the player, download the video, check if the video was cached or not, etc. I won't give all details here, but a way to decouple everything:
Bear in mind that there are many approaches and this is just one of them! Hope this one helps you if you are needing it :)
The user can search for any class using the map, filtering by date, time, name or modality of the class. The classes are clustered by distance and location. In the page of the class, the user can find a lot of useful information, such as available stops, who's going, description, reviews, and facilities.
After booking a class, the user can share it in his social networks and invite his friends to join him.
For the pin clustering, I used this library: https://github.com/itsbonczek/kingpin. It's a really nice framework and allows you to customize your annotations with its delegate methods. I really recommend it!
The feed shows several activities: when you booked a class, went to a class and exercised, among others, trying to keep the community engaged. All user's actions are shown in the feed, and you can like or comment on any of them.
Every activity counts and you earn experience points for them. The points and the list of the most active users are shown on the leaderboard, encouraging the competition.
It's also very easy to find friends from your Facebook or Contact's list. You can also invite your friends using the app, allowing them to get a discount when they subscribe.
To develop this feed there were two options: implement the feed using our own database and study the best case for this project to properly fan-out OR use some SaaS to do so. Considering we wanted to test it before actually doing a more complex feed, I used this service: https://getstream.io/. It has a nice free plan to test and allows many feed/notification features, such as grouping. Its api is very clean and easy to use, and if you decide not to use it later, you can export everything. I really recommend it!
The payment flow is very easy and intuitive. You can simply scan your credit card or type it in an extremely visual flow. The conversion rate of this method is amazing!
At last, we decided to test some of our already-developed features using Apple's Watch.
Product Development - Bruno Ramos
Product Design - George Leonardo