Hello everyone! Welcome to Nate's Space, Portfolio of Design and Code., And this is 'Project' page, the work that I proud with!

Star Wars BMI
From API to BMI

Client

Star Wars

2025

Role

UI Designer & Frontend

Stacks

HTML / CSS / JavaScript

Link

github.com/nnmhd/galactic-good-shape

Brief
Star Wars BMI gathers weight data of Star Wars characters to find out who might be tipping the scales — and possibly breaking the Empire’s health code!
Audiences & Users
Star Wars BMI is made for fans who already know the stories, roles, and journeys of their favorite characters — but have you ever wondered about their body mass index? This isn’t about beauty standards — it’s all for fun and a little health curiosity! We’re diving into another side of the galaxy far, far away, exploring who might be carrying a little extra weight (according to science, not the Empire’s fashion police). Discover new, surprising data from the Star Wars universe — and maybe even learn something new about health along the way!
Challenge
One of the technical challenges in this project was experimenting with fetching data from two different APIs — the Star Wars API and IMDb. It involved multi-layer data fetching, where I had to retrieve and combine nested information from both sources. Originally, the project only required showing 10 characters, but I decided to go beyond that. I approached it by grouping characters and displaying the entire character set, to make the data more meaningful and give a fuller picture of the Star Wars universe.
Directions
I noticed that “API” sounds a bit like “BMI”, so I decided to play with that idea. Instead of simply showing basic character info — like their name or which Star Wars episode they appeared in — I added a fun twist by calculating and sorting them by their BMI (Body Mass Index). This allows users to see who’s extremely overweight, slightly over, or underweight, all in a light-hearted way. It turns simple data display into something more engaging and health-conscious, while still celebrating the characters fans already love.
Process
Early Stage
I began by exploring what kind of data was available through the Star Wars API. I found a lot of interesting categories — such as details about planets, species across the galaxy, and even starships. Each of these categories had rich and interconnected data that could be fun to work with. At first, I considered using starship data, but I realized it would take too much time to gather consistent visual assets that matched each ship. Since the project had a limited timeframe, I kept exploring further. Eventually, I discovered that most characters in the database include height and mass (weight) data. That led me to the idea of calculating their Body Mass Index (BMI) — which would not only be fun but also easier to visualize and compare across characters.
Middle Stage
Next, I designed the BMI calculation structure based on common weight classification groups that most people are familiar with — including Obese, Overweight, Normal, and Underweight. After fetching character data from the API, I used a simple JavaScript formula to calculate each character’s BMI. Once the BMI was calculated, I sorted the results into these standard categories for easier understanding and comparison. This approach helped turn raw data into something more meaningful, giving users a clear visual of how each character fits into familiar health categories.
Final Stage
In designing the website layout and user flow, I started with a clean and minimal hero section. It includes a single input field where users can choose the BMI group they want to explore — whether they’re curious about underweight, normal, overweight, or obese characters. Once a group is selected, the site dynamically displays all the Star Wars characters that fall into that category. To make the experience more interactive, users can click on any character card to view more details. On the detail page, they’ll see additional character information such as which Star Wars episodes they appeared in, their home planet, their species, and of course, their height and weight. This structure keeps the experience simple and focused, while still offering an engaging way to explore health-related data through the lens of the Star Wars universe.
Highlight & Thought
I had so much fun working on this project. The idea itself was playful, and I truly enjoyed diving into the data to create something quirky and unexpected. Even though it may not serve a big purpose in the real world, that didn’t feel like a problem at all. For me, this was the beginning of making something original — and who knows, it might not be so useless after all. In fact, this kind of data exploration could even evolve into something more practical, like a fitness-themed website built around pop culture references. Working on this reminded me that data doesn’t have to be boring or overwhelming. Once you find the fun in it, it becomes a tool for creativity — not just numbers on a screen.
Project Image
Museum London