Scalable Enterprise Design System
From dashboard viewing to decision-ready scenario comparison.
Modern Harmony reframed a planning product into a tighter narrative system: clearer tradeoffs, faster executive scanning, and a prototype family that made each iteration easy to compare.
6
Versioned prototypes
3
Core design disciplines
1
Decision-first workflow
Project Focus
What Changed
The interface became an editorial decision surface instead of a collection of reporting panels.
01 / Overview
A premium planning case study built around clarity, system thinking, and confident decision-making.
This project reframed a complex enterprise planning flow into a minimal, editorial interface that explains tradeoffs before asking people to act on them.
Project Overview
Modern Harmony was created to make enterprise scenario comparison feel less like dashboard decoding and more like an intentional product conversation.
Product Summary
A scalable design system and comparison framework for planning teams reviewing multiple futures under pressure.
Why It Was Created
Existing tools surfaced data but did not help teams align around outcomes, constraints, and confidence. The interface needed to tell a sharper story.
02 / My Contribution
Research, experience strategy, and product design working as one system.
The role extended from research framing to interaction architecture to the final narrative language of the product surface.
User Research
Planned stakeholder interviews, structured synthesis, and translated raw signals into decision-ready insight clusters.
User Experience
Mapped the planning workflow, reduced friction across scenario review, and designed for fast executive comprehension.
Product Design
Established a scalable narrative system spanning typography, interaction patterns, scenario states, and prototype handoff.
03 / The Team
A compact team with clear roles and short feedback loops.
04 / Scenario Comparison
The standout interaction is the full scenario comparison version history inside the same accordions.
Users can compare every iteration, explore design evolution, and interact with live prototypes without leaving the context of the case study.
Pain Points
- 01Baseline structure still required interpretation rather than guided comparison.
- 02Narrative framing was limited, so stakeholders had to infer the decision story.
- 03Dense module groupings made first-pass executive scanning slower.
Improved Experience
- 01Established the first reusable scenario comparison scaffold.
- 02Created a reference point for measuring clarity improvements across versions.
- 03Made the core comparison concept concrete enough to iterate quickly.
Live Prototype Example
Explore the version history as a single evolving product story.
Compare every iteration, inspect the tradeoffs introduced at each step, and move directly into the live prototype without losing the narrative thread of the case study.
Interactive Prototype Preview
Full-width scenario workspace with scroll support for dense screens.
05 / Challenge
Complex planning products often show data before they show meaning.
The challenge was to design an interface that helps leaders compare futures quickly without flattening nuance or increasing cognitive load.
06 / Solution
The solution used system thinking: one visual language, one decision flow, and one expandable depth model.
Systemized surfaces
A repeatable card and section system made comparison states easier to scale and easier to hand off.
Narrative hierarchy
Oversized headings, quiet support copy, and staged detail gave the interface an editorial rhythm.
Progressive disclosure
Accordions and expandable modules kept dense information available without overwhelming first-pass review.
07 / Project Brief
The brief centered on clarity, trust, and executive readiness.
Goal
Create a scenario comparison experience that helps planning teams evaluate options and explain decisions with less effort.
Audience
Planning leads, finance partners, executive stakeholders, and cross-functional delivery teams.
Success
Reduce interpretation time, improve confidence, and make the path from review to sign-off more visible.
Constraint
Preserve analytical depth without forcing every user into a power-user interface.
08 / Empathy
Empathy meant designing for people under decision pressure, not just for data consumption.
“I do not need more dashboards. I need confidence that this scenario is the right story to tell.”
09 / User Interviews
Research was detailed enough to drive product strategy, not just validate interface taste.
Interviews focused on planning leaders, analysts, and delivery partners involved in scenario review and escalation.
Interview Findings
Affinity Mapping
10 / User Persona
The primary persona needed speed, confidence, and a product that did more explanation work.
Persona
Avery Singh
Planning Director
Avery is accountable for presenting scenario decisions to leadership and needs an interface that can compress complexity into a trustworthy narrative without removing analytical proof.
Primary User
Finance and planning leads
Goal
Compare scenarios and approve a direction quickly
Needs
Clear tradeoffs, confidence cues, and less interpretation work
Frustration
High-effort comparison across disconnected views and exports
11 / Define
Define focused the project on one strategic question: how can scenario comparison become easier to understand than to misread?
The defining move was to treat the interface as a decision narrative system, not just a collection of charts. That reframed hierarchy, interaction, information architecture, and the eventual handoff model.
12 / Defining The Problem
Planning teams could generate scenarios, but they could not compare, explain, and approve them with the same level of clarity.
13 / Ideate
Ideation focused on how to make comparison feel lighter without making the product feel shallow.
Decision-first layout
We explored oversized headings, executive framing, and pre-read narratives before any dense dashboard composition.
Scenario as product object
Each scenario was treated as a modular card with assumptions, outcomes, and handoff status rather than just a chart state.
Progressive depth
The final concept reserved analytical density for expandable regions so leaders could stay in the main storyline.
14 / Copilot + AI Workflow
Research, design systems, interviews, and references were fed into an AI-assisted workflow built for speed and rigor.
The workflow connected design thinking, agent orchestration, prototyping, and developer handoff inside VS Code.
Design System Integration
Modern Harmony tokens and references informed typography, spacing, and reusable UI patterns.
Research Material Integration
Interview findings, synthesis notes, and opportunity clusters were organized into promptable source material.
AI Agent Collaboration
Specialized agents handled orchestration, design evaluation, platform constraints, and implementation support.
VS Code + Copilot workflow
The build happened through iterative search, targeted edits, validation passes, and component-based implementation.
Claude-assisted design thinking
Alternative framing and design reasoning were explored through AI-supported synthesis and critique loops.
Prompt-driven prototyping
Structured prompts accelerated section generation, scenario storytelling, and interaction exploration.
Developer handoff process
The final step translated design intent into modular code, reusable patterns, and production-ready structure.
Research
Interview transcripts, affinity notes, and design references were structured for prompt-ready retrieval.
Copilot
VS Code + Copilot coordinated code scaffolding, section architecture, and implementation passes.
AI Agents
Specialized agents handled orchestration, Qlik feasibility, design guidance, and development iteration.
UX Flows
Prompt-driven flows translated research into scenario states, interaction rules, and journey framing.
UI Design
Modern Harmony tokens and layout systems informed the visual language across premium editorial sections.
Prototype
Interactive prototypes were generated and compared as versioned checkpoints instead of one-off screens.
Development
Implementation details, handoff notes, and modular React components completed the loop into production-ready code.
Workflow Diagram