Mengseang.
← Design/velora-developer-portal
Web Design2025

Velora — Developer Portal Design

Developer portal and documentation UX/UI for an API-first cron automation platform. Clean, technical aesthetic with code-first content, interactive examples, and a distinctive brand voice.

Velora — Developer Portal Design
Client

Velora

Role

Web Designer

Duration

5 weeks

Team

Solo design, 2 developers

Process4 phases
01

Developer Research

Interviewed 8 backend developers about their documentation preferences. Key findings: they scan, don't read; they want copy-pasteable code; and they judge API quality by docs quality within 30 seconds.

02

Information Architecture

Structured docs into 4 tiers: Quick Start (5 min), Guides (task-based), API Reference (endpoint-based), and Concepts (deep dives). Designed a search-first navigation with command palette.

03

Code-First Layout

Designed a split-pane layout: prose on the left, interactive code examples on the right. Code blocks have syntax highlighting, copy buttons, tabbed language variants, and inline API responses.

04

Landing Page

Designed a conversion-focused landing page with a live demo embedded above the fold. Used the same code block aesthetic to immediately communicate the product's developer-first positioning.

Challenges & Solutions

Technical Credibility

Developer audiences are skeptical of marketing language. Used a restrained visual style: monospace accents, terminal-inspired hero, and real code snippets instead of generic illustrations.

Docs Navigation

API references can have 100+ endpoints. Designed a tree navigation with search, breadcrumbs, version switcher, and a 'on this page' table of contents that tracks scroll position.

Outcomes

30+

Doc Pages Templated

40+

API Endpoints Covered

8

Developer Interviews

2.3x

Landing Conversion Lift

Deliverables
Landing PageDocs LayoutAPI ReferenceBrand SystemCode Blocks
Tags
WebDeveloperDocs
Skills & Tools
FigmaWeb DesignDeveloper ExperienceTypographyInformation Architecture