Project Metadata
- Role: Lead Product Designer & UI Engineer
- Timeline: High-Velocity Sprint (Driven by upfront system mapping and AI-assisted implementation)
- Platform: Responsive Web / Developer Portal
- Tech Stack: Figma • Claude Code AI • Semantic HTML5 / Modular CSS
- Core Focus: Developer Experience (DX), Conversion Optimization, High-Velocity Execution
The Business & User Challenge
Golfbert provides powerful golf mapping and scorecard data APIs, but the legacy onboarding experience created unnecessary friction for prospective subscribers.
- The Commercial Stake: New subscribers faced drop-offs between discovering the API and successfully activating their API keys to make their first call, directly impacting recurring subscription revenue.
- The Support Burden: The engineering support team was bogged down handling repetitive, common integration questions that should have been easily self-serviced.
- The Core Objective: Drastically compress the "time-to-first-API-call" by streamlining subscription activation, while elevating self-service technical documentation to proactively answer developer questions.
Strategic Architecture: Documentation Up Front
Developers want code, context, and immediate validation. The redesign completely overhauled the layout hierarchy of the developer portal to match developer mental models.
1. FRICTIONLESS ACTIVATION FUNNEL
- The Solution: Re-architected an unambiguous, guided onboarding path that allows developers to authenticate, select a tier, and generate active API credentials with minimal clicks.
2. DOCUMENTATION AS A LANDING PAGE FEATURE
- The Solution: Positioned comprehensive technical Guides directly up front on the homepage. Common developer blockers—such as authentication headers, endpoint pagination, and error handling schemas—are now instantly accessible without digging through multi-level navigation.
Technical Execution: System Rules to Code via AI
To achieve extreme speed-to-market without compromising design depth, the execution relied on a rigorous, systems-first workflow rather than a long, drawn-out timeline:
- Upfront Tokenization (Figma): Defined strict global design tokens, semantic styles, and responsive layout grids inside Figma to anchor the entire product identity before touching code.
- AI-Augmented Implementation: Leveraged Claude Code AI to instantly convert the layout logic into highly semantic web code. By feeding the AI our pre-defined global design tokens, the generated CSS and component state logic remained perfectly modular, clean, and bug-free.
Capabilities & Deliverables Matrix
| Product Lifecycle Phase | Applied Deliverables & Deliveries |
|---|---|
| Discovery & DX Audit | Developer Persona Analysis • API Documentation Heuristic Evaluation |
| Information Architecture | Overhauled Navigation Hierarchy • Documentation Categorization Strategy |
| UI Design & Tokens | Contextual Code-Snippet Componentry • Global Style System (Figma) |
| Production Engineering | Claude Code AI Prompt Engineering • Clean CSS Variables/Architecture |
Measurable Business Impact
- Accelerated Onboarding: Compressed the user journey from landing to active API key generation.
- Reduced Support Overhead: Placing high-value Guides on the homepage deflected repetitive setup questions, freeing up engineering resources.
- Extreme Delivery Velocity: Utilizing Claude Code paired with global styles shaved weeks off the traditional front-end cycle, proving that systematic preparation yields rapid deployment.