Jill White Fitness

Health and fitness subscription service

View live
A screenshot of jwf-homepage.jpg

Design & Full-stack Developer

I planned, designed, and developed the entire application, collaborating closely with the talented and disarmingly attractive client.

  • UI Design
  • Full-stack
  • Laravel
  • Vue
  • Livewire
  • AlpineJS
  • Stripe

About the project

Jill White Fitness is a personal training business started by my wife in 2019. I worked with her to build a platform for a subscription exercise program. I designed the application and website, leaning heavily into Tailwind UI. The back-end is built in Laravel and integrates with Stripe to handle subscription payments. Having served thousands of users, the app is still going strong five years in.

A screenshot of the jillwhitefitness.com app
A screenshot of the jillwhitefitness.com website
A screenshot of the jillwhitefitness.com app

Tone at Home

Jill had sold a handful of one-off programs, but in the midst of the COVID-19 pandemic, she had the idea to launch a subscription exercise program with weekly exercises designed to be done at home with minimal equipment. I was really pushing to call it Get Jacked with Jill, but she ended up going with Tone at Home. In retrospect, probably a good call.

With my experience building web apps and Jill’s expertise in personal training, we got to work. I had recently purchased a Tailwind UI license, so I used several components as a starting point for the design. Since everything needed to be optimized for mobile devices, I took great care to provide a great experience on any screen size.

Along with the subscriber experience, we needed an admin panel to manage everything. I started building one using Laravel Nova, but eventually came up with a simple admin design system and custom built it.

Javascript? Never heard of it.

Laravel Livewire had recently launched, so I jumped at the opportunity to see what all the fuss was about. Turns out, it was great (and still is!).

Using Livewire, I was able to build out a broad, dynamic application that felt snappy like an SPA, but without the front-end bloat. I used Livewire (and AlpineJS) to build real-time messaging, credit card payment forms with Stripe, and a complex, multi-layered workout builder for Jill to write each week’s programming.

Speaking of Stripe, I used Laravel Cashier to setup in-app subscription signup and management. We supports multiple plan tiers and frequencies, coupon codes, and trials. Other than the occasional support request, subscriptions are hands-off and completely in each users’ control.

Multi-year iterations

A screenshot of the jillwhitefitness.com app

When the app launched, it was only for purchasing and viewing one-off seasonal “challenges” that Jill would release every few months. We added the Tone at Home subscription in 2020, and continued to improve it. I built in weekly check-ins with automatic email reminders and progress tracking, community workout ratings, robust search for the massive back catalog of workouts, and a Tone at Home Plus tier that included additional workouts and other features.

When T@H launched, Jill would write the workouts in a spreadsheet that I would manually convert and import each week. I eventually built an in-app workout builder to streamline that process and allow Jill to write the workouts directly in the admin panel.