Case study 04 / 27

Quper

See where money, data, and models go before costs scale out of control.

Quper cloud cost intelligence and data warehouse observability website
Client
Quper
Role
Sole UI Designer & Front-End Developer
Architecture
Multi-cloud · Multi-platform · 500+ screens
Pillars
FinOps · DataOps · AIOps
Recognition
Singapore Tech Conference & Startup Foundry
Live site
quper.co

01 · Challenge

Modern engineering teams overspend across three distinct silos: cloud infrastructure (AWS/GCP/AZURE), data platforms (Snowflake, Databricks, Redshift), and AI infrastructure (LLM tokens, models, GPU clusters). Each domain carries its own vocabulary, siloed dashboards, and fragmented tooling. Quper needed a cohesive operating system to unify all three spend categories under one learnable model without sacrificing the depth enterprise operators demand.

02 · Approach

We partnered as sole designer and developer on the UI: owning concept, UX, visual architecture, microinteractions, and production front-end code. We designed over 500+ screens across the product and marketing website, establishing a unified four-phase operating loop (Observe, Detect, Decide, Optimise) where color encodes phase rather than pillar, alongside the grounded Vidura AI copilot.

03 · Outcome

Debuted to widespread acclaim at the Singapore Tech Conference, selected into Startup Foundry, and empowered enterprise engineering teams to uncover waste, right-size workloads, and cut cloud costs by up to 40%.

01The vision

When cloud, data warehouse, and AI token bills spiral simultaneously, clarity is not a luxury: it is survival.

Taming extreme enterprise complexity across three domains

Founders Ayan and Ishwar set out to solve the three places modern engineering teams overspend: cloud infrastructure (AWS services, accounts, commitments), data platforms (warehouses, clusters, storage across Snowflake, Databricks, Redshift), and AI engineering (LLM tokens, models, providers, agents, GPU clusters, and AI seat licences).

The central product challenge was preventing Quper from feeling like three disjointed tools duct-taped together. Our mandate was to tame this domain complexity into one unified operating system with zero handoff gap between design and production code: built on real data models where totals always equal the sum of their parts.

  1. 01

    FinOps: Cloud Spend

    Monitors services, accounts, budgets, and commitments. Operators uncover anomalies, right-size instances, eliminate idle waste, manage compute commitments, and track realised savings.

  2. 02

    DataOps: Data Platforms

    Tracks warehouses, clusters, queries, and storage across Snowflake, Databricks, and Redshift using each platform's native vocabulary: credits, DBUs, and RPU-hours.

  3. 03

    AIOps: LLM & AI Spend

    Observes tokens, models, providers, agent chains, RAG queries, GPU infrastructure, and AI seat licences: routing traffic to cheaper models, caching prompts, and attributing costs to teams.

02The website

A technical marketing surface engineered to turn skeptical engineering leaders into committed platform champions.

Complete Quper cloud cost intelligence marketing website

Authoritative narrative from positioning to production

Before enterprise buyers sign high-value annual contracts, the marketing surface must command immediate technical respect. We designed and engineered the complete Quper marketing website to communicate multi-cloud capability with crisp, high-converting clarity.

The website distills massive telemetry capabilities into intuitive visual models: walking buyers from macro spend trends down to granular SQL statement cost profiles and automated model routing. Debuting at the Singapore Tech Conference, the design garnered immediate recognition from global investors and enterprise buyers, accelerating Quper's entry into Startup Foundry.

03Design system

Designing over 500+ screens across a multi-tenant platform demands strict color discipline and an uncompromising component architecture.

Quper Design System: The Four-Phase Operating Loop

Four-Phase Loop
Color Discipline: Observe - Detect - Decide - Optimise
Four-Phase Operating Loop
1. ObserveSpend, allocation, telemetry & seats
#38BDF8
2. DetectSignals, anomalies & drift detection
#FBBF24
3. DecideCost impact, allocation impact & budgets
#C084FC
4. OptimiseRightsizing, waste, commitments & routing
#34D399
Obsidian CanvasDeep background void across 500+ screens
#0A0B0E
Surface CardClosed-by-default collapsible tables & sheets
#14161C
Tabular Typography Scale
Display Metric (Tabular Mono)32px / 700
$906.75down 7.0% vs prior
AI Unit Economics (Tokens)20px / 600
Token Volume: 12.41BBlend: $0.986/1M
Cluster Latency (Realtime)15px / Mono
p99 Execution: 0.42msSLA: 99.98%
Recovered Waste (Ledger)15px / Mono
Realized Savings:-$1,484 / mo
Micro-Component Tokens
Ask Vidura...⌘K
Last 30 days: Sep 7 - Oct 6Filters (AWS: 3 accounts)
1 Observe2 Detect3 Decide4 Optimise
Multi-tenant: XEqualTo AnalyticsEnterprise v2

One operating loop: Observe, Detect, Decide, Optimise

The core breakthrough in Quper's product design is the four-phase operating loop. Every pillar follows the exact same progression, and color strictly encodes the phase, not the pillar: 1. Observe (Spend & Usage, Allocation, Workloads, Telemetry Explorer, People & Seats), 2. Detect (Signals and anomalies), 3. Decide (Cost Impact, Allocation Impact, Budgets), and 4. Optimise (Rightsizing, Waste, Commitments, Storage, Savings, Model Routing, Caching).

Because all three pillars share this identical loop, someone who learns FinOps already knows how to navigate AIOps. The product feels like one continuous system rather than three separate products.

