A flat-style digital illustration shows two professional UX designers collaborating at a desk. One designer is standing and pointing at a large screen displaying a multi-step progress bar, chip filters, and form interface elements. The other designer is seated, working on a laptop, with normal facial features and no logos on their clothing. The scene is set in a modern, minimal workspace with soft blue and teal tones.

Interactive UX Demos: AI-Driven Vendor Intake

Three live prototypes showing how I turn long vendor intake flows into fast, accessible, interactive experiences built with Claude AI and refined by UX craft.

Why these demos

Many organizations still collect vendor info with static PDFs or legacy forms. That hurts completion rates, data quality, and accessibility. These three variations demonstrate how a static flow can be transformed into a guided experience, utilizing features such as accordions, step wizards, mobile patterns, and instant feedback.

What I focused on

  • Clear, chunked information hierarchy
  • Accessibility & keyboard flow
  • Searchable categories with chips
  • Mobile-first behavior and performance
  • AI-accelerated prototyping (Claude) with human oversight

Explore My Work

Interactive UX flow icon Diagram with connected nodes and a cursor click to represent interactive demos.

Live Demos

Try the three interactive vendor intake prototypes below

How to use the demos

Try a realistic scenario and observe how the layout adapts as you open sections and navigate between steps.

  • Vendor: Tech Solutions Inc.
  • Contact: Sarah J. Martinez
  • Start typing address: 1425 Technology Boulevard
    (autocomplete fills San Jose, CA 95110)
  • Office: (650) 555-0123   Mobile: (650) 555-0124   Fax: (650) 555-0125
  • Email: sarah.martinez@techsolutions.com
  • Service Area: Bay Area
  • Certifications: Small Business
  • Main Categories: Computer Software, Internet Services, Website Services
  • Subcategories: Internet Security, Internet Marketing, Internet Professional Services, Web Design

Tip:  Open/close sections, switch steps, and preview the summary. Notice that the page resizes itself (no inner scrollbars).

Demo 1 — Accordion UX

Baseline experience with clear sections, sticky “Selected” tray, search, and chips. Click “Fill with Sample Data” inside the demo to see it instantly.

Demo 2 — Wizard (Milestones)

Guides users step-by-step with milestone circles and progressive disclosure for subcategories..

Demo 3 — Wizard (Progress Track)

A compact progress track with the same information architecture, great for smaller screens.

Let’s build your next UX solution

I bridge UX research, content strategy, and front-end prototyping now with AI acceleration. If you’re tackling complex forms, I can help streamline them without sacrificing compliance or accessibility.

Contact Me