Creating a TDEE Mobile Application

UI/UX Design Case Study — 2017

This was a side project I created in 2017, a simple fitness mobile application to calculate your ‘Total Daily Energy Expenditure’ by entering details in regards to height/weight and your daily activity and overall goal. This is obviously not one sum to live by but can be used as a guideline for those who are unsure about their daily intake and can provide a good starting point on where to achieve their goal.

Research

I started by researching the field, I had some knowledge of fitness and TDEE but wanted to make sure that if I was going to create a product based on it that I would know all the aspects, corner to corner.

Understanding TDEE

I wanted to learn about TDEE itself, I know that this is not a one calculation that fits all and is to be only used as an estimate. But this can be a good starting point for those who are unsure.

The idea of TDEE is that you calculate an estimated value of your daily suggested calories you need to achieve your goal. Whether that’s to stay the same, gain weight or lose weight which is done by multiplying your basal metabolic rate, activity level and target.

TDEE, total daily energy expenditure, is the amount of energy in calories you burn per day. TDEE is best calculated by factoring in your BMR, or basal metabolic rate, and your activity level. BMR is the amount of calories you would burn per day at rest.

User Goals

Now I had learnt about the process of TDEE, the next thing was to understand what a user would need in an app based on this.

I started to note down different goals that I thought the user would need to have for this application and an ordered content layout it would need.

Wireframes

I dived into pen and paper wireframing and created some simple wireframes for the app to start processing the design layouts and content the app would have that I had pinging around in my head. I used the information I had gathered to try and come up with logical solutions to presenting the information in a way the user would find easy and pleasing on the eye.

Final Designs

Once I had the design I wanted to create in my head I created these final designs based upon that.

Landing Screens

The landing screen for the app was almost that mimicking a form the user can easily input to select the most accurate representation of them in order to give an estimate TDEE. Once the user has finished inputing this data and selects the ‘calculate’ button, this shows the results of the calculation.

Help Module

If the user is stuck on the application and wants some help, once they click the help or ‘?’ icon, this will provide them a 4 step guide on how to use the app.

Additional Screens

Additional screens of the application shows the reset and error pop-up screens

It’s hard to remember exactly what the process was for this application because it was created 2 years ago but I managed to find some old photos I’d taken at the time which jogged my memory somewhat. This design got left in one of my archived design folders, but with the launch of my new portfolio I thought I’d resurrect it from the graveyard and do a simple write up.

This was a very short case study but regardless, thanks for reading!

Feel free to follow my thoughts on Twitter, See my design posts on Dribbble or Email me for queries on work

Digital Product Designer. — dribbble.com/grahambushellhttp://bushell.co