ROLE:
LEAD PRODUCT DESIGNER
CLIENT:
ENTERPRISE CLIENT
TEAM:
EMPLOYER
AI 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 1 container flow, surfaces only the key information payroll managers need, and allows them to ask natural language questions when they need to learn more about an employee.
This increased batch approval completions by 14%, cut approval times from 10 days to 6 days, and lowered CS tickets by 10% in the first month, unlocking faster Mastercard adoption and a core business win.
Project Context.
Company / Product: Tapcheck – Employer Portal (Mastercard Approvals)
Timeline & Team: 2 month cross-functional project; design + AI engineering + product management
My Role: Lead Designer, 2 FE engineers, 2 BE engineers, Product Manager
Owned experience design for the Tappy agent, including research, ideation, conversational UX, interaction design, flows, and handoff to engineering
Problem & Goals.
Business problem:
Slow approvals process creates delays for Tapcheck’s Mastercard product,
(Core revenue driver via transfer destination account)
User problem:
• Approvals scattered across a couple screens
• Stress when data was incomplete, causing them to delay or abandon approvals as a batch
• Users are unable to ask clarifying questions without contacting support
Success Metrics:
• Reduce time to approve requests by 20%
• Increase batch approval completions by 10%
• Reduce support tickets related to approvals
Personas + insights.
Payroll Managers (6 interviewed)
HR Manager: Approves requests and monitors risk flags
Methods & Key Insights:
• High level approval works for 90% of employees
• Ability to drill down - Managers want to easily drill down on data if they question an employee
Important info for approval: Employee name, company, location, start date.
• CS is a pain, how can we ask questions without delay?
• Employers like to keep their employees informed on what their employees are signing up for (third party ATM fees etc.)
Design Process.
Ideation & sketches
Focused on Mastercard only approvals vs initially scoped approvals for both mastercard and direct deposit (leaner initiative). Explored conversational entry points, summary cards, and flows for approve all vs. individual review.
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 and further prototypes.
Iterations & trade-offs
• Removed “Deny all” after lack of use by users, as well as negative business benefit.
• Introduced Approve all, Review individually, Do it later, and Ask a question 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
• 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 and quick actions.
• Interaction Highlights: Bulk select, confirmation modals, Q&A responses powered by Tappy Agent
• Accessibility & Inclusivity: Clear field hierarchy, high-contrast flags, keyboard navigation support
Iteration.
Insight: Employer users ask natural questions on candidates when information was recently updated, and therefore seems suspicious.
Iteration: By visually identifying recent employee changes in individual review summary we plan to reduce the need to ask questions. We are testing preemptively labeling recent updates within 2 month period of update for users. (e.g. Location: Oakland, CA (updated 2 mo ago)
Our impact & what we learned.
Impact:
14% increase in batch approval completions
4 day reduction in Time to approval (10 -> 6days)
10% reduction in CS tickets related to approvals
+ Increase in Mastercard adoption (core revenue driver)
Qualitative Feedback:
• Users appreciated having the right data up front
• 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
• Expand approval types (direct deposit)
• Layer in predictive risk explanations
