Join Online

A One Man Ux Team and "Another" Gym/Club Application
Story Context
  • I currently work at Jonas as a Ux designer
  • Jonas Fitness makes software for Gyms / Clubs
  • This software runs the entire club facility, from Check-In's to Contract Sales
1. The Problem

I had to figure out a real doozy on this one. As part of both the i4 and Compete product suite we needed to create a site that was fully customizable by our clients so that their customers would have a seamless transition from their own websites. I know right, it sounds like some time warp Star Trek scenario. Well, phasers on stun, here we go!

Raise Shields... To put it in simpler terms, this website was a B > B > C audience. Our customers are gyms, but this website would be used by the gyms customers. We had to deliver a site where those customers could sign up Online for one of the plans running in our system. The site had to look as close as possible to the gyms website in terms of branding.

Load Torpedoes... Because the site would be configurable, we would also have to create a web based Administration site for our clients to go in and define the look and feel. Lets figure this one out shall we?

2. The Research
Balsamiq Mock up

This time its LESS to the rescue... In order to allow our customers to configure the site so that it resembles their website and branding, we used LESS. In case you don't know what LESS is, I will explain. LESS is a new platform for designing and developing CSS. It actually makes CSS more like a programming language. You create your CSS in modules and you can define variables. You can then pre-compile it or use Jquery to compile it real time on the server. We opted for the latter option.

But before I go to warp speed... There was very little competitive research out there on this project. None of our competitors had a product like this. Instead, I looked at actual gym and club software to get an idea of how it needed to function. I performed my competitive research in this manner.

Sprinkle in some Dilithium... err Balsamiq... I began mocking up designs in Balsamiq based on my competitive research. I then held some quick user testing demos of the Balsamiq with some of our Beta clients to help perfect the design. Unfortunately, I was unable to secure user testers of the real audience for this project during this phase. It would have to wait for iteration after launch.

3. The Design
join online

(customer facing)

join online


Make it so... The design consisted of both the clients customer facing website (which displayed available plans and allowed them to sign up and pay for it) and the administration site where our clients could make the appear as if it were their own. Just some of the configurable options include:

  • Header Background Color
  • Logo Upload
  • Body Background Color
  • Box Header Color and Font Color
  • Button Colors and Font Colors
  • And much more

4. Iteration

Personas', User Stories, Flow Charts, Eventually... Iteration 1 was performed after user testing and Iteration 2on this project is taking place now. I will update when it has been completed..

5. Lessons Learned

Don t try to slingshot around the sun unless... You know the calculations. Truth be told, this was one of my first projects at Jonas and there are many things I would have done differently looking back. I know the business and users so much better now. I did not have a solid Ux process in place when this project was started and completed. I am in the process of redesigning it and running it through the Ux process I use now.