ANODA Discuss your product

Kafka management UX design, complexity tamed

Clusters, Optimizations and AI Insights redesigned as one calm product system, on web and tablet.

Superstream cluster overview: cluster facts, savings generated, the cost explorer and the optimisations with their savings; Superstream cost report: hourly cost by instance, transfer and storage, with the day’s savings explained
67%
faster to the aha moment: median time to first savings insight
3,000+
screens and states for web and tablet, in light and dark mode
1,500h+
of design work
4
experts PM, lead, UX and UI designers

Superstream is a Kafka management and optimization platform for DevOps and infrastructure teams. It came to us with developer-assembled screens and no product design. We built the UX, UI and design system from scratch — research, information architecture, flows, wireframes and handoff — for Clusters, Optimizations and User Management, on web and tablet, in light and dark mode .

One product, many technical decisions

Cluster monitoring, infrastructure costs, optimization opportunities, configuration and user management. Each was useful alone; together they made a dense place to decide.

People needed to see what was happening, where attention was needed, and what to do next.

  1. Clusters

    • Connected clusters
    • Topics and throughput

  2. Health

    • Status and usage
    • Anomaly detection

  3. Optimizations

    • Idle topics, compression
    • Producer batching

  4. Costs and savings

    • Cost explorer
    • Savings to date

  5. Action

    • Manual approval
    • or automatic apply
Dense data clear action
Technical information stays precise without making the interface intimidating or hard to scan.
Separate views one product
Clusters, Optimizations and Users feel like parts of one system, not three tools side by side.
Product depth consistent behaviour
Thousands of screens, two layouts and dark mode share one set of components, states and rules.

The same Kafka data, before and after

Found
A cluster screen could hold status, usage, costs, savings, configuration and history at once. At equal weight, nothing stood out.
Decided
One order on every overview: the cluster’s state first, then what it saves and costs, then each optimization with its action beside it.
For the user
A team sees where the cluster stands and what it can save before reading a table, and acts from the same card.
Dashboard design
Superstream before the redesign: a report page headed You’ve saved 35%, a row of percentage chips, and a details breakdown of collapsible rows with a placeholder table of names, addresses and phone numbers
Before: The report page Superstream came to us with
In the way
Savings came as percentages with no amounts, every finding was a collapsed row of equal weight, and nothing on the page said what to do next.
Superstream Cluster Overview: the cluster’s facts, savings generated with the cost explorer, and the optimizations, each with its reduction and an Activate or Deactivate button
After: The redesigned Cluster Overview, read top to bottom: state, then money, then action

  1. Where the cluster stands

    Engine, brokers, topics, partitions, throughput and storage in one band at the top.

  2. What it saves and costs

    Savings to date, this month and the year ahead, then the cost explorer and the projected total.

  3. What to do next

    Each optimization states its reduction and carries its own action: activate it, see its tasks, or leave it running.

How the work progressed

Six phases, each closing a question the product had and leaving something the team could check and build on.

  1. Discovery

    15 hrs

    How Kafka management works, and how other tools surface its data

    Artifact Five 90-minute domain workshops with the client, then competitor research

    Competitor research table comparing Confluent, Redpanda and Aiven

  2. User Flow

    200 hrs

    Three views with their own logic, joined into one way through

    Artifact Information architecture, flow and journey maps

    Two of Superstream’s flow maps zoomed out: every screen of the dashboard and Kafka management flows in one view

  3. Wireframes

    300 hrs

    A structure for dense data and navigation, before any visual choice

    Artifact High-fidelity wireframes

    High-fidelity wireframes for data-dense screens

  4. UI & Design System

    700 hrs+

    A visual language that keeps data readable, in light and in dark

    Artifact UI and a design system, simple and extended

    The Superstream UI kit colour system: neutrals, brand purples and the status colours, each with its hex value

  5. Adaptives

    200 hrs

    The same product holding its layout and legibility on tablet

    Artifact Responsive layouts for web and tablet

    Superstream Jobs on a 1024 by 768 tablet: the jobs table with status bars and cancel or run actions beside a menu of icons

  6. Delivery

    80 hrs

    A build the engineers could follow without guessing

    Artifact UI kit, numbered screen map, clickable prototype, Zeplin export

    A page of the Superstream UI kit: badge variants for error, info, success, active optimizations, insights and client tags

From separate views to one navigable product

