FitLegit

FitLegit is a new breed of fitness app that takes the guess work out of dieting and gets you to your goals. When FitLegit approached me with the project, they had a fully developed, functioning prototype with about 350 users. However, it was in desperate need of a design overhaul and subsequently a front-end development overhaul.

The web-based app also needed to be completely responsive to accommodate users on the go. Perhaps most importantly, FitLegit needed an accompanying marketing website to drive signups and acquisition by showing the value of the app to new users. The ultimate goal was to gain 10,000 new users without spending any money on marketing.

Our first task was to take an inventory of all the screens in the application and document their primary purpose. In the end, there were about 45 different screens of screen variations that needed to be accounted for. From there, we reorganized all the pages into a more simple and intuitive user flow.

After solidifying a new, more user-friendly page flow and app architecture, it was time to rework the layout for each individual screen. We started with the iPhone 5s because the small screen dimensions provided the limitation we needed to break each screen down to it’s core functions and present the data in the most simple way possible. Many of the original screens had to be broken out into 2 or 3 screens, which resulted in more clicks and taps, but a far more intuitive and navigable experience for the user.

In order to make FitLegit marketable to new users, it was imperative that the company get an identity treatment that was totally “legit”, from the logo to the domain name (fitlegitapp.com). So, we got to work breathing life into the FitLegit identity. Vibrant orange and blue were chosen as the main brand colors to give users a sense of energy and enthusiasm as they use the dieting and exercise app. The client wanted everything on the website and apparel to be branded as “Legit” and therefore the logo needed to be recognizable, strong, timeless, modern, fun, approachable, and trustworthy.

The key to designing a fitness app is to remember that no one actually wants to diet or exercise. What they want is to lose, gain, or maintain weight. The app is simply a means to an end. After the initial signup flow, the user is presented with a simple dashboard that divides the app into two clear sections: “Diet Progress” and “Plan Your Day”.

We knew that there would be basic users only logging enough information to get quick results and extreme users who would log every and monitor every calorie. The app needed to be equally simple and accessible to both types of people.

In order to engage/retain users and differentiate FitLegit from similar exercise apps, we made sure these 5 key tasks could be completed quickly and easily right from the dashboard:

• Logging weight and/or calories
• Viewing current diet progress
• Switching between dates
• Finding a food or meal to log
• Creating a new food or meal

To help users understand and interpret their exact diet progress, we created a set of designs and animations that would inform the user when off target and encouraging them when on target. When on target, there is a big blue circle that does a satisfying “bubble up” effect on the page. When under target, an orange ring gently animates inwardly, indicating that the user is under their target goal. When over target, the ring animates outwardly, indicating that the user is over their target goal.

Inside each circle, the app tells you exactly what to do in order to get back on target: “Remove X calories per day from your diet to hit your goal.” A bright orange button below the circle tells them exactly how to adjust their diet or exercise to hit their goal.

When designing such a large application, it was important to establish visual systems that would allow the user to learn the application quickly and with minimal effort. To start, we designed 3-5 screens that contained the most common buttons, form elements, graphs, and tabs found in the app.  Then, we created simple visual styles that could be reused across every screen with little exception.

The result was a small set of buttons, form elements, graphs, and tabs that we could reuse to design all the remaining screens and that FitLegit could use to scale the application for years to come.

The key to selling an amazing product is in the marketing. By creating a simple marketing website that captivated and educated the user, the app has been able to sustain itself since launch. Conversion rates consistently hover around 50% and the app sees 10-15 new user signups per day. 10% of all signups result in daily active users.

After about 10 weeks of dedicated work on the app, we were able to write effective copy for the entire website and design 6 pages that showcased why FitLegit was worth using.

Just 6 weeks after launch, the mobile web-based app had over 6,000 new users and not a dime was spent on marketing or advertising.

With a solid user base, excellent traction, and proof that there was a need for this app, the FitLegit team was able to pursue more focused marketing efforts and additional investment.

Once the visual design was finished, we coded the responsive HTML and CSS for the entire application. Bringing our designs to life through code is something we enjoy quite a bit. By both designing and coding the website, we were able to quickly make modifications along the way to further refine and enhance the experience (something that would have been very difficult for a 3rd party developer to do).

From there, we worked closely with our client who hooked my code up to their back-end database code. Together, we were able to take this web application from Photoshop to a full-blown, working app in just a few short weeks.

FitLegit saved time, money, and a lot of headaches by hiring a single company to handle both the design and code of the website instead of outsourcing the work to multiple freelancers.