Fragmented data
Revenue, campaigns, and behavior live in tools designed for different teams.
Back to PulseMetrics
Product design · UI/UX · Front-end engineering
Making complex growth data feel decisive.
PulseMetrics is an end-to-end SaaS analytics product created as a transparent design and development exercise for a professional portfolio.
PulseMetricsOverview
Pulse insightExpansion revenue is up 24%
This is a self-initiated design exercise for a fictional company. No user interviews or production analytics were conducted. All people, organizations, testimonials, and metrics are simulated and clearly labeled as demo content.
Growing teams have data.
They lack a shared picture.
Digital companies often split acquisition, product behavior, CRM activity, and revenue across separate tools. Leaders spend time reconciling dashboards before they can discuss what to do.
PulseMetrics explores a product that consolidates those signals without flattening their meaning—giving executives a calm overview and analysts a clear path into the underlying segment.
Slow interpretation
Numbers are visible, but the context behind movement is difficult to find.
Uneven alignment
Each stakeholder brings a different dashboard—and often a different conclusion.
Design question
How might a single analytics product help leaders notice a signal, understand its cause, and align on the next action?
Product goals
- Provide a trusted company overview in under a minute
- Make segmentation feel progressive, not overwhelming
- Connect insights to customer and campaign context
- Make recurring communication part of the product
- Demonstrate enterprise depth without template-like complexity
A broad product, arranged around four jobs.
The architecture separates monitoring, analysis, customer context, and communication while keeping management tools predictable.
PulseMetrics workspace
Settings · Permissions · Billing · API · Design system
From setup to a shared decision.
The primary flow tells a coherent product story without requiring a real external account.
Onboard
Define workspace, goals, sources, and dashboard.
Monitor
Notice movement across company health metrics.
Investigate
Filter the relevant analytic and customer segment.
Report
Assemble and schedule a focused stakeholder view.
Restraint is the visual strategy.
The interface uses contrast and information hierarchy to create energy—without relying on decorative gradients or glass effects.
Put the signal before the chart
Key movement and its meaning appear before the supporting visualization, so scanning never becomes a decoding exercise.
Separate monitoring from analysis
The dashboard stays concise; deeper filters, segments, and comparisons live in dedicated analytics views.
Design action into the insight
Anomalies and recommendations always offer a relevant next step instead of stopping at description.
Use density deliberately
Compact controls and tables support expert workflows while generous spacing preserves hierarchy at the page level.
System principles
Consistency that stays quiet.
Semantic tokens control canvas, surface, line, text, feedback, and chart colors across light and dark themes. Components share an 8px rhythm, compact controls, and measured radius.
Explore the live design systemDisplayClarity compounds.Body
Information should feel progressively revealed.
↑ 18.4%
Desktop · Tablet · MobileHierarchy adapts.
Hierarchy adapts.
Capability remains.
Desktop supports comparison and density. Tablet collapses secondary panels into a single reading order. Mobile replaces persistent navigation with a drawer, stacks metrics, and keeps actions within thumb reach.
- Tables remain horizontally scrollable
- Charts retain a useful minimum height
- Forms keep labels and validation close
Designed in the browser.
Built as a real product.
Next.js, React, TypeScript, Tailwind CSS, shadcn-style component primitives, Recharts, React Hook Form, Zod, Lucide, and Framer Motion form a typed, reusable front-end architecture.
FoundationSemantic tokens, typed data, reusable primitivesProduct shellResponsive navigation, themes, command searchData surfacesRecharts visualizations and realistic seeded dataInteractionValidated forms, filters, builders, demo statesQualityResponsive, accessible, linted, type-checked, tested
A credible first version,
with a clear path forward.
The next phase would replace design assumptions with evidence and deepen the production architecture.
Explore the result