Asgard AI
Defining interaction patterns and a scalable design system for an AI-native enterprise platform, making complex workflow logic feel manageable.
Core Concept
A design system and interaction model built from scratch for an AI-native enterprise workflow builder — making complex agent configuration legible, consistent, and implementable across a fast-moving product team.
My Role
- End-to-end product designIA, flows, screens, and states
- Design systemtokens, components, dark-mode foundation
- Node-based builder UXcanvas, inspector panels, and handoff specs
- Light marketing supportproduct visuals for social and web
Overview
An AI-native platform for enterprise workflow
Asgard AI helps Taiwanese enterprises adopt AI workflows through chatbots, internal search, and automation tools. I designed the product UI foundation for its node-based workflow builder, translating early feature wireframes into a scalable design system, interaction model, and engineering-ready specifications.
The Problem
Non-technical operators wanted to adopt AI workflows but lacked a clear path to configure, connect, and trust AI systems. Internally, rough wireframes with no shared UI rules caused rework and slowed alignment between product, design, and engineering.
The Challenge
Define how the product behaves, not just what it does
The product direction existed at a feature level, but interaction rules did not. The team knew what the platform needed to do — not yet how each function should behave on screen.
Problem Statement
How might we create a clear workflow-builder experience that helps non-technical operators understand AI configuration, while giving engineers consistent rules for states, layout, and implementation?
- A coherent IA and interaction model so operators understood what to do next when building workflows.
- Clear component and system states so engineering could implement predictable behaviours across default, hover, selected, dragging, disabled, error, and loading.
- Layout and responsive constraints so dense configurations stayed readable and implementation drift was reduced.
Research & Context
Benchmarking AI builders to define product rules
I spent the first two weeks benchmarking adjacent tools — Dify, Langflow, and n8n — to understand how complex configuration flows are structured, then translated findings into product-specific rules.
Key insights
- Operators need guided confidence. Each next step must be visible before asking users to configure complex AI logic.
- AI workflows need explicit states. Loading, streaming, validation, and errors are core to the experience, not edge cases.
- Engineering handoff needed rules, not only screens. Node states, canvas behaviour, and layout constraints had to be documented clearly to reduce rebuilds.
- Dark mode needed to be foundational. Tokens were built around dark mode from day one.
Design Strategy
Three principles that guided every decision
- Guide before configuring. Make the next step clear before asking users to set up complex AI logic.
- Make system behaviour visible. Loading, failing, retrying, and partial results must be surfaced — not hidden behind static screens.
- Design for implementation clarity. Every UI decision becomes a reusable rule that PM, design, and engineering can align on.
From Material Design defaults to a purpose-built AI design language
Design Process
Foundation first, then the builder experience
1. UI foundation
Dark-first colour, typography, spacing, elevation, and motion rules that could scale across the builder, chatbot, and supporting screens.
Dark-first token architecture: palette, type scale, elevation, motion
2. Component system
Primitives (buttons, inputs, tags, feedback states) composed into product-specific patterns: node cards, connectors, inspector sections, and modal flows — each with annotated states and handoff notes.
3. Builder interaction model
Defined the full node lifecycle — adding, configuring, connecting, testing, and recovering from errors — with documented states, validation rules, and layout constraints for engineering handoff.
Outcomes
A system that shipped
- Clearer workflow-building experience for non-technical operators.
- AI configuration screens that are easier to scan, configure, and recover from.
- Shared source of truth for PM, design, and engineering — reducing ambiguity around states, layout, and interaction rules.
- Reusable patterns that could scale across future modules.
Live at asgard-ai.com.
Reflection
What I'd do differently
Aligning on product logic early is just as important as polishing the UI. The biggest improvement I'd make next time is syncing sooner with PM and product owner on states, rules, and edge cases before exploring UI solutions — when intent is shared upfront, handoff is smoother and the interface becomes more predictable.
NDA
Portions remain under NDA. For deeper context, get in touch.