ROLE:
LEAD PRODUCT DESIGNER
CLIENT:
MSG
TEAM:
FOUNDING
Agents increase
task completions for employers
Summary.
Payroll managers found the Mastercard approval process stressful and time-consuming, often delaying or skipping approvals when information wasn’t clear. As Product Designer, I led the design of Tappy Agent, an AI-powered assistant embedded in the employer portal.
Tappy Agent centralizes approvals into a conversational flow, surfaces only the key fields payroll managers need, and allows them to ask real questions when something looks off.
This reduced stalled approvals by 3%, cut approval times from 10 days to 4 days, and lowered CS tickets by 5% in the first month—unlocking faster Mastercard adoption and a core business win.
Project Context.
Company / Product: Tapcheck – Employer Portal (Mastercard Approvals)
Timeline & Team: Multi-month cross-functional project; design + AI engineering + product management
My Role: Owned experience design for the Tappy agent, including research synthesis, conversational UX, interaction design, flows, and handoff to engineering
Problem & Goals.
Business problem:
Disjointed approval flows led to stalled onboarding and lost revenue opportunities tied to Mastercard adoption.
User problem:
Payroll managers reported stress and frustration when reviewing requests; missing or confusing data caused them to skip approvals entirely.
Success Metrics:
• Minimize time to approve Mastercards
• Provide just enough information to make confident decisions
• Reduce support overhead from stalled approvals
• Position Mastercard adoption as seamless and trustworthy
Personas + insights.
Payroll Managers (n=6 interviewed)
HR Manager: Approves requests and monitors risk flags; needs audit clarity
Methods & Key Insights:
• Employer interviews revealed pain with scattered approval pages and unclear risk handling
• Analysis of CS tickets showed high volume of requests for “where to approve” and “how to find invoices/requests”
• Benchmarking conversational UI patterns highlighted chat as a lightweight but powerful UX for task completion
Design Process.
Ideation & sketches
Focused on Mastercard only (leaner initiative). Explored conversational entry points, summary cards, and flows for approve all vs. individual review. Grounded all explorations in the PRD.
Wireframes + Vibe inspirational low-Fi Prototypes
Generated a PRD in ChatGPT -> to pass through Figma Make, Lovable.dev and v0. This helped visualize chat states, and approval / drill down paths to better to iterate and make more informed wireframes.
Iterations & trade-offs
• Removed “Deny all” after negative user response
• Introduced Approve all, Review individually, Do it later as the final action set
• Balanced speed with safety rails by surfacing flagged exceptions and logging Q&A requests for future design buttons
Phased Rollout Strategy:
Phase 1: Approve all + Review individually + Do it later
Phase 2: Add on-demand buttons for common Q&A based on logged Tappy Agent requests
Solution & Visual Design.
High-Fi Mockups
• Agent button wCounter: Persistent button with badge count in portal footer
• Summary Card: “You have X approvals, ~Y minutes to complete”
• Approve All Flow: Confirmation modal with excluded flagged items clearly shown
• Compact Cards: Display name, city, company, and start date
• Actions: Approve all, Review individually, Do it later
• Tappy Agent NL: Natural language questions answered directly in chat, no redirection to articles
• Review Individually Flow: Compact employee cards with details, risk flags, and quick actions
• Interaction Highlights: Bulk select, confirmation modals, audit log export, Q&A responses powered by Tappy Agent
• Accessibility & Inclusivity: Clear field hierarchy, high-contrast flags, keyboard navigation support
Our impact & what we learned.
Impact:
14% increase in task approval completions
4 day reduction in Time to approval (10 -> 6days)
5% reduction in CS tickets in first month
Increase in Mastercard adoption (core revenue driver)
Qualitative Feedback:
• Users appreciated having the right data upfront
• Tappy Agent felt like a real assistant, not a redirect tool
What Went Well:
Lean focus on Mastercard approvals improved adoption; Tappy Agent built trust by answering real questions; “Do it later” unblocked progress without forcing denial.
What I’d Do Differently:
Accelerate roadmap for structured Q&A buttons to pre-empt the most common questions payroll managers ask.
Future Roadmap:
• Add pre-built Q&A actions (“Show recent address changes”)
• Expand approval types (eventually Mastercard)
• Layer in predictive risk explanations
