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.

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

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.