BMI Calculator

Case Study


The BMI Calculator is a mobile application designed to provide users with a simple and intuitive way to calculate their Body Mass Index (BMI). The goal of this project was to create a user-friendly interface that allows users to quickly determine their BMI and understand its implications on their health.

Project Background:

The project was initiated to address the need for a convenient and accessible tool that helps individuals assess their body weight relative to their age and height. The primary objective was to design and develop a BMI Calculator that offers a seamless user experience and promotes health awareness.

User Research:

To ensure the success of the BMI Calculator, extensive user research was conducted to understand the target audience and their requirements. The research involved surveys, interviews, and competitor analysis. Key findings included:

– Users preferred a clean and minimalist design.
– The calculator should be mobile-friendly for on-the-go use.
– Users desired clear and concise explanations of BMI categories.

Design Process:

The design process consisted of several iterative stages, including information architecture, sketching, wireframing, visual design, and prototyping.

a. Information Architecture:
The information architecture phase focused on organising the content and defining the structure of the BMI Calculator. The main components identified were:

– Input fields for age and weight.
– Height measurement selection.
– BMI calculation.
– Calculation results displayed prominently.
– Clear explanation of BMI categories.

b. Sketching and Wireframing:
Low-fidelity sketches and wireframes were created to establish the layout and flow of the BMI Calculator. Wireframes were tested with users and stakeholders to gather feedback and refine the design.

c. Visual Design:
The visual design phase involved creating an appealing and cohesive visual style for the BMI Calculator. The design incorporated a clean and modern aesthetic, with attention to typography, colours, and imagery that supported the health-focused theme.

d. Prototyping:
A high-fidelity interactive prototype was developed using appropriate tools. This allowed for user testing and validation of the user interface and interactions.

Key Features and Functionality:

The BMI Calculator offers the following key features:

– Input fields for age, weight, and height with validation to ensure accurate data entry.
– Real-time calculation of BMI.
– Display of the BMI category (underweight, normal weight, overweight, obese) based on the calculated BMI.
– Explanation of each BMI category and its associated health risks.
– Clear and concise visual representation of the calculated BMI on a scale.

User Testing and Feedback:

The BMI Calculator was tested with a diverse group of users to gather feedback and evaluate the usability of the application. Testing sessions involved scenarios where users input their own height, age and weight and observed the calculator’s response. Feedback was collected regarding the clarity of information, ease of use, and overall user experience.

Iterative Refinement:

Based on user feedback, several refinements were made to enhance the user experience:

– Improved error handling and messaging for invalid input.
– Simplified language and additional context in the explanations of BMI categories.
– Accessibility improvements, including increased font size and colour contrast.
– Mobile friendly optimisation.


The BMI Calculator project successfully delivered an intuitive and user-friendly tool for calculating BMI. The design process involved extensive research, iterative design, and user testing to ensure that the application meets the needs and expectations of the target audience. The final product provides an accessible and informative experience, promoting health awareness and enabling users to make informed decisions about their well-being.

Client: BMI Calculator
Services: UX/UI Design


Call Us



Let's Chat
× UX / UI Design Research / Analysis Product Design Accessibility Design Brand / Corporate Identity Atomic Design System Mobile App Design Logo / Branding Graphic Design Digital Marketing