Role Overview

You’ll be the soul of Vibecoderz’ user experience. Every click, scroll, cursor movement, and loading state will carry your signature. You are obsessed with latency, millisecond rendering, and interaction feedback loops. You understand that building for developers isn’t just about function — it’s about crafting a flow where dopamine is released in every interaction.

This role demands a leader who can blend design systems, psychology, and performance engineering into a seamless whole. You’ll partner directly with the CTO, CPO, and VP of Engineering to ensure Vibecoderz feels as natural as Notion, as snappy as Linear, and as magical as V0.app.

Key Responsibilities

1. Experience Architecture
- Define the end-to-end experience principles (speed, flow, clarity, delight).

- Architect a block-based design system that scales across Byte Courses, TutorAgent, and Vibe Browser.

- Set standards for accessibility, motion design, and dopamine-driven micro-interactions.

- Design System Ownership

- Build a design system rooted in typography-first, minimalist aesthetics (Inter/Geist).

- Drive consistency across components (shadcn/ui, Lucide icons, Framer Motion).

- Ensure responsiveness across web and mobile PWA.

- Latency & Flow Optimization

- Collaborate with FE/BE teams to enforce <100ms interaction budgets.

- Define how to handle async dependencies (e.g., Firestore query delay) while keeping users engaged with progressive loading, skeletons, and micro-animations.

- Set rules for “perceived performance” — always keep the user in a flow state.

- AI-First Interactions

- Design interactions for AI-generated artifacts (slides, quizzes, mini-apps) that feel explainable, trustworthy, and editable.

- Invent new UI paradigms for AI/agent collaboration: previews, diffs, accept/reject flows.

- Cross-Functional Leadership





- Partner with CPO/PM on roadmap prioritization to ensure user experience is never compromised.

- Partner with CTO/Engineering on rendering, caching, and optimization decisions.

- Mentor frontend and product designers into a world-class experience team.

- Community Listening

- Synthesize user feedback from Discord, GitHub, and in-product analytics into experience improvements.

- Run live feedback events with developers to test new flows.

- Brand Experience Alignment

- Extend experience principles to marketing, onboarding flows, and community presence.

- Ensure Vibecoderz feels consistent from landing page to certification badge.

Success Metrics

90 Days (Probation):

- Define and ship the first version of the Vibecoderz design system.

- Establish interaction performance budgets (<200ms for key actions).

- Deliver the workspace MVP with dopamine-driven micro-interactions (skeleton loaders, live cursors, smooth palette).

12 Months:

- Achieve full parity with Notion/Linear-level polish.

- Maintain <100ms interaction latency across core flows (chat, block editing, palette).

- Drive >70% developer satisfaction (DSAT) score in experience surveys.

- Build and scale a design/experience team of 5–7 world-class contributors.

Must-Haves

- 10+ years in UX/design leadership roles in product companies (SaaS, dev tools, or productivity platforms).

- Proven track record of delivering real-time, collaborative UIs (blocks, editors, presence).

- Obsession with latency, rendering optimization, and dopamine-driven flows.

- Robust background in typography, motion,



accessibility, and system design.

- Deep empathy for developer workflows and the ability to simplify complexity.

Nice-to-Haves

- Experience at Notion, Linear, Replit, Figma, or other craft-driven products.

- Contributions to open-source UI/UX frameworks (ProseMirror, Slate, CRDTs).

- Exposure to AI-first interfaces (CopilotKit, LangChain front-ends, V0).

- Prior founding design leader or early-stage startup experience.

Tech Stack Visibility

- Frontend: Next.js (React), TypeScript, Tailwind, shadcn/ui, Zustand, React Query

- Realtime: WebSockets (Socket.IO), CRDT/OT frameworks

- Motion: Framer Motion, CSS-first animations

- Icons & Fonts: Lucide, Inter, Geist

- AI Layer: Gemini Pro, Pro Vision, Live API, Hybrid Router, LangSmith/Langfuse

- Backend: FastAPI, Cloud Run, API Gateway

- Data: Firestore, Neo4j Aura, Redis

- Infra: GitHub Actions, Terraform, OpenTelemetry, GCP Trace

Assessment

Objective: Validate ability to design an AI-first workspace experience that balances latency, dopamine, and clarity.

Assessment (2-Part):

1. Design Challenge
- Create a Figma prototype for the “Text → Course → Artifact” flow.

- Must include
- Chat with TutorAgent (real-time stream).

- Artifact insertion (slide deck, quiz, mini-app).

- Dopamine-driven micro-interactions for loading states.

- A command palette with instant actions.

- Experience Case Study (Written)

- Answer: “A Firestore query takes 500ms to return results. How do you design the UI so the user doesn’t feel stuck?”

- Detail how you would apply optimistic UI, skeletons, and progressive rendering.

- Explain how you’d measure success (metrics, analytics).

Deliverables:

- Figma prototype link.

- Short write-up (2–3 pages) describing design decisions, trade-offs, and performance considerations.

📌 Head of Product Design (Founding Team) (Hyderabad)
🏢 Gradientflo Labs
📍 Hyderabad