Design & Leadership

Dataing

July 2023 - May 2025

Note: These are one-half of my responsibilities at Dataing. The companion article on my engineering responsibilities is still being developed.

Launched: Apple App Store, April 2025

1. Leadership & Mentorship
2. iOS App
3. Marketing Design
4. Design System
5. Figma2Swift
6. MVP
7. Waitlist
8. Website

Dataing is an AI matchmaking service, with a focus on dating. Connect your social media to let Cupid AI analyze your social media and match you with people you’ll find interesting.

I cofounded the company with CEO Mark Kilaghbian.

I both designed & developed the initial webapp MVP; developed our v1 backend dashboard; developed our design system; developed the Waitlist webapp; spearheaded mobile design & frontend development; and hired, trained, & led intern designers & engineers.

I organized & coordinated our team during the early stages of the company and led the design team through the development of the iOS app. Using classic Agile practices and armed with a 4-tier Jira board (To Do, In Progress, QA, Done), I coordinated the engineering team’s work and directed the design team’s work. I also coordinated with the marketing team to ensure brand consistency across socials.

I developed a Figma plugin for exporting designs as SwiftUI code—without AI translation. A custom parser was built specifically for our design system. Much of the core SwiftUI standard is implemented. Designs are fully pixel & layout accurate from Figma -> SwiftUI.

During 2024, I side-hustled upwards of 40-80 hours/week to afford to work on this project. This takes a toll on creative energy & eats into creative time. I feel this project represents my perseverance and ability to stick through tough situations while performing my leadership & creative duties accordingly.

Key responsibilities:

• Chief Product Officer
• Head of Product
• Head of Design
• Idea-to-product
• Directed UI design, iOS frontend, & marketing design teams
• Directed & led design team
• Trained design interns
• Mentored junior engineers
• Owned our Figma & Notion
• Designed the logo, wordmark, & Cupid Bot character
• Designed & implemented our design system
• Designed marketing/branding assets
• Built a Figma-to-SwiftUI export tool (custom parser, non-AI)
• Developed and shipped web MVP, Waitlist, Website, & iOS beta
• Shaped brand identity and visual direction
• Created internal tools to accelerate design-engineering workflow
• Created design systems; marketing, branding assets; pitch decks; character design

Tools used:

• VS Code
• Xcode
• Figma
• Sketch (Initial Mockups)
• Adobe Creative Cloud
• Notion
• Jira (Dev + Design Teams)
• Trello (Marketing Team)
• Google Docs
• Google Sheets

Leadership & Mentorship

My goal as a leader is to elevate my team, smartly delegate according to core competencies, provide immediate support, and remove friction.

I develop & implement systems so my team has a collective understanding of their individual responsibilities against our overall objectives.

My purpose is to maximize human capital efficiency & maintain quality output.

On a human level, I want to make sure everyone on my team feels seen, and truly valued for their work.

• Owned our Figma. Organization was crucial. I created systems for organizing components, tokens, and other design assets. Made marketing, UI assets exportable and easibly accessible org-wide. Categorized assets into separate libraries, design files, and folders for a more intuitive, organized experience.

• Owned our Notion, our knowledgebase hub. It contained onboarding for design & marketing; guides (setup, maintenance) for various platforms (Figma, OpenAI, Azure, Google Cloud); and other resources. All fully-formatted, organized, & beautiful.

• 100% intern retention rate on $0 budget. All 7 design interns (UI & marketing, 1 frontend) completed their full 6-month term, with several choosing to extend their internship. Intern attendance and alma-maters include USC, Dartmouth, NYU, & UCLA.

• Delegated tasks & ownership of key features. I believe fostering an environment of trust builds confidence amongst team members.

• I made myself available 24/7–including weekends–to answer questions and support interns on their duties.

• I champion a culture of accountability, self-improvement, and innovative-thinking with hands-on mentorship.

• Provided cross-discipline growth sessions that I tailored to individual intern paths. I enjoyed translating my skills & knowledge in a way that complemented an interns current abilities. I wanted them to stay challenged & confident, while continuing to grow during their time with us.

• Developed case studies for interns: physical properties of light & glass; gradient composition/blending & color spaces; character design basics; Figma advanced techniques & social content composition; “design-a-thon” weekend challenge to research an app’s major feature (aka TikTok’s scrolling video feed), produce design specifications for the feature, then produce a design based on specifications from the write-up.

• Interviewed dozens of UI designers, frontend engineers to determine their apptitude. I hand-screened hundreds of potential candidates’ resumes & portfolios before determining a cohort to move forward. Traits such as collaborative ability (focus on distributed teams as Dataing was remote); conceptual process & strong principles in innovative thinking; design process & tooling; decisiveness and previous level of project-ownership; and a style that aligned with our branding.

• Hiring was a fun challenge. I feel the design landscape has changed since I graduated. I found the focus is placed heavily on research and process/execution, rather than raw design or technical skills. Most every candidate I spoke with was both a joy to get to know and a talented designer in their own right. I feel very positive about the talent pool, as well as my ability to recognize great hires after this experience.

• Developed a suite of technical flow-chart elements to effectively communicate user flows, current development progress status, and future goals/sprints in a single visual graph format consumable by design, engineering, marketing, & stakeholders alike. I wanted a way to bridge our increasing responsibilities and distributed tasks in an intuitive, easily digestible format for anyone on the team to enrich themselves.

iOS App

