Lovelô

AWSPHPPostgresHTML5CSS3JavascriptjQueryAngularJSiOS (Swift)StartupCo-Founder

Overview

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.

You can visit the website and download the app on the Apple Store.

  • Image of the Lovelô iOS app

The problem

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 challenge

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.

Sketching the concept

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.

  • A set of images of the skecthes of the app

High fidelity prototype

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.

  • Image of a high fidelity prototype of the app showing the exercise options
  • Image of a high fidelity prototype of the app showing the program list and the details of the program
  • Image of a high fidelity prototype of the app showing the exercise and timer

All tests were successfully done and we got a nice feedback from our testers. Time to start implementing it!

Summary

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).

Doing an online exercise

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.

  • Image of the online exercise flow of the app
  • Image of the online exercise flow of the app
  • Image of the online exercise flow of the app
  • Image of the online exercise flow of the app

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:

  • A class to deal with video player. This is a singleton class that will listen to every player-related stuff. For instance: you won't initiate a video player for each video, you only initiate it once! After you initiate it (lazy, pls), you change its source to any video you want. Then you ask: how would I know if another video is not playing? Use our dear friend Notification Center! With that approach, you can make it stop the previous video before starting the new one (could even add some UI iterations, such as minimizing the previous video before starting the new one). 
  • A class to deal with video cache. This class is responsible to deal with cache. You can think about it as a static method that you could call "VideoCacheHandler.isVideoFromUrlCached(...)". If it is, you can populate your xib with a player button. If it's not, you can let this class deal with downloading/caching and populating the UI (with some fancy progress bar :D) methods. Also, you could handle the download with another class to decouple it (do it, really).
  • A xib class. Of course, we needed the UIView class to deal with the video interations and changes. You could ask again: how do I do this for many sizes using the same xib? My approach (which I particularly like a lot) is to use an enum to define types of sizes for these kind of views. For example: I can define an enum called VideoThumbSize and whenever I update this view's UI, I call a method to change the interface according to the current setted value (for example: change my progress bar's width from 5 to 10 when using larger dimensions).

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 :)

Booking a class

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.

  • Image of the booking class flow of the app
  • Image of the booking class flow of the app
  • Image of the booking class flow of the app

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!

Feed and leaderboard

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.

  • Image of the feed and leaderboard of the app
  • Image of the feed and leaderboard of the app
  • Image of the feed and leaderboard of the app
  • Image of the feed and leaderboard of the app

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!

Making a subscription

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!

  • Image of the payment flow of the app
  • Image of the payment flow of the app
  • Image of the payment flow of the app
  • Image of the payment flow of the app
  • Image of the payment flow of the app

Gadgets

At last, we decided to test some of our already-developed features using Apple's Watch.

  • Three screens of Apple Watch's features
  • A mockup of Apple Watch's main view

Credits

Product Development - Bruno Ramos

Product Design - George Leonardo