Carlos Rubio Design

HIRE PAL APP - AI

End-to-end design and build of an AI-powered hiring toolkit for UX and design teams. The initiative explored an entirely AI-first workflow — using Claude to map product logic, Lovable as an AI prototyping environment to validate interactions, and Figma for design system extraction and production-ready craft. Responsibilities included product ideation, UX strategy, AI-assisted prototyping, interaction design, and full deployment to a live product.

Client

Professional Use

Year

2026

BUSINESS CHALLENGE

Hiring managers evaluating UX and design candidates lacked structured, role-specific tools to conduct consistent interviews and score candidates objectively. Existing generic HR tools didn't account for the nuance of assessing design thinking, portfolio quality, or soft skills relevant to product design roles. The process was inconsistent, undocumented, and heavily reliant on individual interviewer judgment — creating risk of bias and poor hire decisions.

BUSINESS CHALLENGE

USER RESEARCH & INSIGHTS

Drew on direct experience conducting and participating in UX hiring processes across large financial institutions to define the problem space.

Identified three distinct user jobs within the hiring workflow: screening resumes, conducting structured interviews, and scoring candidates post-interview.
Each job required its own dedicated flow, data model, and output format — a single-screen tool would not serve all three adequately.
Key insight: interviewers wanted AI assistance to generate role-specific questions and competency frameworks, not just a blank scorecard template.
Validated assumptions through iterative use of the working prototype with real hiring scenarios before committing to final design.

Drew on direct experience conducting and participating in UX hiring processes across large financial institutions to define the problem space.

Identified three distinct user jobs within the hiring workflow: screening resumes, conducting structured interviews, and scoring candidates post-interview.
Each job required its own dedicated flow, data model, and output format — a single-screen tool would not serve all three adequately.
Key insight: interviewers wanted AI assistance to generate role-specific questions and competency frameworks, not just a blank scorecard template.
Validated assumptions through iterative use of the working prototype with real hiring scenarios before committing to final design.

USER RESEARCH & INSIGHTS

Drew on direct experience conducting and participating in UX hiring processes across large financial institutions to define the problem space.

Identified three distinct user jobs within the hiring workflow: screening resumes, conducting structured interviews, and scoring candidates post-interview.
Each job required its own dedicated flow, data model, and output format — a single-screen tool would not serve all three adequately.
Key insight: interviewers wanted AI assistance to generate role-specific questions and competency frameworks, not just a blank scorecard template.
Validated assumptions through iterative use of the working prototype with real hiring scenarios before committing to final design.

STRATEGY & DESIGN RATIONALE

The product strategy was to build the simplest possible tool that served all three hiring jobs without requiring an engineering team or development budget:

Use Claude to generate tailored interview questions and competency rubrics based on role type and seniority.
Allow interviewers to capture notes and scores in real time during interviews, with session data persisted across navigation.
Sync all candidate data to Google Sheets, giving teams a shared, exportable record without a custom backend.
Validate the full flow as a working product before investing time in a formal design system.
Establish an AI-first workflow that could be documented and presented as a replicable design methodology.

The product strategy was to build the simplest possible tool that served all three hiring jobs without requiring an engineering team or development budget:

Use Claude to generate tailored interview questions and competency rubrics based on role type and seniority.
Allow interviewers to capture notes and scores in real time during interviews, with session data persisted across navigation.
Sync all candidate data to Google Sheets, giving teams a shared, exportable record without a custom backend.
Validate the full flow as a working product before investing time in a formal design system.
Establish an AI-first workflow that could be documented and presented as a replicable design methodology.

STRATEGY & DESIGN RATIONALE

The product strategy was to build the simplest possible tool that served all three hiring jobs without requiring an engineering team or development budget:

Use Claude to generate tailored interview questions and competency rubrics based on role type and seniority.
Allow interviewers to capture notes and scores in real time during interviews, with session data persisted across navigation.
Sync all candidate data to Google Sheets, giving teams a shared, exportable record without a custom backend.
Validate the full flow as a working product before investing time in a formal design system.
Establish an AI-first workflow that could be documented and presented as a replicable design methodology.

PROCESS & ITERATION

Began in Claude — not Figma. Mapped the full product logic, screen inventory, data flows, and edge cases before any visual design work.

Used Claude sessions to define the three core flows (Resume Screener, Interview Kit, Scorecard) and identify states including empty, loading, error, and success.
Moved into Lovable as an AI-assisted prototyping environment to build a working, clickable product from the logic map.
Shipped 59 iterations covering feature additions, interaction fixes, UX improvements, and edge case handling.
Discovered critical design decisions through use rather than assumption — including that the Scorecard form should reset cleanly after saving, and that session persistence was essential to prevent data loss mid-interview.
Validated Google Sheets sync, Anthropic API integration, and localStorage persistence as working features before any Figma work began.
Extracted design tokens and component patterns from the live product to inform the Figma design system.

Began in Claude — not Figma. Mapped the full product logic, screen inventory, data flows, and edge cases before any visual design work.