• Native SwiftUI frontend.
• Grew the team to 2 UI design interns, 1 UX research/concept intern, 1 SwiftUI frontend intern.
• Directed design team and collaborated with development team to realize the product vision.
• Defined design tokens, abstracted key UI patterns into a highly reusable design system.
• Presented product demos & progress updates to stakeholders. Produced decks & media for presentation.
• Organized cross-functional updates to align the entire team during weekly all-hands meetings.
• Aligned the team around weekly sprint goals and product priorities using Jira.
• Ran weekly meetings to align engineering and design teams. Spearheaded feature clarity and smooth handoffs.
• Ran biweekly design meetings to align design team on objectives, offer guidance on tasks, and provide mentoring to aid in increasing our interns’ abilities overall.
• Spearheaded UX research, using phone screenshots & Mobbin to document competition.
• Produced internal research documents detailing competitor features for the top-6 dating apps, with & without advertised AI-features (at the time).
• Engaged students on-campus (UCLA, USC, UCSD) to gauge their dating app familiarity, experience dating in-real life, their goals in dating & lifestyle, as well as their general requests to improve the dating scene.
• Coordinated language & messaging with marketing team (Figma).
• Led initiatives to produce several fully-interactive Figma prototypes. Full-app prototypes to test flows, as well as single/multi-feature to test interactivity. Both solo & team-produced prototypes.

Marketing Design

• Collaborated with executive team to produce our pitch deck. Landed several key funding meetings. Many comments surrounded the engaging visuals & message clarity. I developed a story for the deck: our company from inception, to launch, to growth & beyond. Infusing a handful of styles from flat illustrations to modern material-based 3D fused with glassmorphism to delight the viewer and enhance the usual pitch deck experience. “I wanted to keep going just to see the next slide.”
• Produced a 7-page Dataing Brand Book. Included color palette, fonts, type guidelines, usage rules, messaging & tone, and examples/templates for digital content.
• Marketing guidelines were designed to be as simple as possible to implement. I wanted a system that was hard to get wrong. I landed on a system with fractional spacing & sizing. The less bullet points, the better.
• Produced color palette, font, & type presets for Figma, Photoshop, Illustrator, & Canva. This to ensure our system was actually being used.
• Collaborated with marketing & design teams to ensure brand consistency across socials. Implemented a multi-party review pipeline for ensuring our brand tone & visual identity remained consistent throughout each post.
• Audited assets & content for visual and messaging consistency, providing refinements to maintain brand integrity.

Design System

• Developed a primitive & component-based architecture for our design system from scratch. Scalable & totally flexible.
• Redefined the traditional token-based approach for a new primitives-based approach to enable a simpler, more intuitive way of inheritance for reusable design properties.
• Defined hundreds of primitives in Figma across all token categories: color, sizing, spacing, effects, & typography. Organized into separate libraries consumable by the design team. Libraries inherited other libraries to build a flexible & scalable system.
• Primitive libraries were used to build a collection of intermediate components, called modules, that lack any functionality. Modules group primitives into a layout. Think a profile photo container with a default icon.
• Modules & primitive libraries were used to build out the component suite. Components group together modules and primitives to include functionality and interactivity. Think a button that displays your profile photo and opens a dropdown when you tap it.
• Defined a rigid, yet expressive module structure–which extends to a rigid, yet expressive component structure. A completed component design structure will mirror the architecture of the component implementation in code–a 100% accurate representation of the component as a design, without sacrificing a designer’s flexibility.
• The design system was used in designing & developing all components inside the production Dataing app.
• Fully automated the translation of our design system from Figma to code by developing our Figma2Swift generator.

Figma2Swift

• I built a Figma plugin that reads the Figma API tree and renders to a SwiftUI component structure.
• Facilitates rapid, pixel-and-layout-perfect translations of our design system.
• The parser design is directly influenced by component structure defined in the design system.
• 100% of the initial app frontend was generated from our design system.
• Components were generated inside Figma using the Figma2Swift plugin I developed–zero AI involved.
• Implementation with our backend services took 3 days.
• Components are fully reusable.
• 100% pixel accuracy translating from Figma.
• 100% layout accuracy translating from Figma. All SwiftUI stack types and alignments are fully supported.

MVP

• 2 months idea-to-product
• Designed & developed front-end using React & Tailwind.
• There are no high-quality MVP design fragments; the MVP was designed and developed simultaneously.
• OpenAI API, Azure Services hosted deployment, Vercel hosted frontend.
• Sleek, native “Apple”-look & feel.
• Influences from glassmorphism.
• When I design interfaces, I imagine elements in the physical-space, with material properties.
• A glass surface with an LED-strip lining its outer borders. When you interact, the LEDs light-up.
• Black-ink etched lettering on clear-coated acrylic.
• A foggy pane of frosted glass.
• Handwritten swipe-gestures for a native-feeling experience on mobile; swipe to delete threads, swipe the sidebar open/closed, swipe popup sheets closed, etc.
• GPT-based AI chatbot w/ rooms/threads; fully-featured AI chatbot (regenerate message, edit previous messages, etc.); message streaming.
• “Data cards” visually represent items Cupid AI has analyzed from your social media.
• Mobile-first design; fully responsive; all features work across mobile & desktop.
• Custom react-spring animations.

Waitlist

• 3 weeks idea-to-product.
• Check it out at app.dataing.io. You need to sign up to access the Waitlist product.
• 500 signups 1 month post-launch.
• Repurposed tech from MVP including Data cards, backend services, and visual styling.
• Referral code generator; users can generate referral codes with custom URL links that they can share. Users can view the amount of signups created using their referral code.
• Simple, single column app design.
• Custom react-spring animations.
• Coordinated language & messaging of FAQ section with marketing team.

Website

• 2 days idea-to-product.
• Check it out at dataing.io.
• Quick-and-dirty landing page & contact page.
• Custom GLSL shader maps luminosity values to a color set & a character set for an iridescent, binary “matrix”-effect. The shader is applied to a <video> element.
• Custom react-spring animations.
• Coordinated language & messaging with marketing team.