Solver UX Framework

Client

Xylem Inc. — Solver Platform

My Role

Lead UX Designer / Framework Architect

Platform

Solver Design System (Foundation / Components)

Deliverables

121 Documentation Slices, VOC Research, Personas, Journey Maps, RICE Matrix, Roadmap

Duration

2024–2027 (Roadmap)

Complexity

Enterprise UX, $4B Revenue Platform, 4 Site Unification

Context & Challenge

Unifying 4 E-Commerce Sites Into One Platform

Xylem's Solver platform was tasked with consolidating 4 disparate e-commerce sites into a unified experience targeting $4B in revenue. But design decisions were often made on intuition. There were no baselines, no measurable targets, and no clear connection between user research and product strategy.

I created a comprehensive UX framework with 121 documentation slices covering every aspect of the design process — from initial business goals and stakeholder alignment through research, definition, ideation, and final design specifications. This became the single source of truth for all UX decisions.

trending_flatNo unified methodology

Design decisions were scattered across teams with no consistent framework. Each project started from scratch without building on previous research.

shuffleDisconnected research

VOC sessions happened, but insights didn't consistently flow into design decisions. Research findings sat in documents, unused.

priority_highFeature prioritization by opinion

Stakeholders pushed features based on gut feel. No objective framework existed to evaluate impact, effort, or user value.

routeNo strategic roadmap

Teams were reactive — fixing issues as they arose without a clear multi-year vision connecting UX work to business goals.

adjustMy Brief

Create a comprehensive UX documentation system covering the entire Solver Framework — from business goals through final design specs. Build a methodology that connects research directly to design decisions, establishes measurable KPIs, and provides a strategic roadmap through 2027.

Key Decisions

Strategic Choices That Shaped the Framework

Building a UX framework for a $4B platform required making deliberate architectural decisions upfront. These weren't just process choices — they defined how teams would work together for years to come.

Decision	What I Chose	Why	Tradeoff
Documentation format	121 self-contained slices	Each slice can be referenced independently while maintaining connection to the whole — perfect for a multi-year project with changing team members	More upfront documentation effort, but dramatically better maintainability
Research foundation	VOC-first approach with 19 sessions	$4B revenue platform decisions needed solid research foundation — couldn't rely on assumptions at this scale	Longer research phase, but significantly reduced risk of costly pivots
Prioritization method	RICE scoring + MoSCoW categorization	Needed objective framework to remove politics from feature prioritization decisions	More process overhead, but clear rationale for every prioritization decision
KPI structure	Baseline + target for each metric	Vague goals like "improve experience" don't drive accountability — measurable targets do	Required baseline measurement effort, but made progress trackable and defensible
Design system approach	Solver/Foundation (Gravity) system	Unified visual language across 7+ brands — Xylem Blue primary, Dependable Blue secondary, structured gray palette	Initial brand alignment discussions, but consistent experience across all touchpoints
Roadmap structure	MVP → V1 → V2 → V3 (2024-2027)	Multi-year vision allows incremental delivery while maintaining strategic direction	Requires long-term stakeholder commitment, but enables sustainable growth

The 5-phase framework architecture with slice distribution and macro-stage groupings

The Framework

5 Phases: Understand → Research → Define → Ideate → Design

The Solver Framework organizes UX work into 5 distinct phases plus an implementation handoff. Each phase has specific objectives, methods, and deliverables — creating a repeatable process that ensures nothing falls through the cracks.

Macro Stage 1

UNDERSTAND

Business context, stakeholders, market landscape

Macro Stage 2

EXPLORE

Deep research, synthesis, opportunity definition

Macro Stage 3

MATERIALIZE

Design, prototype, test, deliver

1

Understand & Frame

Business goals, stakeholder alignment, success metrics, VOC overview, competitive analysis, problem framing

Slices 1-24

2

Research & Discover

User interviews, surveys, observational research, analytics, heatmaps, task analysis, affinity mapping

Slices 25-48

3

Define & Prioritize

Personas, journey maps, opportunity areas, requirements, RICE scoring, MVP definition, roadmap

Slices 49-72

4

Ideate & Plan

Design principles, brainstorming, concept sketches, information architecture, interaction patterns

Slices 73-96

5

Design & Prototype

Wireframes, visual design, prototypes, usability testing, design iterations, dev handoff

Slices 97-121

6

Implement & Launch

Development support, QA validation, launch coordination, post-launch monitoring

Reference phase

analyticsFramework at a Glance

121

Documentation Slices

5

Core UX Phases

3

Macro Stages

2027

Roadmap Horizon

Phase 1: Understand & Frame

Business Goals, VOC, and Competitive Analysis

The first phase establishes the foundation — aligning stakeholders on business objectives, documenting VOC insights, analyzing competitors, and framing the core problem we're solving.

Stakeholder mapping — influence vs interest grid

Stakeholder mapping with influence/interest grid and RACI matrix

Competitive analysis — feature comparison matrix

Competitive benchmarking against Grundfos, Pentair, Armstrong, KSB, Taco, Systemwize

groupsKey Deliverables

Business goals documentation, executive vision alignment, stakeholder matrix, success metrics & KPIs, problem statement, market context, competitive feature comparison, VOC overview, customer pain points, and initial hypothesis.

Phase 2: Research & Discover

19 VOC Sessions, Surveys, and Analytics

