Microsoft Connect · Daniel Giordan Atelier

The situation

Visual Direction 3 — dark theme design system board with Create New Program on device

What we were solving Microsoft Connect is Microsoft’s internal partner portal — the platform channel and sales teams use to create programs and configure partner sites. A decade of bolt-on features had fractured the experience. We led a design system refresh for Microsoft from primitive tokens through global page templates, so three visual directions could ship on one shared architecture instead of three separate redesigns.

Design system strategy

Fix the foundation first. Then argue about the paint color.

A design system is a shared set of rules for how a product looks and works — colors, typography, buttons, forms, alerts, page layouts — documented clearly enough that design and engineering build the same thing every time. For MS Connect, that was the strategy: stop redesigning screens one at a time, and define the layers below the screens first.

We worked bottom-up in four layers. Get the primitives and components right, and the Create New Program flow — plus the page builder admins use to configure partner sites — could be skinned three different ways without re-architecting the product each time. Stakeholders could compare visual directions on equal footing. Engineering would inherit specs, not one-off comps.

The stack we used — same structure in every direction:

Primitives

Raw Ingredients

Color tokens
Type scale
Icon grid
Spacing rhythm

Semantics

UI Elements

P1 & P2 actions
Active states
Alert levels
Functional vs marketing copy

Components

Building Blocks

Inputs & date pickers
Tabs & steppers
Panels & notifications
Nav & overlays

Templates

Page Assembly

Program Flow
Page builder blocks
Drag-and-drop regions
Role & permissions steps

Three visual directions

Visual Direction 1 — light theme with yellow header, component specs and Surface mockup — **Direction 1 · Light.** Yellow accent, airy forms, underline inputs.

Visual Direction 4 — purple and lime theme with icon grid and component specs — **Direction 4 · Purple.** Deep header, lime stepper, full icon set.

Visual Direction 3 — dark theme with blue accents and component specs — **Direction 3 · Dark.** Charcoal shell, blue actions, circular CTAs.

Tokens and components, spec’d before stakeholders picked a skin.

Each direction shipped as a board: palette, component anatomy, and a device mockup on the same Create New Program workflow.

Three skins, shared flow

Program details — unchanged IA, different token sets.

Direction 1 · Light

Create New Program Details screen in light yellow theme with sample program data — Program info, timeline, and attributes — filled with sample data to stress-test density.

Direction 4 · Purple

Create New Program Details screen in purple theme with date picker open — Same fields, different tokens. Date picker open to show component behavior in context.

Direction 3 · Dark

Create New Program Details screen in dark theme — Dark shell, same four-step stepper, same attribute hierarchy.

Page templates

Composable blocks, not one-off layouts.

The Pages screen exposed the template layer: Global Nav, Banner, Survey, Feedback, Downloads — drag-and-drop regions with inline editing.

Page builder in light theme — modular content blocks — **Light.** Wireframe blocks with callouts for each editable region.

Page builder in dark theme — same block architecture — **Dark.** Same block architecture, different token set.

Component specifications

UI Elements — tabs, buttons, panels, notifications, forms.

Direction 4 included a full component sheet: every state a dev or QA would need before build.

UI Elements specification sheet — tabs, buttons, panels, notifications, overlay, forms — Tabs (3 styles), buttons (5 states), panels, semantic notifications, overlays, and form field states.

Three decisions

Calls that made the system hold.

01

Foundation before features.

We didn’t wireframe screens first. We defined tokens, states, and components — then applied them to the Create Program flow every direction shared.

02

Structure independent of skin.

Same four-step stepper, same attribute hierarchy, same page-builder blocks. Stakeholders could compare visual directions without relearning the product.

03

Templates as governed modules.

Pages weren’t freeform. Banner, Survey, Feedback — predefined regions admins could configure. That kept partner programs on-brand at scale.

The work

Agile sprints, research-first.

As UX/UI lead, I ran a design team across six months of Agile sprints. Early sprints: IDIs with internal stakeholders, quant studies with external partners. Architecture and final designs shipped in a test-and-learn loop — not a big-bang handoff.