Designing AC Design

UX · IA · Design systems · Astro

The portfolio as a product — information architecture, a reusable design system, and production UI in one loop. Proof of hybrid UX and engineering, not just a project gallery.

Explore AC Design System →Back to Work

Overview

Designing AC Design is the meta case study for this site: how I framed the brand, structured content, defined tokens and components, and shipped them in Astro. The living catalog lives on AC Design System; this page tells the why and how.

RoleUX · IA · Front-end

TimelineOngoing · personal brand

PlatformAstro · Tailwind

FocusPortfolio · design system · product thinking

Problem & Opportunity

A portfolio that only shows screenshots under-sells a hybrid designer-engineer. The opportunity was to treat AC Design as a small product: clear IA, a reusable system, and UI that is both the evidence and the delivery.

Starting pointNeed a portfolio that proves hybrid UX + engineering — not just a gallery

ConstraintOne person · limited time · must ship and stay maintainable

OpportunityTreat the site as a product: IA, system, and build in one loop

GoalA living portfolio + reusable AC Design System

Goals & Constraints

Scope stayed tight: ship a credible site and a system others (and future me) can reuse — without boiling the ocean on day one.

Prove the hybridShow research → IA → UI → production code in one place.

Ship a systemTokens and components that power this site and client work (e.g. CCES).

Stay scannableRecruiter-friendly case studies without burying the brand or process.

Solo designer-developer — no separate design ops team
Must reuse patterns across portfolio and product work
Accessible hierarchy and focus states by default
Decisions that translate cleanly Figma → Astro / Tailwind

Process

Structure first, then tokens, then components in code. Each step left an artifact the next step could trust.

IA & content modelNav, page types, and what belongs on Work vs Design System vs About.

WireframesLow-fi structure for home, work index, case studies, and system docs.

Tokens & brandColour, type, space — locked before polishing every screen.

Figma → buildComponents implemented as living UI on the site, not a static style PDF.

Placeholder — IA diagram / sitemap

Placeholder — Wireframe strip (home · work · case · system)

Key decisions

A few choices that shaped both the site and the system — worth calling out for a recruiter scan, not a full design-ops dump.

Green primary + ink navBrand signal that carries across hero, CTAs, and system docs without leaning on trendy purple defaults.

Type scale with purposeDisplay through caption — hierarchy that works for marketing pages and dense case studies.

System page ≠ case studyNav hosts the living catalog; Work hosts the narrative of how it was designed.

Case study patternShared section rhythm (overview → problem → process → outcome) so projects compare cleanly.

Reuse over one-offsButtons, alerts, cards, and nav icons stay token-driven so CCES and portfolio stay aligned.

Iterations

Early frames focused on layout and content types; later passes locked brand, type, and component behaviour in the build.

Before — structure / early framesPlaceholder — low-fi or early hi-fi

After — shipped UIPlaceholder — production screenshots

Placeholder — iteration strip (optional carousel)

Outcome

AC Design is both the portfolio and the system that powers it — a clearer story for hiring managers and a reusable foundation for product work.

Living systemTokens and components documented at /design-system and used on real pages.

Faster iterationNew case studies and client UI inherit the same foundations.

Clearer storyThe portfolio itself demonstrates product thinking — not just screenshots.

Biggest lesson: separate the catalog from the narrative — the system page shows what exists; the case study shows why it exists.

Explore the live system →

Next steps

Fill process artifacts (IA diagram, wireframe strips, before/after)
Tighten empty / loading / error patterns shown in the system docs
Extend components as SwiftAir / CCES secondary flows need them
Polish motion and focus states across key journeys

More details coming soon