Beatthegym.com

Kickstart your new fit lifestyle today!

www.lexstep.com

CLIENT

  • Andres Azcarate

GENRE

  • Fitness
  • Health

ARTIFACTS

  • Complete Product Design
  • Development
  • Launch of the Product

TECHNOLOGIES

  • Parse.Js
  • Angular.Js
  • Bootstrap

Small opportunities are often the beginning of great enterprises.

It was probably the end of the year 2015 when we met a desperate Andres Azcarate; the mind behind Beat the Gym, who not only had a brilliant idea for his business, but also had it implemented, live and in-action. Yet, the results of all his endeavor weren’t as fruitful as he would have imagined. It took him quite a while and a lot of brainstorming plus interacting with his customers and getting feedback from random people, to actually identify the root cause of his disappointment, yes you got it right; “BAD USER INTERFACE”.

Beat the Gym - the website; was fully implemented but had so many crucial designing errors. Almost every feature was available but nothing made sense, the colors used on the website were too bold and highly contrasting, the less important things were presented boldly and the essentials were hidden under layers and layers of “so-called design” and the private flows of the website were all haphazard. All in all it was a user’s worst nightmare.

When creating content, be empathetic above all else.
Try to live the lives of your audience.
– Rand Fishkin

Mr. Fishkin said it right. This is exactly what we had in mind while redesigning Beat the Gym (BTG); empathy for the user.

First things first

The first step for that was to identify and understand our target audience, once we were able to identify our potential users, we set ourselves to gaining insight in their behaviors and patterns of interaction.

User Acceptance Testing (UAT), is typically the final phase in a software development process in which the software is given to the intended audience to be tested for functionality. In this case it was kind of the last phase too (as the product was developed already), but not for us. For us it was only the beginning. We designed an experiment to do some User Acceptance Testing and got different groups of people to use Beat the Gym, collected their views, analyzed the results, looked for patterns in the output and identified the problem areas.

Step Two

The second step was the most important step in the whole process, yes! Designing. Once the results from the step one were processed, we structured a creative team for Beat the Gym and they set right to work. Each and every feature of the product-to-be was carefully considered and deliberated upon and then designed. The team was mindful of all the best UI/UX norms and patterns and made sure that their knowledge was inculcated into the design, without over doing things. The client’s feedback was made a part of the process as early as in the design phase. After going through rounds of discussion and revision a set of mockups was erected and put forth to start development on.

www.lexstep.com

Constraints and challenges

The biggest challenge with this project was to update the previous faulty and unstructured back-end and DB without replacing it. It seemed like a nuisance at first. The client don’t wanted us to make everything from scratch and so we took it on us to reorganize, reassemble and restructure everything to make the most use of it. Beat the Gym had all it’s backend done in Parse.Js so we used the same technology and though it certainly made a lot of things easier for us, we faced a few glitches that robbed us off some of our precious weekends as well. Using parse to allows users to signup through Gmail proved particularly difficult but with determination we were able to solve that issue as well. Stripe integration and ensuring secure transactions was the next big goal. Restricting time conversion according to each user’s respective time zone, was seemingly one of the most unintelligent yet essential tasks we did :D.

www.lexstep.com

Eye candies

So we made sure that everything that “worked” on Beat the Gym worked in a manner that shouted esthetics. Again. We refrained from over doing anything there. There were tiny animations like fading in and out pop ups while switching between signup and login popups, genie effect while booking a class, so that while the class fades out of the suggested classes the user knows that it has moved to his cart. Alerts and success messages that would dissolve into thin air after being there for only time enough that a user could read them, tooltips and help texts wherever needed; were some of the few things that Azcarate and his customers loved about BTG.

We’re glad that Azcarate was able to find us and that together we were able to rid BTG of it’s old and unfriendly user interface that had hindered Azcarate’s business to grow. It was a challenging yet enjoyable experience for us and we loved working for Andres.

Like us already?

Let's Chat