WEB PAGE UI CLIENT

Bento Cards

Beyond the Box: Using Bento Layouts to Solve Information Overload (UI Exploration)

April 2026

Most landing pages tend to stick to the same, somewhat monotonous, linear formula, which people scroll through in an endless stream. In the case of this project, I wanted to move away from the traditional scroll-and-die experience and create a more premium, editorial experience through the effective compartmentalization of intricate product features in the form of high-impact blocks.

SERVICES

UI Design, System Architecture, Visual Identity, Interaction Design

Project Overview

Most data-heavy layouts are a mess of lists and hidden menus. I used a Bento Grid to fix that. The goal was to take complex information and break it down into modular, scannable blocks where the most important numbers are impossible to miss.

The focus was on building a consistent component library that could handle different data type. Each card uses its own internal grid to maintain consistent padding and type hierarchy, ensuring that complex charts and simple lists feel part of the same cohesive system..

I was responsible for the design, the layout, the iconography, and the prototyping. I focused on making sure the grid didn't break when scaled from mobile to 4K. It ended up being a clean, compact system that fits a lot of information into one screen without making it hard to read.

Approach

Hierarchy isn't decoration — it's the design.

Instead of starting with a blank canvas, I began by looking at all the different data types—like time-series graphs and simple transaction lists—to see how they could actually live together without fighting for space.

I adopted the Bento Grid because it’s a natural way to force a hierarchy. My approach was basically me taking an audit of what matters most; I used the grid to give each piece of info its own "block," using size and scale to show the user exactly where to look first. It wasn't just about making it look organized, it was alsoabout making sure the most important numbers were the easiest to find.

Process

My process started with an audit of the data—identifying what was essential versus what was just "noise." I mapped out how time-series graphs, balances, and transaction lists could coexist without cluttering the screen.

I used Bento Grid as my primary framework because it naturally imposes a hierarchy. While it wasn't just about the layout, it was also about the choice to make high-density information look accessible and easy to read at a glance.

My philosophy for this was "Informed Minimalism." I’m not a fan of hiding things behind menus or extra clicks just to make a screen look "clean"—that usually just makes the app harder to use.

Final Design

The final design ended up being a tight, high-contrast system that feels as premium as it is functional. By using an Obsidian and Ember palette, I made the data the hero—the numbers and graphs really pop against the dark background, making them instantly readable.

I made sure every card felt like a solid, interactive object rather than just a flat box. The typography is clean, the spacing is mathematically consistent, and the layout stays balanced whether it's on a phone or a desktop. It’s a design that proves you can pack a ton of info into a single view without losing that minimalist, high-end feel.

Product Images

"Working on the designs was a transformative experience that allowed me to push the boundaries of 3D design and visual effects. The opportunity to collaborate with such a talented team and contribute to a project of this scale was truly rewarding" — Mark Ashton

Achievements

"The bento designs completely changed how we thought about data density and their application on web pages. It managed to feel high-end and premium while actually being more functional than our old list-based layouts."

– Daniel Stone, Chief Creative Officer of Nebula Production

It was a great proof of concept. It showed that you don't have to sacrifice a clean, minimalist aesthetic to tell a complex product story. It made the web page feel like a cohesive experience rather than just a collection of sections.

The shift to a bento-style layout transformed the page from a standard long-scroll into a high-conversion landing experience. After the update, we tracked a 22% increase in user engagement (scroll depth) and a 15% boost in retention for returning visitors. Users weren't just skimming anymore; the modular layout forced them to stop and engage with each feature block.

Audience engagement