Will This Fit In My Car – UX/UI Case Study
My Role: UX/UI designer & front-end dev — handled UX flow, UI mockups, HTML/JS build, and ongoing iterations.
Tools: Figma, JavaScript, HTML/CSS
Type: Personal Project
Goal: Help shoppers quickly understand if large items fit in their vehicle.
🟩 Green = Fits | 🟧 Orange = Partial | 🟥 Red = Doesn’t Fit
Tools: Figma, JavaScript, HTML/CSS
Type: Personal Project
Goal: Help shoppers quickly understand if large items fit in their vehicle.
🟩 Green = Fits | 🟧 Orange = Partial | 🟥 Red = Doesn’t Fit
Background & Research
This project started with a frustrating trip to IKEA.
After buying several large flat-pack boxes, my family and I discovered at the parking lot that some of the larger items didn’t actually fit in the back of our Jeep with the tailgate closed. We managed to rig it shut with some old bungee cords, but the whole situation made me think, “Wouldn’t it be nice to know this before checking out?”
That real-world frustration was the spark for this project. I wanted to build something that could help shoppers visualize how IKEA products compare to their vehicle’s cargo space and remove the guesswork from the buying experience.
As I started building, I found a site that does luggage fit comparison for specific cars (how-many-bags-fit.com). It wasn’t direct competition, but it confirmed that others had seen value in this kind of spatial-checking experience.
This wasn’t a formal UX research project. I didn’t start with sketches or interviews. Instead, I started designing and coding based on my own pain points, gradually shaping the experience through feedback and iteration. The goal was always to make something practical, visual, and dead simple to use.
Key Insight
Shoppers don’t know how product dimensions compare to their vehicle cargo space — they just hope for the best.
The Solution
A responsive web app with:
- Step-by-step vehicle selection
- Product comparison with clear visual feedback
- (Coming soon) React/Next.js upgrade and 3D cargo view
- Step-by-step vehicle selection
- Product comparison with clear visual feedback
- (Coming soon) React/Next.js upgrade and 3D cargo view
I chose a clean, brutalist aesthetic for this app to emphasize its straightforward functionality and provide a bold, user-friendly experience.
This design update (4/25) applies a Brutalist style, but I recognize that the current display of search results and selected products could be more engaging. I'm exploring technologies like 3JS to create a more dynamic user experience in future versions.
Mobile vehicle selection page
Mobile search with results minimized but requires further refinement.
Mobile adaptation maintains readability, but the product search overlay requires further refinement.
Previous iterations
Initial one-page app concept. The layout proved cumbersome and there is no need for one page.
I tried developing a one page multi-step desktop flow but again this was confusing to users.
The stacked one page mobile layout was not bad.
First iteration of multi page layout. This was the splash/Welcome screen. It proved to be not needed.
This was the vehicle selection page with some placeholder images that did not fit the design.
The search results page for this iteration did not seem to define the steps clearly. Also, the search results covered selected results.
