Project at a Glance
Role: Product & UX Designer, Prompt Engineer
Team: Frontend developer, full‑stack developer, UX Designer, ChatGPT, Lovable.dev
Tools: Figma, Miro, Loveable.dev, ChatGPT
Challenge: Build a mobile and web platform that uses AI to capture contact details from meeting attendees and automatically add them to the startup’s CRM. The experience needed to be seamless, privacy‑compliant and trustworthy.
Responsibilities: Led UX from strategy to interface design; defining goals, creating the visual identity, and designing core flows for scanning, onboarding, and subscriptions. Collaborated with engineering on AI-powered tools and prompt logic, and refined the experience through usability testing and iteration.
Led UX from scratch: defined goals, set UI direction in Figma, and created product branding.
Designed core flows: business card scanning, onboarding, general app interactions, & subscription
Collaborated cross-functionally: worked with engineers to build AI-powered features, refine logic, and design prompts.
Tested & iterated: implemented user feedback and ran moderated usability sessions to validate designs and improve.
Project Overview
CardLynk is a networking tool built for professionals who collect business cards and QR codes at events. These interactions happen quickly, and keeping track of new contacts, let alone following up, is tedious and error-prone. Our goal was to build a modern application that could solve that.
As the lead interaction designer, I worked on two core initiatives:
Designing an AI-powered scanning feature that auto-captures contact info from cards and QR codes.
1. Contact Capture: Turning Business Cards into Smart Contacts
The Problem
Professionals attending conferences or networking events often collect dozens of business cards in a day. Manually entering that info into a CRM is slow, inconsistent, and full of friction. We needed a way to eliminate the manual step, without compromising trust or accuracy.
The Solution
I prototyped two distinct scanning flows:
A camera-first business card scanner with confidence-based field editing, before contact creation.
A fast QR code scanner that reads vCards and creates contacts instantly
To help users trust the results of the scan, we have a contact info confirmation page which provides a simple mote, protecting CRMs from bad data input while not compromising the user’s speed and control over contact data collection.
We also added a subtle usage counter that supports freemium conversions after five scans, something we knew would matter for scale.
What We Found
After interviewing recruiters, salespeople, and event organizers, we heard a few consistent themes:
Users expected the process to take seconds, not minutes.
They needed control, especially over fields the AI might not be confident in.
They wanted the ability to scan in physical cards and create contacts on the spot.
Results
Card capture time was reduced from 2–3 minutes to ~5 seconds
Over 90% of fields from business cards were correctly parsed
Editing flow allowed users to quickly adjust and confirm info
Many users hit the free usage cap early, validating the value of the feature
2. Building CardLynk: The Product Behind the Scanner
Vision
There was no single product that unified contact scanning, digital profile sharing, analytics, and CRM-friendly exports. The idea behind CardLynk was to solve that, building a platform that made networking more powerful, not more cluttered.
Building with AI
We used Lovable.dev to accelerate the frontend build. As a designer, this gave me a unique opportunity: I could shape the app by prompting the AI myself, turning flows and features into generated components. Working alongside our engineer, we began treating AI prompts like user stories; clear, structured inputs that built real parts of the app.
Was it perfect? No. But it gave us a working prototype fast. And with enough iteration and targeted fixes, it helped us launch a fully functional platform.
It wasn’t just about using AI to build, it was about designing for AI to be part of the process.
Development Stack
Frontend: Lovable.dev + custom React
Backend: Supabase for database and auth, AWS for OCR and file storage
Design: Figma with wireframes, hi-fi mockups, and user flows + ChatGPT with marketing and persona images
Outcomes
We launched MVP in under 2 months
The platform supported QR code scanning, card OCR, contact notes, profile sharing, stripe integrations, and many other features.
Lovable.dev handled the modular design system set us up for growth. We were able to prompt specifications in along the way to change branding and design elements.
Reflection
CardLynk was a crash course in AI-assisted product development. It showed me that thoughtful Product Design and UX still drives everything, even when AI is in the mix. Design still solves the same problems: clarity, trust, usability.
Working across design, product, and engineering helped me shape a better product and a faster process. Tools like Lovable.dev and ChatGPT didn’t replace design, they amplified what we could do when we worked with them intentionally.