The Problem
Alpamayo Intelligence is the operational backbone for managing organizations, fleet devices, deployments, and tasks across Alpamayo's customer network. As the platform grew, the UI accumulated friction: deployment deduplication was missing, drift surfacing was unclear, node detail was fragmented, toolbar and filter patterns were inconsistent, and the information architecture didn't match how operators actually work. At the same time, there was no shared visual language — no design system, no component standards — making every new UI piece a fresh decision.
Constraints
- Swiss engineering standards — every UI change reviewed against operational accuracy, not just aesthetics
- Fleet management is the primary use case — changes must map to how operators track versions, state, and drift across devices
- PrimeVue + Tailwind CSS + Nuxt 4 stack — component choices constrained to the existing ecosystem
- Design system must live in-app at /design — public, no auth, with a live token customizer and AI export
- 32 Alp* primitives must be severity-driven — consistent vocabulary across success, warning, danger, info, help, neutral
- MS Teams and MS Graph integration — notification and identity infrastructure already in place
Our Approach
Conducted a structured UI/UX audit yielding 32 findings organized into 6 themes: drift surfacing (A), deployment deduplication (B), node detail tabs (C), toolbar and filters with saved views (D), information design (E), and action affordances (F). Each finding was severity-ranked and shipped as a focused change set, keeping the working platform stable throughout. Built the design system route at /design — a public, no-auth page with a live token customizer (primary, accent, semantic, background, logo), a component showcase, sample pages, and a 'Copy for AI' button that exports a ~600-line DESIGN.md system prompt covering the full stack constraints, token system, Volt component inventory, Alp* primitive inventory, 8 composition patterns, domain glossary, and do/don't rules. Built 32 Alp* severity-driven primitives — StatusPill, StatusDot, Tag, ProgressBar, Avatar, Eyebrow, ColorPicker, PresetCard, KpiCard, and more — covering the recurring visual vocabulary of the platform.
Gallery
Outcome
- Fleet management platform delivering version tracking, telemetry, device state, notifications, and event streams for Alpamayo's industrial IoT customer network
- 32 UI/UX findings shipped across 6 themes — drift surfacing, deployment deduplication, node detail tabs, toolbar/filters with saved views, information design, action affordances
- Design system live at /design with live token customizer and 'Copy for AI' DESIGN.md export (~600 lines)
- 32 Alp* severity-driven primitives adopted across the platform
Why this matters
Fleet management is where Alpamayo's operational credibility lives — operators need to see which devices are drifting, which deployments are stale, and what actions are available, all at a glance. Systematic UI/UX work, organized as audited findings rather than scattered improvements, means every change maps to a real operator pain point and survives Swiss review. The design system ensures that as the platform grows, new surfaces don't fragment the visual language built so far.