TL;DR on what Micro-Rollups (MRUs) are: These are advanced, self-contained execution environments that enhance blockchain scalability by processing complex logic off-chain while maintaining on-chain verifiability. They offer stateful operations, flexible hosting, and broad logic execution capabilities — bridging the gap between traditional backends and blockchain applications.

My role
I joined forces with the founding team at Stackr to envision an app-specific micro-rollup explorer, venturing into uncharted territory in blockchain data visualization there was zero reference point for what a micro-rollup explorer should even look like, let alone one surfacing this volume of developer-specific data.
My initial north star was to design an experience that gave developers clear visibility into how their app was functioning, performed user actions, app's on-chain status, batched transactions posted to Ethereum, and the app's state at any given point.

The problem
Current-gen block explorers focus on blocks and transactions, as the name implies. This works well for general-purpose chains, where multiple apps exist and transactions flow across different contracts.
However, in the case of app-specific chains, this information while useful misses a key layer of granularity. This is especially true for micro-rollups, where each app's state is unique and represents the app as a whole. Before building Rollup explorer developers don't have easy visibility into the state and history of the rollup while building with the Stackr SDK.

This journey developers were going through was leading to a sub-par developer experience while building a micro-rollup for their app, and was creating a longer feedback loop on how their code was performing in real time.

Zooming in on minutiae
After clearly defining and drafting the problem we were trying to solve, I immersed myself in the complex world of blockchain backend architecture to understand our users more thoroughly. In the quest to grasp as much as I could about Ethereum scaling solutions and rollups, this journey helped me understand the pain points our target users - developers and how they navigate on a daily basis. The learning curve was steep, encompassing blockchain development, smart contract deployment, and extensive research into developer documentation, whitepapers, and Ethereum Improvement Proposals (EIPs). This deep dive not only sharpened my understanding of the technical hurdles our users face, but also provided crucial insights that informed the design decisions ensuring our solution truly resonated with developers' needs.

The Solution -
A one stop dev-tool to gain insights into —

• State of the rollup

• Actions on the rollup

• Batches produced and posted from the rollup

• Details for that batch

• Raw logs in a terminal-like interface

• State-rewind - An intuitive UX that lets developers step through actions one by one, viewing the state and the state diff before and after each action was executed

As this concept was new we followed the process and agreed upon a wireframe structure before we moved to high-fidelity.

These wireframes were entirely shaped by -

• Goal that a developers should be able to deploy actions and interact with the app

• Provide a safe space for developers to experiment and test new features

• To catch and fix bugs early in the development process

• To ensure code works as intended before integration with the larger system

• Provide a clear view of latest actions, state of the app

As a team, we reached consensus to move ahead with dark mode for the app, since most developers preferred dark-mode tools.

Current block explorers show only two transaction statuses pending or successful but in reality there are five distinct states that needed to be defined for a layer 2 solution. Developers wanted clear visibility into exactly where a transaction stood at any given point. Working with the backend architecture, we drafted the diagram below, which carries this information forward from the developer documentation.

Displaying user actions so each one can be expanded to reveal its states and recent events, in an easy-to-skim hierarchy.

Interact with and deploy actions by setting parameters for specific changes, this acts as a testing environment for developers to test and deploy new app actions.

One interesting experiment I got to implement in the final product was a visualized representation of how a batch forms, paired with a scroll interaction that shows each batch's connection to the previous and next batch.

Each batch can contain between 11 and 1,000 actions, bundled and formed into a single batch. So the detail view had to be scalable enough to display all of them.

Developers had a specific need: to navigate through and stay up to date on the most recent events triggered on the app. We agreed on crafting a timeline-like experience for triggered events, updating in real time and showing a timestamp for each one.

A configuration for settings and parameters was required to control how an app behaves. This is a crucial aspect of software development it allows for flexibility and customization without changing the core code.

Designing a developer tool from 0 to 1 was a brain-tinkering experience. Understanding the behind-the-scenes of a blockchain developer's day-to-day life, while working directly with the founder to shape the tool. On a similar note, a big shoutout and thanks to Kautuk (founder at Stackr) for helping me understand the technical intricacies and onboarding me into the world of micro-rollups.