Context & Initiative
Address capture is a critical moment in flows that depend on accurate user location: checkout, account setup, serviceability, and more. Validation states directly affect whether users can correct errors quickly and complete the task successfully. The existing address capture experience had not been fully aligned with established validation best practices.
Initiative
- Identify key enhancements using established validation best practices
- Map updated validation states against the existing experience to define gaps
- Develop wireframes and secure stakeholder and developer alignment
- Refine messaging in collaboration with content strategy
- Update the address capture component in the design system with a new “Validation Error” state
- Deliver Figma updates via a dedicated branch, then merge and publish
My Role
I identified enhancements from validation best practices, mapped gaps against the existing experience, and developed wireframes. I worked with stakeholders and developers to confirm feasibility, collaborated with a content strategist to refine messaging, and as Design System Lead updated the address capture component including a new “Validation Error” state across all variants.
Success Metrics
- Consistent, guided validation across all identified failure points
- Reduced abandonment and friction so users successfully reach the offer flow
- Strengthened first step in Cox buyflow to enable better engagement and conversion
Constraints
Small-scope: no systemic changes; work could only affect the address capture component level and how it exists today. Enhancements were bounded by the component and its current usage, not broader flows or platform-wide changes.
Discovery
Address Capture Landscape
Address capture sits in multiple user flows (checkout, account setup, serviceability). Validation states shape whether users understand what went wrong, can correct quickly without losing input, and complete the task. Mapping established best practices against the existing experience was essential to define gaps and opportunities.
Understanding the Legacy State
- Messaging: Validation states were not consistently human-readable, concise, or actionable
- Input behavior: Inputs were not always kept open and editable when validation failed
- Friction: Unnecessary friction in the validation flow increased correction time
- Component support: No dedicated “Validation Error” state in the design system component
User Segments
- End users: People entering their address who need clear, actionable validation messages and preserved input
- Authors: Teams implementing address capture who need a component supporting Validation Error state and approved messaging
Research Inputs
- Validation best practices: Established patterns for human-readable language, editable inputs, preserved input, and reduced friction
- Benchmarking insights: Informed messaging for the new validation states
- Stakeholder and developer review: Detailed reviews of proposed additions, flow maps, and side-by-side comparisons
Problem Definition
The existing address capture validation experience did not fully align with established best practices. Validation states were not consistently human-readable or concise; inputs were not always kept open and editable; user input was not always preserved; and unnecessary friction increased correction time. The design system component also lacked a dedicated “Validation Error” state.
“Users need clear, actionable validation that keeps their input intact and lets them correct quickly; the existing experience created unclear messaging and unnecessary friction, and authors had no component-level way to implement approved error states.
Supporting Evidence
- Gap mapping clearly defined gaps in messaging, input behavior, and friction
- Established validation best practices provided a clear target state
- Stakeholder and developer alignment confirmed feasibility before implementation
- Content strategy collaboration ensured messaging could be approved and implemented consistently
The Opportunity
Implementing validation enhancements at both the experience and component level would reduce correction time, support successful completion, and give authors a scalable way to implement approved messaging. A new “Validation Error” state would ensure consistency across products.
Process & Rationale
Approach
- Enhancement identification and gap mapping: Map updated validation states against the existing experience
- Wireframes and alignment: Work with stakeholders and developers to confirm feasibility
- Messaging refinement: Collaborate with content strategist on brand-aligned, actionable copy
- Component update: Introduce “Validation Error” state across all address capture variants
- Figma branch and developer reference: Create updates in a dedicated branch
- Build, merge, and publish: Merge and publish to the design system
Why This Process
Why map validation states first? Without a clear mapping, gaps and opportunities would remain implicit. The map gave stakeholders and developers a shared reference.
Why wireframes before messaging? Wireframes fixed the structure and behavior. Refining copy after that ensured messaging fit the actual states and flows.
Why a dedicated “Validation Error” state? Authors need a single, consistent way to show validation errors. A first-class state ensures scalability without custom error UIs.
Collaboration
- Stakeholders and developers: Close collaboration to confirm feasibility with detailed reviews and side-by-side comparisons
- Content strategist: Aligned messaging with brand voice, consistency across multiple simultaneous errors, and direct, actionable copy
Solution
Before & After
- Messaging not human-readable
- Inputs not always editable
- User input not preserved
- No Validation Error component state
- No developer reference branch
- Human-readable, concise language
- Inputs remain open and editable
- User input preserved
- New Validation Error state across all variants
- Figma branch for dev reference
Key Design Decisions
Best Practices as the Source of Truth
Enhancements were driven by established validation best practices rather than ad-hoc fixes, making the solution durable and defensible.
Content Strategy Partnership for Messaging
Refining messaging with a content strategist ensured brand voice, consistency across multiple simultaneous errors, and direct, actionable copy.
Component-Level Validation Error State
A first-class “Validation Error” state in the design system component ensures authors can implement approved messaging in one place and that the pattern scales across products.
Figma Branch Then Merge/Publish
Keeping Figma updates in a dedicated branch allowed developers to reference the design during build without affecting the published library until ready.
Validation & Iteration
Key Iterations
After Wireframe Review
Stakeholder and developer feedback on proposed additions, flow maps, and side-by-side comparisons informed refinements before messaging work began.
During Messaging Refinement
Collaboration with the content strategist and benchmarking insights led to copy that was direct, actionable, and consistent across multiple simultaneous errors while aligning with brand voice.
During Component Update
Design system component updated to support the new Validation Error state across all variants so approved messaging could be implemented by authors.
Validation
- Wireframe sign-off with stakeholders and developers before messaging refinement
- Content strategy approval: Messaging aligned with brand voice and approved for implementation
- Design system publish: Figma updates merged and published after enhanced component was built
Outcome & Reflection
Impact
- End users: Clearer validation, preserved input, less friction, faster correction
- Authors: Single component pattern with Validation Error state and approved messaging
- Design system: Consistent, scalable validation pattern and production-ready component
Learnings
- Small but mighty. Small-scope, component-level projects can deliver significant revenue impact. This project delivered a 10% decrease in frustration scores and an 8% increase in conversion rates.
- Heuristic wins: standing on the shoulders of giants. Established validation best practices gave us a clear target without reinventing the wheel.
- Team alignment is crucial. Close collaboration between UX, development, and content ensures scalable, system-level impact.
What I'd Do Differently
Nothing major. I'd continue to advocate for the same close UX-dev-content alignment on small-scope work so that component-level changes still get full process and still drive measurable impact. Treating “small” projects with typical UX rigor was key to the outcome.
