UI / UX Design Systems Enterprise AI Product

App Orchid: scaling a design system behind an enterprise AI platform

Design work across App Orchid's product surfaces — dashboards, a natural-language "Ask" assistant, and the underlying component system that keeps both consistent in light and dark mode.

Client
App Orchid — Enterprise AI
Scope
Dashboard UI, AI assistant UX, design system, QA
My role
User Experience Designer (Oct 2024 – Present)
Methods
Componentization, FigJam QA, theming

01 — Overview

Turning data into insight, in plain language

App Orchid is an enterprise AI platform built around a simple premise: people shouldn't need to write a query to understand their own data. The product spans vertical dashboards (like their Utilities Suite) and a conversational "Ask" assistant, both of which needed a design system robust enough to hold up across dozens of components, two color modes, and a fast-moving engineering team.

02 — Product surfaces

Dashboards that explain themselves

The Utilities Suite dashboard interprets a plain-language question back to the user as a set of filters — "Show all meters with material plastic, manufacturer is not Neptune" — before answering it, so people can trust and correct the system's read of their question. Below that, a plain-English summary sits above the charts themselves, translating the numbers before the user has to.

App Orchid Utilities Suite dashboard showing a natural-language query interpretation banner, summary insights, and a grid of revenue and inventory charts
The Utilities Suite dashboard: query interpretation banner, plain-language summary, and KPI/chart cards.

The "Ask" assistant extends the same idea into a full conversational interface — answering a question directly, then showing its work. Every answer surfaces its own caveats (excluded records, dropped nulls) inline, with the generated SQL available on request for anyone who wants to verify it.

App Orchid Ask assistant screen showing a natural-language answer, a bar chart of regional performance, a data caveat, and a Show Generated SQL toggle
The Ask assistant: a direct answer, a supporting chart, transparent data caveats, and a suggested follow-up question.

03 — Design system

A component system built for handoff

With multiple product surfaces pulling from the same library, components needed to be specified once and trusted everywhere. Buttons and inputs were fully systemized — every variant, size, and state documented with usage guidance, so engineering could implement without guessing and design could extend without drift.

Buttons

Primary, Secondary, Tertiary, and Destructive variants, each in three sizes and four states (Default, Hover, Pressed, Disabled), with icon-before/icon-after configurations specified for every combination.

Inputs

Basic, Dropdown, and Multiline input boxes across every state (Active, Error, Warning, Success, Read Only, Disabled), plus compound patterns — Input Row, Input Table, Ghost Box, and Repeater — for dynamic forms.

App Orchid design system button specification showing Primary, Secondary, Tertiary, and Destructive variants across small, medium, and large sizes and all states
Button component spec: every variant × size × state, documented with usage notes on when to use each.
App Orchid design system input specification showing basic, dropdown, and multiline input boxes, input rows, input tables, and ghost box placeholder components
Input component spec: basic, dropdown, and multiline boxes, plus row/table/repeater patterns for forms.

04 — QA & collaboration

Bug triage, right on top of the design

Rather than logging issues in a separate tracker disconnected from the screens themselves, QA happened directly in FigJam — bugs and improvements pinned as color-coded stickies straight onto the flows, categorized by area (Text, Layout, Components) so the team could see exactly where problems clustered before a release.

FigJam UX QA board with bug and improvement stickies annotated directly onto UI screens, organized into Text, Layout, and Components sections
UX QA board: bugs (red) and improvements (blue) annotated directly on the affected screens, grouped by category.

05 — Testing across themes

Every component, twice

Because the product needed to work in both light and dark mode, every container and component in the system was tested side by side in both themes — not just spot-checked, but laid out as a full matrix so contrast, spacing, and state changes could be reviewed at a glance, with the team collaborating live in the file.

FigJam board testing the design system's containers and components side by side in light and dark themes, with multiplayer collaboration cursors visible
Design system testing: light and dark variants of every container, reviewed together with the team live in FigJam.

06 — Light and dark, end to end

Consistency from marketing site to product

The same theming discipline carried through to App Orchid's public site — documentation, blog, and forum all rebuilt to hold up in both light and dark mode, using the same color and elevation logic as the product itself.

App Orchid marketing and documentation homepage in light mode
Light mode
App Orchid marketing and documentation homepage in dark mode
Dark mode

07 — Client work & impact

Shipping across a growing client roster

The design system and workflow above weren't theoretical — they held up across real client engagements, each with its own scale and constraints.

Fidelity

Designed 25 custom apps and built the complete visual design and new feature UI for Contract AI, a separate Fidelity product, from the ground up. Consistently high-quality delivery led Fidelity to expand its scope of work with App Orchid.

GSEC & APM

Additional enterprise clients praised the work for making their product UI more consistent and modern, following the same systemized component approach.

Speed & process

Increased UI production speed to roughly half a day per design, and cut AI-assisted theme generation time from a full day down to about an hour. Built and maintained a Kanban board to track design system development across a 2-designer team.

QA at scale

Ran a structured UX QA audit — 75 issues segmented into UI, UX, spelling, and component categories — plus dashboard testing across 2 client engagements, surfacing 40+ issues on one dashboard and 20–30 on another before release.