TDEE Calculator
Project Requirements
I built this calculator for a client that runs a health coaching website. My client had always been referring his customers to other websites with TDEE Calculators that were either too complex, not mobile-friendly, innacurate, or riddled with ads. He came to me with a vision for a Health Evolved branded calculator that asks the right questions, is easy to use, and doesn’t force the user to sign up for a newsletter to get a result.
My Plan
First, I gathered the resources I needed to perform the complex calculation and did some research on the other TDEE calculators that my client liked and disliked (and why!).
I decided to create a web application that would run quickly and exist on one webpage. This way users could easily go back and forth if they decided to change their choices or lifestyle inputs. User experience and intuitive design were of utmost priority.
I chose to work with Vue.js for its lightweight codebase and ease of integration into a WordPress webpage.
The Result
An intuitive, user-friendly, mobile-first approach to the TDEE calculator. With colours and design to match the brand’s look and feel, and a connection to the company newsletter for users wanting to learn more about their result. See below for screenshots of each step, or try it yourself here: healthevolved.co/tdee-calculator
The Feedback
Just 4 months after launch, the calculator generated an enormous amount of leads, increasing the total number of newsletter subscribers by 40%! (launched Feb 2023).
Gallery
Step 1
Step 2 – Metric
No content is lost in the switch between Metric/Imperial. This way a user can enter their height and weight in whatever unit they choose.
Step 2 – Imperial
The user can click ‘Back’ if they change what type of calorie/protein target they want. No page reload necessary.
Step 3 – Subscribe Form Connected to CRM Software
The calorie and protein targets are automatically displayed at the top – no need to sign up for the newsletter.