Quper unified scoped filters system with cloud and platform provider selectors
Quper telemetry and spend overview graph showing anomalies, trendlines, and budget forecasts

Design principles visible in the work

Color discipline: no arbitrary hues per screen. The interface relies on obsidian neutral surfaces accented exclusively by the four phase tokens. This creates an immediate cognitive map for operators scanning hundreds of metrics.

Closed by default: table rows, dropdowns, detail sheets, and organizational tree branches start collapsed and reveal depth only on user action. This keeps dense financial and infrastructure data calm, legible, and focused.

Consistency across pillars: every screen shares identical date controls, table pagination, and a unified 'Filters' chip. Power-user microinteractions, such as quick keyboard navigation, the global sidebar shortcut (⌘), sound effects, and an animated auth panel, bring tactile polish to enterprise software.

04The 3 products

FinOps, DataOps, and AIOps: three enterprise disciplines unified in one cohesive platform shell.

The platform shell: 50 routed screens across multi-tenant workspaces

Quper's shell handles enterprise scale seamlessly: a top-level pillar switcher, a platform-aware switcher for DataOps, a phase-grouped sidebar, breadcrumbs, notifications, and instant switching between dark and light themes. Behind the scenes, a multi-tenant workspace launcher and enterprise chooser allow operators to switch accounts with full role-based access controls.

Quper FinOps dashboard in dark theme showing AWS cloud spend overview, budget forecasts, and anomaly signals
Quper FinOps dashboard in light theme showing cloud cost breakdown and allocation impact

01: FinOps (The deepest pillar)

FinOps monitors cloud spend across AWS services, accounts, budgets, and compute commitments. The overview pairs trend forecasts with anomaly markers, while high-density services tables slide into granular detail sheets for immediate inspection.

We designed full allocation flows, cost and allocation impact matrices, and an organizational budget tree that rolls up from team to business unit to parent company. Dedicated workspaces for Rightsizing, Waste, Commitments, and Storage feed directly into a Savings ledger tracking realised versus estimated savings, connected to an Action Items kanban with assignees and Jira ticket sync.

Quper AIOps platform in dark theme showing monthly LLM spend by model, provider tokens, and GPU cluster workloads
Quper AIOps platform in light theme showing AI seat licence utilization and telemetry queries

02: AIOps (LLM, model & infrastructure spend)

As engineering teams race to adopt generative AI, AIOps brings total transparency to token consumption, frontier models, and specialized infrastructure. The platform tracks monthly spend categorized by model, provider, and class, while AI Workloads maps GPU clusters, Kubernetes nodes, vector databases, and multi-agent chains.

The People & Seats view highlights idle licenses, frontier-model overuse, and redundant API calls. Teams inspect requests in the Telemetry Explorer, enforce governance via automated Policies (monitor, warn, or enforce), and deploy Model Routing and prompt caching to slash AI bills.

03: DataOps (Platform-native warehouse observability)

DataOps speaks the native language of modern data platforms. Rather than forcing generic metrics, navigation dynamically adapts to Snowflake (credits and warehouse clusters), Databricks (DBUs and jobs), and Redshift (RPU-hours and concurrency). Operators run the same Observe-Detect-Decide-Optimise loop across their entire analytical stack.

05Vidura AI

Vidura is an in-product AI assistant embedded directly into the top bar: answering questions grounded strictly in platform data.

Quper Vidura AI expanded conversational workspace integrated into the telemetry canvas

Grounded intelligence powered by tool calls, not hallucinations

In financial and infrastructure operations, an AI that hallucinates numbers is worse than useless: it is dangerous. Vidura was architected from day one as an AWS Lambda agent using explicit tool calls for querying, aggregating, and searching.

Every total, credit count, and dollar figure is strictly computed by tools and validated against an underlying data JSON layer, never guessed by the language model. A custom validation script guarantees that every figure in Vidura's response equals the sum of its parts, providing an auditable paper trail for finance and engineering leads alike.

Vidura AI model parameter selection and telemetry context configuration
Vidura AI answering cost anomaly questions with grounded calculations and one-click remediation

From natural language query to instant remediation

Operators can invoke Vidura via the ⌘K shortcut or the persistent top-bar action to ask complex questions like 'Where did the 32% spike in RDS spend originate this weekend?' or 'Which teams have idle Claude 3.5 Sonnet licenses?' Vidura returns verified breakdowns with one-click actions: rightsizing instances, adjusting auto-suspend timers, or routing tasks to cached prompts.

06Outcomes

40%
Average cloud waste reduction
100%
Visibility across AWS, Snowflake & Databricks
Startup Foundry
Selected accelerator program

Recognized at the Singapore Tech Conference and selected into Startup Foundry, validating Quper's unified four-phase operating model.

Strategy & Architecture

  • Brand positioning
  • Unified 4-phase loop (Observe -> Detect -> Decide -> Optimise)
  • Multi-tenant workspace model

Web Experience

  • Complete marketing website
  • Interactive cost models
  • Performance-tuned front end

Product UI / UX

  • 500+ screens across design iterations
  • FinOps, DataOps & AIOps suites
  • Vidura AI grounded assistant
  • Light and dark themes

Front-End Engineering

  • Production Next.js, React & Tailwind
  • Auditable /data layer & validation script
  • Microinteractions & sound effects
Next case studyCorisAI merchant risk infrastructure for platforms monitoring $50B+.