Found
Dashboard, Optimizations and Kafka management each showed a different kind of technical data, but people moved between them as one job.
Decided
A shared information architecture and one navigation model that connect the three without flattening what makes each different.

  1. Dashboard

    A first-time user meets the setup one step at a time: welcome, an empty state that says what to do, then connecting a data plane in a stepper.

    Open the full map
    Dashboard user flow: new-user check, welcome pop-up, empty system view, and the add-data-plane stepper with its screen content

  2. Optimizations

    One summary for every cluster, split into compute, storage, transfer and reliability, so savings read by category before the table.

    Open the full map
    Optimizations user flow: empty states for a new user, the summary with its content, and the compute, storage, transfer and reliability charts

  3. Kafka management

    Every cluster in one list, with its health up front: an unhealthy cluster says why, and search and filters end in a clear no-result state.

    Open the full map
    Kafka management user flow: cluster list, unhealthy status with its reason, search and filter states, and their error states
Superstream side menu: AI Insights, Kafka Clusters, Cluster Overview, Graph View, General Optimizations, Jobs, Client Configuration, then Reports, Settings, System Settings, Users and Support

Three flows, one menu

Work, reports and settings in three groups, in the same order on every screen; collapsed, it keeps only the icons.

  • Product information architecture
  • Primary and secondary navigation
  • User flows and journey maps
  • Clear entry and return points

Five jobs a DevOps team comes to Superstream for

From the first connection to asking the product itself, in the order a team meets them.

Connecting a cluster

Found
Every Kafka vendor asks for different credentials, and a failed connection usually ends in a vague error and a support ticket.
Decided
One guided flow for seven vendors, with setup help beside the form. Detected clusters name what is missing in place, and the flow ends on the savings Superstream expects to find.
Superstream before the redesign: an Add a new connector modal with three bare fields, connector name, bootstrap servers and security protocol
Superstream onboarding: Connect Your First Cluster, with seven Kafka vendors to choose from and a guide to finding the API key beside them
Three detected clusters, each flagged with its own issue and possible causes, with an edit link
Cost Efficiency Report Overview: current and forecast monthly cost, estimated savings, annual cost avoidance and a per-cluster table

Seeing the whole account

Found
Savings lived inside each cluster, so no one could see where the account as a whole was losing money.
Decided
The dashboard adds savings up across clusters, achieved against potential, and splits them into pillars: compute, storage, data transfer. Picking a pillar filters the cluster list to where it applies.
Superstream dashboard: savings overview rings, optimization pillars with Compute selected, and the clusters list filtered by compute

Running an optimization

Found
Optimizations change live topics and consumer groups. Teams won’t switch on what they can’t inspect first.
Decided
Every optimization shows its monthly reduction, its settings and the exact topics it would touch before it runs. Protected topics are marked and left alone.
General Optimizations: Delete Inactive Schemes opened for configuration, with environments, automatic or manual mode, trigger delay and inactivity detection beside its $15,850 potential monthly reduction
Potential Tasks panel listing topics with consumer groups, partitions, replicas and retention, with a tooltip explaining a protected topic

Proving the savings

Found
Vendor bills show a total, not which cluster or resource made it grow.
Decided
Cost per cluster by hour, day or month, split by resource, with the original cost drawn for comparison. The details answer plain questions, and insights written by AI are marked as such.
Superstream Cost Report: total cost with storage, read, write and partition savings, and a billing cost chart for each cluster
Billing Cost Details panel: total cost, storage, read, write and partition savings, then answers to what the total cost was, what was saved and how storage trended

Asking the product itself

Found
Clear screens still left the team to go looking: open each cluster, compare the numbers, work out what changed overnight.
Decided

An AI assistant reads the clusters on its own and reports what it found and what it saved. Teams pick a persona (DevOps engineer, SRE or infrastructure manager) so the insights match their role.

Suggested questions start the conversation, and the screen says plainly that AI can make mistakes.

Superstream AI Insights: the DevOps Engineer persona reports three clusters with missing details and 30 TB of storage saved in the last 24 hours, with suggested questions under the input
The AI persona menu open over the Superstream AI Insights welcome screen: DevOps Engineer, Site Reliability Engineer and Infrastructure Manager, each with what it focuses on

One design system behind 3,000+ screens

