Lumen AI

Project Overview

LumenAI is an AI agent marketplace designed for engineering and product teams — a platform to discover, evaluate, deploy, and monitor specialised AI agents across research, development, analytics, writing, support, and more. The platform targets teams that move fast and need trustworthy infrastructure — not a toy.

The challenge: the AI tooling space is overwhelmingly noisy. Most marketplaces either bury critical technical specs behind sales friction, or bury users in capability lists without helping them evaluate fit. The design had to bridge that gap — giving teams enough technical depth (latency, uptime, pricing model, protocol, auth) alongside human-readable value propositions to make fast, confident deploy decisions.

Design Challenges

✔️ Designing agent cards that surfaced the right signal density — category, verification status, pricing, and rating — without overwhelming browsing users.
✔️ Building an agent detail page that balanced Overview, API / Quickstart, Reviews, and Performance tabs for both technical and non-technical decision-makers.
✔️ Communicating trust indicators (SOC 2, GDPR, HIPAA, uptime SLA, success rate) at the point of commitment — just before the "Deploy Agent" action.
✔️ Creating a dark-mode visual system that felt premium and technical without sacrificing readability for dense data (latency, token limits, supported languages).

Design Process

1. Research: Reviewed competitor developer marketplaces (RapidAPI, Hugging Face); identified that missing value proposition clarity was a key reason users skipped agents.
2. Structure: Mapped core user flows — browse → evaluate → deploy — and stripped unnecessary "request demo" gates for self-serve agents.
3. Marketplace Home: Designed "Trending This Week" and "Browse by Category" sections with 2-level navigation (primary categories + sub-categories visible on hover).
4. Agent Detail Page: Built a tabbed layout (Overview / API / Reviews / Performance) that let power users deep-dive without overwhelming casual evaluators.
5. Visual System: Dark navy backgrounds with selective yellow/amber accent for pricing and CTAs — creating a focused, high-signal environment that minimised distraction.
6. Validation: Checked key screens on real devices; confirmed touch targets, text sizing, and data density worked in practice — not just in Figma at 1x.

Outcome

The design scales cleanly as new agents and categories are added — no layout rework required. All components are production-ready with named layers, Auto Layout, and an 8px grid enforced throughout.