Inkline: a micro-SaaS tool for tattoo studios
Inkline: a micro-SaaS tool for tattoo studios
Streamlining queue management for tattoo studio flash sale events
Streamlining queue management for tattoo studio flash sale events
Industry
B2B SaaS
B2B SaaS
Skills
Design Engineering
Design Engineering
Product Strategy
Product Strategy
Cursor, Figma MCP, Supabase & Vercel
Cursor, Figma MCP, Supabase & Vercel
Team
Carolyn Tung (Design & Development)
Carolyn Tung (Design & Development)
Allison Chu (Marketing)
Allison Chu (Marketing)
Sean Pak (User Research)
Sean Pak (User Research)
Timeline
Sep - Dec 2024
Sep - Dec 2024
MY ROLE
Context
Context
In this project I took a micro-SaaS app from idea to deployed product. I designed the experience, built the system, and shipped the code. I also developed a business model and generated MRR through social media marketing with the help of an intern. By wearing multiple hats, I simultaneously approached this project like a designer, engineer, and founder.
Our goal was to validate market demand, ship a working MVP fast, and design an experience studios can trust on event day.
In this project I took a micro-SaaS app from idea to deployed product. I designed the experience, built the system, and shipped the code. I also developed a business model and generated MRR through social media marketing with the help of an intern. By wearing multiple hats, I simultaneously approached this project like a designer, engineer, and founder.
Our goal was to validate market demand, ship a working MVP fast, and design an experience studios can trust on event day.
INKLINE
IMPACT
Outcomes (Shipped 2025)
Outcomes (Shipped 2025)
What I Delivered
A shipped micro-SaaS app built from 0 → 1
A validated problem with strong early-market validation
A reliable queue system with SMS notifications
A landing page + early go-to-market test funnel
What I Delivered
A shipped micro-SaaS app built from 0 → 1
A validated problem with strong early-market validation
A reliable queue system with SMS notifications
A landing page + early go-to-market test funnel
Solution
Tattoo artists gain an organized queue they can rely on
Clients avoid long waits and know exactly when they’re up
Solution
Tattoo artists gain an organized queue they can rely on
Clients avoid long waits and know exactly when they’re up
EARLY VALIDATION & RESEARCH
Tattoo flash events are chaotic to manage and leave customers frustrated.
Tattoo flash events are chaotic to manage and leave customers frustrated.
Through landscape research, I identified a market opportunity in the tattoo studio industry by collecting feedback in online forums. We discovered that a variety of challenges emerge during tattoo flash events: revenue loss due to drop-off rates due to frustrated customers waiting in line. Sean also conducted customer discovery with local tattoo artists and identified early interest. We built Inkline, a queue management tool designed for tattoo studios hosting high-volume events, to solve this problem.
Props is a gamified community-building and reward platform for social groups, charities, and businesses. It aims to incentivize users to join communities and win “props” by participating in their events.
Over 12 weeks, we partnered with Props to reduce first-session drop-off and increase Day 1-7 retention for Props’ gamified event platform. We focused on (a) clarity of the core reward loop, (b) navigation and information architecture, and (c) early momentum drivers.
"Flash days are great for exposure, but the line management and no‑shows make the whole day feel chaotic instead of profitable."
— TATTOO ARTIST
“I waited in line for hours, and when it was finally my turn they were rushing so hard...”
— CUSTOMER
“There’s only so many tattoos we can safely do in a day.”
— TATTOO ARTIST
OUR APPROACH
Defining MVP Scope
Defining MVP Scope
Before designing anything, I created a PRD with User Stories and Jobs to be Done for tattoo studio owners, tattoo studio staff, and customers. I also outlined requirements, constraints, assumptions, and edge cases to approach designing the app with intention. This step aligned my design and engineering decisions around a single source of truth.
Before designing anything, I created a PRD with User Stories and Jobs to be Done for tattoo studio owners, tattoo studio staff, and customers. I also outlined requirements, constraints, assumptions, and edge cases to approach designing the app with intention. This step aligned my design and engineering decisions around a single source of truth.
Architecture:
Supabase for auth, database, policies, and serverless functions
Next.js + Vite
Twilio for SMS notifications
Vercel for hosting
Architecture:
Supabase for auth, database, policies, and serverless functions
Next.js + Vite
Twilio for SMS notifications
Vercel for hosting
BUILD
01—Prototyping
01—Prototyping
I started by generating a quick-and-dirty prototype in Lovable that covered key user flows based on the PRD, then cloned it in Cursor.
I started by generating a quick-and-dirty prototype in Lovable that covered key user flows based on the PRD, then cloned it in Cursor.
BUILD
02—Functional Build
02—Functional Build
I then built the app in Cursor, implementing the core functionality, structuring it around real database schemas, and integrating Twilio for SMS notifications.
I then built the app in Cursor, implementing the core functionality, structuring it around real database schemas, and integrating Twilio for SMS notifications.
DESIGN
03—High-Fidelity Design & Branding
03—High-Fidelity Design & Branding
After core functionality was established, I redesigned the entire frontend using Figma MCP:
Created a design system and defined tokens for spacing, color, typography, etc.
Designed branding to distinguish the marketing site and app from generic AI-generated SaaS tools
After core functionality was established, I redesigned the entire frontend using Figma MCP:
Created a design system and defined tokens for spacing, color, typography, etc.
Designed branding to distinguish the marketing site and app from generic AI-generated SaaS tools
TESTING & QA
Making sure the experience accounted for edge cases
Making sure the experience accounted for edge cases
I manually QA’d the entire system:
Empty states
Invalid phone numbers
Re-joining queue
I manually QA’d the entire system:
Empty states
Invalid phone numbers
Re-joining queue
Skipping users
SMS delivery
Staff refresh scenarios
Queue reorder logic
Skipping users
SMS delivery
Staff refresh scenarios
Queue reorder logic
I also used SQL queries to validate real data and ensure accurate system behavior.
I also used SQL queries to validate real data and ensure accurate system behavior.
LAUNCH
Testing market demand after launch
Testing market demand after launch
To test market demand, my intern and I:
Designed a landing page
Set up tracking and conversion goals
Designed and ran Instagram ads targeted at tattoo studios
Measured impressions → clicks → signups
Early results confirmed the same demand patterns surfaced in community research.
To test market demand, my intern and I:
Designed a landing page
Set up tracking and conversion goals
Designed and ran Instagram ads targeted at tattoo studios
Measured impressions → clicks → signups
Early results confirmed the same demand patterns surfaced in community research.
Key Takeaways
Building this micro-SaaS app strengthened my confidence as a design engineer across four areas:
Building this micro-SaaS app strengthened my confidence as a design engineer across four areas:
Design Engineering
By shipping an app with Cursor and Vercel, I built strong mental models of how full-stack systems behave.
By shipping an app with Cursor and Vercel, I built strong mental models of how full-stack systems behave.
Learned relational databases + SQL using Supabase and how schemas shape product constraints
Improved communication with developers by understanding how architecture impacts UX
Learned relational databases + SQL using Supabase and how schemas shape product constraints
Improved communication with developers by understanding how architecture impacts UX
Developer Handoff
Using Figma Dev Mode and Figma MCP helped me see handoff from the engineer’s perspective. Extracting spacing, alignment, and design tokens helped me understand how to design experiences that ship.
Moving between design and development also helped me recognize the limitations of current design handoff tools and where designers can pitch in to provide maximum clarity for engineers.
Using Figma Dev Mode and Figma MCP helped me see handoff from the engineer’s perspective. Extracting spacing, alignment, and design tokens helped me understand how to design experiences that ship.
Moving between design and development also helped me recognize the limitations of current design handoff tools and where designers can pitch in to provide maximum clarity for engineers.
Product Thinking
By wearing multiple hats, I strengthened my ability to think like a product owner.
By wearing multiple hats, I strengthened my ability to think like a product owner.
Integrated PRDs, user stories, and jobs to be done into my design workflow
Learned to define requirements, constraints, and success metrics before designing
Became more systematic and aligned with engineering and business goals
Integrated PRDs, user stories, and jobs to be done into my design workflow
Learned to define requirements, constraints, and success metrics before designing
Became more systematic and aligned with engineering and business goals
Testing
I now proactively design for edge cases by anticipating failure modes early and designing resilient experiences.
I now proactively design for edge cases by anticipating failure modes early and designing resilient experiences.
Conducted QA testing for edge cases, empty states, and data-dependent flows
Stress-tested authentication, submission logic, and database behavior
Conducted QA testing for edge cases, empty states, and data-dependent flows
Stress-tested authentication, submission logic, and database behavior