Found
Developers had put the screens together from an off-the-shelf kit. The same saving, status or empty chart looked different from one area to the next.
Decided
We built the system from scratch around Superstream’s data: one way to break a cost down, one set of statuses, and every card drawn for empty, failed and loading data too.

Every saving breaks down the same way

Storage, read, write and partitions, whether it is the account’s total or one optimization’s share.

  • Superstream savings card: $345.20 saved so far, split into storage, read, write and partitions, with a USD or value switch and a period menu
    Cost report: What the account has saved so far.
  • Superstream optimization reduction panel: $1,815 this month in a segmented bar, with storage, partitions, read and write each against its forecast
    Optimizations: What one optimization takes off the monthly bill.

One card, every state

Cluster cards were drawn for data that is missing, broken or still on its way, not only for the good case.

  • Superstream cluster card with its billing cost by day as a stacked bar chart
    Default
  • The same cluster card with no billing data available
    No data
  • The same cluster card when the values cannot be calculated because cluster details are missing
    Error
  • The same cluster card loading while the cluster is analysed
    Loading

Light and dark themes

The product runs in both themes; tables, roles and statuses stay readable on dark.

Superstream Users in the light theme: four people with their roles and last activity, the activity log of engine, cluster and user changes beneath
The same Users screen in the dark theme

One layout logic from desktop to tablet

Kept
The page title, the main action and the table order: cluster, data plane, tag, dates, score.
Changed
The menu folds from full labels to icons to a menu button, and the table scrolls sideways instead of squeezing its columns.
Superstream Kafka clusters list at 1440 pixels: the full side menu and a table of nine clusters with data plane, tag, created, last update and score
1440 · Desktop Full menu, every column in view.
The same list at 1024 pixels: the side menu reduced to icons and the table scrolling sideways
1024 · Tablet, landscape Menu as icons, the table scrolls.
The same list at 768 pixels: menu and search behind header buttons, the table and Add new Kafka button unchanged
768 · Tablet, portrait Menu and search behind buttons.

A handoff engineering could build from

The work ended in one organised file rather than a folder of screens.

UI kit
The components, colours, type and states every screen is built from.
Screen map
Each flow numbered and laid out in order, with notes where behaviour needs explaining.
Clickable prototype
The linked flows, clickable end to end.
Zeplin export
Specs and assets for the engineering team.

Flows in the handoff

  1. Sign-up, log-in and onboarding: connecting the first cluster
  2. Dashboard: savings across every cluster, by pillar
  3. AI Insights: the day’s findings for each role
  4. Kafka clusters and Cluster Overview: status, savings and costs per cluster
  5. Graph view
  6. Optimizations and jobs: running an optimization and tracking it
  7. Cost report, billing and savings to date
  8. Auditing
  9. Users, keys and client configuration
  10. Notifications and the notification center
  11. Design system
Superstream screen map for Kafka clusters and Cluster Overview: rows of screens with numbered markers, prototype links and developer notes
Screen map: Kafka clusters and Cluster Overview, every screen numbered, linked and annotated.
Superstream UI kit pages: the icon set and button variants with their default, hover, active and focused states
UI kit: Icons and buttons with every state engineering had to build.

Kafka management that finally feels calm

Clusters, optimizations, costs and users now work as one product: one navigation, one way to show costs and statuses, the same layouts from desktop to tablet, and a dark theme that keeps every chart readable.

67% faster to the aha moment Median time to a team’s first savings insight, old product against new

screens and states designed
3,000+
themes from one system
Light + dark
layouts
Web + tablet
of weekly work together
2 years

In the client's words

What stood out was how ANODA took the time to understand our business and the people using Superstream. Engineering teams need to keep Kafka running reliably, while platform leaders need visibility into infrastructure costs and where optimisation will make a difference. ANODA understood how those priorities connect, what each role needs to know, and where users need control over automated decisions. That understanding shaped their design recommendations and gave us a team we could work through product decisions with.

Avraham Neeman Co-Founder & CPO – Superstream (formerly Memphis.dev), Superstream (formerly Memphis.dev)

5.0

Too technical to hand to designers?

Kafka clusters, partitions, consumer groups: we learned Superstream’s domain from the product, its documentation and its competitors, so the team didn’t lose weeks explaining it. Bring us yours, and we’ll come back speaking it.

Discuss your product Explore more case studies

What we brought to Superstream

The product’s structure

The interface and its system