Used Claude sessions to define the three core flows (Resume Screener, Interview Kit, Scorecard) and identify states including empty, loading, error, and success.
Moved into Lovable as an AI-assisted prototyping environment to build a working, clickable product from the logic map.
Shipped 59 iterations covering feature additions, interaction fixes, UX improvements, and edge case handling.
Discovered critical design decisions through use rather than assumption — including that the Scorecard form should reset cleanly after saving, and that session persistence was essential to prevent data loss mid-interview.
Validated Google Sheets sync, Anthropic API integration, and localStorage persistence as working features before any Figma work began.
Extracted design tokens and component patterns from the live product to inform the Figma design system.

PROCESS & ITERATION

Began in Claude — not Figma. Mapped the full product logic, screen inventory, data flows, and edge cases before any visual design work.

Used Claude sessions to define the three core flows (Resume Screener, Interview Kit, Scorecard) and identify states including empty, loading, error, and success.
Moved into Lovable as an AI-assisted prototyping environment to build a working, clickable product from the logic map.
Shipped 59 iterations covering feature additions, interaction fixes, UX improvements, and edge case handling.
Discovered critical design decisions through use rather than assumption — including that the Scorecard form should reset cleanly after saving, and that session persistence was essential to prevent data loss mid-interview.
Validated Google Sheets sync, Anthropic API integration, and localStorage persistence as working features before any Figma work began.
Extracted design tokens and component patterns from the live product to inform the Figma design system.

COLLABORATION & LEADERSHIP

Sole designer, product owner, and builder across all phases of the project. Coordinated across tools — Claude for strategy and logic, Lovable for prototyping and deployment, Figma for design system work — acting as both the design lead and the technical implementer. The project demonstrated the ability to move from ambiguous problem to live product without a development team, using AI tooling as a force multiplier.

COLLABORATION & LEADERSHIP

CONSTRAINTS & PROBLEM SOLVING

Building a working product without a development background required deliberate tool choices and workflow discipline.

No engineering resource meant every interaction had to be validated in a working prototype, not assumed from a static mockup.
Cursor was evaluated as the AI prototyping environment for this workflow. As the industry-standard tool for AI-assisted coding, it would have offered fine-grained control over a local codebase and tighter integration with existing component systems. However, Cursor requires a local development environment — Node.js, terminal familiarity, and file system management — that would have introduced a steep setup overhead for a solo designer without a development background. Lovable was chosen instead because it provided the same workflow outcome (a working, testable product before any Figma work) without a developer dependency, allowing faster iteration at the prototyping phase. For an existing, complex codebase — such as an integrated banking platform spanning multiple product teams — Cursor would be the appropriate tool.
Anthropic API key and Google Sheet ID initially stored in localStorage — identified as a security consideration and flagged for server-side migration before any public scaling.
Logo rendering across light and dark navigation backgrounds required a creative fix using CSS blend modes rather than a transparent asset.
Scope was deliberately contained to three core flows to avoid feature sprawl before the core experience was validated.
AI code generation occasionally introduced regressions — each iteration required review and targeted correction rather than wholesale rebuilds.

Building a working product without a development background required deliberate tool choices and workflow discipline.

No engineering resource meant every interaction had to be validated in a working prototype, not assumed from a static mockup.
Cursor was evaluated as the AI prototyping environment for this workflow. As the industry-standard tool for AI-assisted coding, it would have offered fine-grained control over a local codebase and tighter integration with existing component systems. However, Cursor requires a local development environment — Node.js, terminal familiarity, and file system management — that would have introduced a steep setup overhead for a solo designer without a development background. Lovable was chosen instead because it provided the same workflow outcome (a working, testable product before any Figma work) without a developer dependency, allowing faster iteration at the prototyping phase. For an existing, complex codebase — such as an integrated banking platform spanning multiple product teams — Cursor would be the appropriate tool.
Anthropic API key and Google Sheet ID initially stored in localStorage — identified as a security consideration and flagged for server-side migration before any public scaling.
Logo rendering across light and dark navigation backgrounds required a creative fix using CSS blend modes rather than a transparent asset.
Scope was deliberately contained to three core flows to avoid feature sprawl before the core experience was validated.
AI code generation occasionally introduced regressions — each iteration required review and targeted correction rather than wholesale rebuilds.

CONSTRAINTS & PROBLEM SOLVING

Building a working product without a development background required deliberate tool choices and workflow discipline.

No engineering resource meant every interaction had to be validated in a working prototype, not assumed from a static mockup.
Cursor was evaluated as the AI prototyping environment for this workflow. As the industry-standard tool for AI-assisted coding, it would have offered fine-grained control over a local codebase and tighter integration with existing component systems. However, Cursor requires a local development environment — Node.js, terminal familiarity, and file system management — that would have introduced a steep setup overhead for a solo designer without a development background. Lovable was chosen instead because it provided the same workflow outcome (a working, testable product before any Figma work) without a developer dependency, allowing faster iteration at the prototyping phase. For an existing, complex codebase — such as an integrated banking platform spanning multiple product teams — Cursor would be the appropriate tool.
Anthropic API key and Google Sheet ID initially stored in localStorage — identified as a security consideration and flagged for server-side migration before any public scaling.
Logo rendering across light and dark navigation backgrounds required a creative fix using CSS blend modes rather than a transparent asset.
Scope was deliberately contained to three core flows to avoid feature sprawl before the core experience was validated.
AI code generation occasionally introduced regressions — each iteration required review and targeted correction rather than wholesale rebuilds.

