Overview
Company: Piano — global platform powering content monetization for major publishers.
Product: Cubit — B2B platform where companies manage employee access to premium news sites.
Role: Sole Product Designer — UX architecture, UI, design system, visual QA.
Team: 6 people · Timeline: 11 months, ~3 months on admin interface.
The Challenge
A completely new product, built from scratch. No legacy system, no users, no data to lean on.
Core complexity:
- Internal currency (Cubits) with two cost types — per-article and mandatory monthly minimums. Every admin action affects the budget
- Policy engine with 6 lifecycle states tied to billing cycles
- Branding changed twice during development — name, colors, everything
- All design decisions based on domain research and team collaboration
Key Design Decisions
Always Show the Money. The admin’s #1 concern: “How much will this cost?” So every screen answers that question. When creating a policy, a sidebar shows Cubits available, projected cost, and remaining balance — updating live as the admin makes changes.
Policy creation — sidebar with live Cubit balance and projected cost
Pending Users — Preventing Cost Surprises
Auto-synced employees (via SCIM) could silently spike costs. My solution: new users land in a Pending state. The admin reviews each one and sees the exact Cubit impact before approving.
Pending users drawer — approve, skip, or reject with Cubit cost breakdown
Audience Rule Builder
Admins filter users by department, title, or location. A live counter shows how many users match — paired with the cost preview, you always see the full picture before saving.
Rule builder — filtering by department, title, location with matched user count
Policy List
Policies can be in 6 states, some overlapping (e.g. Active + Scheduled Changes). Three tabs — Active, Drafts, Archived — with secondary badges on each policy. You scan 50 policies without opening any.
Policy list — Active tab with “Scheduled changes” and “Grace period” badges
Policy Detail — Current vs. Upcoming
When a policy has scheduled changes, a toggle lets admins switch between “Active state” and “Scheduled changes” No guessing what changes when.
Policy detail — current vs. next billing cycle toggle
Design System — Built While Everything Changed
30+ components from scratch, plus icons and typography — all in Cubit’s distinctive squared, pixel-inspired style. Branding changed twice. The system held, but without design tokens it cost extra time.
Component library — buttons, tables, filters, icon pack
Decisions & Trade-offs
-
Pending state for SCIM users: Cost safety over seamless provisioning.
-
Changes locked to billing cycles: Enterprise predictability over instant flexibility.
-
48-hour grace period: Balance between fixing mistakes and system stability.
-
Live cost preview on every action: Over-communicate cost impact — the #1 admin concern.
-
Compound status badges: Clean list view while conveying complex lifecycle.
Reflection
First time designing with zero user data. Every decision came from domain logic and team collaboration.
What I’d do differently: talk to potential users first (even 3–5 calls), set up design tokens from day one, and define a tighter MVP scope to reduce mid-flight pivots.