Deep research phase with 19 Voice of Customer sessions, behavioral analytics, heatmaps, task analysis, and synthesis methods like affinity mapping and empathy maps.

VOC Research: 19 sessions, 5 user segments, top pain points

VOC Research overview: 19 sessions across 5 user segments, surfacing the critical pain points driving the platform redesign

User interview protocol and insights synthesis

Behavioral analytics and heatmap analysis

Expert heuristic review and usability audit

Research Snapshot

Voice of Customer (VOC)

19 sessions across user segments

Identified key pain points: product selection complexity, quote request friction, search limitations, and lack of guided recommendations.

Behavioral Analytics

Google Analytics + Hotjar sessions

32% tool adoption rate, 65% search success rate, average 6-7 clicks to complete tasks. Clear opportunities for optimization.

Phase 3: Define & Prioritize

5 Personas, Journey Maps, and RICE Scoring

Synthesizing research into actionable artifacts — personas, journey maps, requirements, and a prioritized backlog using RICE scoring and MoSCoW categorization.

User Personas — 5 distinct user archetypes

5 personas with demographics, goals, frustrations, and behavioral patterns

6-stage journey maps with pain points and opportunities at each touchpoint

KPIs with Baselines and Targets

KPI	Baseline	Target	Measurement
Tool Adoption Rate	32%	55%	Analytics tracking
Search Success Rate	65%	85%	Search clicks / total searches
Task Completion	6-7 clicks	≤4 clicks	Session analysis
Quote Request Time	15+ min	<5 min	Time-on-task
NPS Score	+12	+40	Post-interaction surveys

RICE scoring: Reach × Impact × Confidence ÷ Effort

MVP Canvas defining scope, success criteria, and phased delivery

Phases 4 & 5: Ideate & Design

From Concepts to Production-Ready Designs

The final phases take prioritized features through ideation, information architecture, wireframing, visual design, prototyping, and usability testing before dev handoff.

Information architecture — 4-section IA with primary product selection flow

Solver Design System tokens — colors, typography, and core components

paletteSolver Design System

All designs use the Solver Design System (Foundation / Components) — with Xylem Blue as primary brand color, Dependable Blue as secondary accent, and a structured gray palette. Components include elevated cards, comparison tables, tag pills, and flow diagrams with consistent typography hierarchy.

Results & Impact

A Living Documentation System

The Solver UX Framework transformed how Xylem approaches product development — from scattered, opinion-driven decisions to a unified, research-backed methodology with clear accountability.

KPI Framework with baseline to target metrics

KPI framework with established baselines, targets, and strategic roadmap through 2027

Framework Transformation

Documentation Slices

Scattered arrow_forward 121 slices

Unified

single source of truth

VOC Research

Ad-hoc arrow_forward 19 sessions

Systematic

research foundation

User Personas

None arrow_forward 5 personas

Defined

with journey maps

Roadmap Horizon

Reactive arrow_forward 2027

Strategic

multi-year vision

Key Deliverables

description

121-Slice FrameworkSelf-contained documentation slices covering the complete UX methodology from business goals to dev handoff

groups

5 User PersonasResearch-backed archetypes: Sales Engineer (45%), Specifying Engineer (30%), Contractor (15%), Facility Manager (7%), Distributor (3%)

route

6-Stage Journey MapsCurrent-state customer journeys with pain points, emotions, and opportunity areas at each touchpoint

calculate

RICE PrioritizationFeature scoring framework with Reach × Impact × Confidence ÷ Effort — enabling objective decision-making

palette

Solver Design SystemFoundation/Gravity design tokens with Xylem Blue primary, Dependable Blue secondary, and component library

timeline

Multi-Year RoadmapStrategic product roadmap: MVP (Q2 2024) → V1 (Q4 2024) → V2 (Q2 2025) → V3 (Q4 2026) → Future (2027+)

Target KPIs Established

KPI	Baseline	Target	Expected Impact
Product Selection Time	15+ minutes	<5 minutes	67% faster task completion
Quote Turnaround	3-5 days	<1 minute	Instant quote generation
Tools Required	4.2 tools average	1 unified platform	76% reduction in context switching
User Satisfaction (NPS)	+62	+80	18-point improvement

Reflections

Documentation as design artifact. The 121-slice framework isn't just process documentation — it's a living design artifact that evolves with the product. Each slice is self-contained but connected, allowing teams to reference specific decisions without losing context. New team members can onboard by reading relevant slices rather than sitting through weeks of knowledge transfer.

KPIs create accountability. Establishing baselines and targets transformed how stakeholders engaged with UX. Instead of debating opinions, discussions focused on measurable outcomes. Design became a strategic investment with trackable ROI. "Improve the experience" became "reduce selection time from 15 to 5 minutes."

RICE removes politics from prioritization. The RICE scoring framework gave everyone a shared language for evaluating features. Decisions that once caused friction now have clear rationale documented in the framework. When stakeholders push for features, we have objective criteria for comparison.

VOC research pays dividends. The 19 VOC sessions uncovered insights that assumptions never would have revealed. Learning that users average 4.2 tools per task or that quote turnaround causes the most frustration — these discoveries shaped everything from MVP scope to roadmap sequencing.

Multi-year roadmaps require executive buy-in. A framework spanning 2024-2027 only works with sustained commitment. The documentation approach — with its clear phases, gates, and success metrics — helped secure ongoing investment by making progress visible and demonstrable to leadership.