FINAL SOLUTION

Delivered a fully functional, publicly deployed hiring toolkit that:

Generates AI-powered, role-specific interview questions and competency frameworks on demand.
Provides a structured scorecard for evaluating candidates across defined UX competencies.
Screens resumes against role criteria using AI analysis.
Persists session data locally so interviewers never lose work mid-interview.
Syncs all candidate records to a connected Google Sheet for team visibility and export.
Is live, accessible, and usable by any hiring team at hirepal.lovable.app.

Delivered a fully functional, publicly deployed hiring toolkit that:

Generates AI-powered, role-specific interview questions and competency frameworks on demand.
Provides a structured scorecard for evaluating candidates across defined UX competencies.
Screens resumes against role criteria using AI analysis.
Persists session data locally so interviewers never lose work mid-interview.
Syncs all candidate records to a connected Google Sheet for team visibility and export.
Is live, accessible, and usable by any hiring team at hirepal.lovable.app.

FINAL SOLUTION

Delivered a fully functional, publicly deployed hiring toolkit that:

Generates AI-powered, role-specific interview questions and competency frameworks on demand.
Provides a structured scorecard for evaluating candidates across defined UX competencies.
Screens resumes against role criteria using AI analysis.
Persists session data locally so interviewers never lose work mid-interview.
Syncs all candidate records to a connected Google Sheet for team visibility and export.
Is live, accessible, and usable by any hiring team at hirepal.lovable.app.

OUTCOMES & METRICS

Reduced interview preparation time from manual research to seconds using AI-generated question sets.

Eliminated inconsistency in candidate evaluation by providing a structured, role-specific scoring framework.
Demonstrated a replicable AI-first design workflow: Claude → AI prototyping → Figma.
Proved that a designer with no code background can take a product from problem definition to live deployment using AI tooling.
Established a personal case study directly relevant to fintech and banking product design roles requiring AI fluency.

Reduced interview preparation time from manual research to seconds using AI-generated question sets.

Eliminated inconsistency in candidate evaluation by providing a structured, role-specific scoring framework.
Demonstrated a replicable AI-first design workflow: Claude → AI prototyping → Figma.
Proved that a designer with no code background can take a product from problem definition to live deployment using AI tooling.
Established a personal case study directly relevant to fintech and banking product design roles requiring AI fluency.

OUTCOMES & METRICS

Reduced interview preparation time from manual research to seconds using AI-generated question sets.

Eliminated inconsistency in candidate evaluation by providing a structured, role-specific scoring framework.
Demonstrated a replicable AI-first design workflow: Claude → AI prototyping → Figma.
Proved that a designer with no code background can take a product from problem definition to live deployment using AI tooling.
Established a personal case study directly relevant to fintech and banking product design roles requiring AI fluency.

KEY LEARNINGS

Starting in Claude rather than Figma fundamentally changed the quality of decisions made before any visual work began.

Mapping logic and edge cases in a language model surfaces problems that wireframes miss entirely — particularly around data states and flow branching.
Building a working prototype before designing in Figma eliminates wasted craft — every component in Figma reflects a validated, tested interaction.
AI-assisted prototyping tools like Lovable serve the same workflow role as Cursor for developers — rapid, testable iteration before committing to production.
A solo project reveals how much of good design process is discipline rather than headcount — clear phases, documented decisions, and evidence-based iteration work at any scale.
The workflow itself became the portfolio piece — not just the product.

Starting in Claude rather than Figma fundamentally changed the quality of decisions made before any visual work began.

Mapping logic and edge cases in a language model surfaces problems that wireframes miss entirely — particularly around data states and flow branching.
Building a working prototype before designing in Figma eliminates wasted craft — every component in Figma reflects a validated, tested interaction.
AI-assisted prototyping tools like Lovable serve the same workflow role as Cursor for developers — rapid, testable iteration before committing to production.
A solo project reveals how much of good design process is discipline rather than headcount — clear phases, documented decisions, and evidence-based iteration work at any scale.
The workflow itself became the portfolio piece — not just the product.

KEY LEARNINGS

Starting in Claude rather than Figma fundamentally changed the quality of decisions made before any visual work began.

Mapping logic and edge cases in a language model surfaces problems that wireframes miss entirely — particularly around data states and flow branching.
Building a working prototype before designing in Figma eliminates wasted craft — every component in Figma reflects a validated, tested interaction.
AI-assisted prototyping tools like Lovable serve the same workflow role as Cursor for developers — rapid, testable iteration before committing to production.
A solo project reveals how much of good design process is discipline rather than headcount — clear phases, documented decisions, and evidence-based iteration work at any scale.
The workflow itself became the portfolio piece — not just the product.

GO BACK TO TOP