VAIN
Building long-lasting tracking habits via low-friction mechanics, adaptive modular IA, and targeted engagement loops
Role
Product Designer
Project Focus
0–1 iOS Design
Duration
Feb 2026 – Jun 2026
Current Status
Under App store review · 320+ beta waitlist users
Project Overview
Skincare is opaque because skin changes take time. Complex biology, external factors, and inconsistent tracking leaving users guessing. VAIN solves this by unifying customizable assessment modules, wearable metrics, progress photos, and AI insights to help people track and understand exactly how, why, and what to do for their skin.
Impact/Result
Market Opportunity
The growing need for data-driven skincare
We track sleep and workouts digitally, so why is skin health stuck in guesswork? Digging into 30+ market reports, 26 surveys, 10 customer interviews, and 20+ competitive products revealed a clear consensus: people need a simple, low-friction way to turn skin tracking into a lasting habit.
User Groups and Pain Points
Users want to make informed skincare decisions but lack daily tracking data
From customer discovery interviews (ages 18–65, tech-savvy skincare users) alongside supporting survey data, the research revealed three key user archetypes to directly shape our product interaction and feature strategy.
Design Approach
3 strategic goals behind every design decision to drive effortless tracking
As I designed each feature and interaction, I continually referred back to three strategic goals identified through user research to ensure every design decision supported the overall product experience.
Internal A/B Testing Validation
Participants preferred progressive & customized logging
High-quality data is the foundation of meaningful AI recommendations. Before launch, I ran an internal A/B prototype test comparing conventional linear onboarding with a modular, bite-sized assessment. In TestFlight and Figma prototypes, stakeholders reported 30% higher satisfaction with the modular experience.
Product Ecosystem & Broader User Experience
Beyond data collection: turning tracking into long-term value
Collecting skin data was just step one. To make it truly useful, I focused on two goals: helping users act on their insights, and giving them clear reasons to stay engaged.
Building trust with clear data, manual controls, and explainable AI
Driving long-term retention with streak tracking, contests, and community
Handoff & Specs
Mapping flows, states, and edge cases eliminates engineering guesswork
To eliminate guesswork and give engineers full context, I built a comprehensive component specification for the Symptom daily check-in card. It maps the end-to-end user flow, interactive component states, and edge cases for zero-friction handoff.
Current Prototype
Measuring Success After Soft Launch
Defining success metrics for the module approach
With 320+ beta waitlist signups and our App Store review underway, I’m thrilled to see VAIN go live! To measure the impact of our bite-sized, customizable approach, I defined the following core post-launch metrics after launch.
Assessment completion rate
Target: 70–80%
Measures the percentage of users who complete their module assessments each day.
Assessment completion time
Target: < 1 minute per module
Measures completion of personalized skin symptom assessments.
Photo Upload Rate
Target: 70%+
Measures how many users upload an initial skin photo.
Daily Check-in Rate
Target: ≥5 check-ins/week
Measures how often users complete daily skin tracking.
Reflection
What I accomplished
Working closely with the CEO and CTO expanded my exposure to product development beyond designing the app and user experience. I actively contributed to product roadmap planning, feature prioritization, health assessment strategy, product positioning, and an AI-assisted design-to-code workflow, while gaining firsthand exposure to partnership discussions and launch planning.
1. 0→1 product strategy & feature prioritization
Working closely with the CEO and CTO, I helped prioritize the product roadmap by defining what data to collect, when to collect it, how to structure the MVP experience, and QA audit from onboarding and health tracking to insights and future community features.
2. Mentoring & leadership
Working alongside a design intern taught me how to break down projects, provide feedback, and maintain design consistency across multiple workstreams. By dividing responsibilities between marketing and product experiences, I gained a deeper appreciation for collaboration, delegation, and supporting the growth of other designers.
3. Quality assurance and design review
Conducted a comprehensive QA audit before launch, identifying inconsistencies, edge cases, and usability issues to improve overall product quality.
AI-assisted design-to-code workflow
As a startup, speed was critical. After noticing repeated back-and-forth between Design, Leadership, and Engineering, I explored an AI-assisted design-to-code workflow anchored in strict repository governance to accelerate iteration across different stages of product development from rapid concept exploration to production-ready implementation with Cursor.
1. Binding ontology & principles for context alignment
Before generating code, I established principles.md and ontology.md in the codebase to serve as the single source of truth for all AI agents. By defining protected UI terms, system behaviors, and operational boundaries up front, I eliminated ambiguity and prevented hallucinated assumptions during cross-functional alignment with the CEO and engineering.
2. Cursor-driven implementation with governance guardrails
With clear design specs and ontology-backed prompts, I leveraged Cursor to translate Figma screen modules into production-ready front-end code. Cursor operated directly within our established repository guidelines—reading structure, verifying state, and executing modular edits—which minimized back-and-forth, reduced manual coding overhead, and drastically shortened the feedback loop from design to implementation.
3. Interaction fine-tuning & logic refinement via Claude Code
Beyond static layouts, I leveraged Claude Code in the local terminal to fine-tune component interactions, dynamic state logic, and UI micro-animations. By translating Figma interaction specs directly into functional front-end logic, this workflow eliminated repetitive front-end work and shortened the feedback loop between design and engineering during MVP development.
