DCI 691 —
Education By Design

Zero to shipped — a live showcase site built from concept to reality

DCI 691 — Human Creativity x AI in Education challenged students to build real AI-integrated products. My task was to design and launch a website that would showcase the entire class's diverse projects from the ASU AI Carnival event. The core challenge wasn't visual — it was organizational: how do you present macro, meso, and micro-scale projects in one coherent space without losing the user?

Organizing the unorganizable

The AI Carnival featured a wide range of student projects — some big systemic ideas, some focused tools, some micro-interactions. Presenting all of these on a single site without a clear organizational framework would result in a confusing, unusable experience. The challenge was structural before it was visual.

Structure first — design second

Before opening Figma, I mapped the content taxonomy. The key insight was grouping projects by scale — macro (system-level), meso (feature-level), and micro (interaction-level) — giving users a mental model before they even browsed individual projects.

Wireframe → High Fidelity → Iteration

I ran through multiple design cycles — starting with structural wireframes to solve the navigation problem, then moving to high-fidelity to refine visual hierarchy and readability, then iterating based on feedback before the live event.

01

Information Architecture Planning

Mapped out the full content taxonomy — identifying the three project scales (macro, meso, micro) and defining how each type would be represented. This phase was purely structural — no visual decisions yet. The goal was a clear mental model for users arriving at the site for the first time.

02

Wireframing

Created low-fidelity wireframes to define the layout, navigation patterns, and content hierarchy. Tested multiple approaches for how to present the project grid — filtered by scale, categorized by type, or chronological. The filtered grid won for clarity.

03

High-Fidelity Design

Moved into high-fidelity with a dark, editorial aesthetic that felt appropriate for an AI + design course. Designed the homepage, project listing page, and individual project pages — establishing a consistent visual system across all states.

04

Build & Iteration

Built the site using Base44 (AI-assisted web builder), iterating on the design in real-time based on feedback from classmates and the course instructor. Key iterations included improving the project card readability, simplifying the navigation, and adding filtering by project type.

End-to-end ownership

This project required the full design stack — not just visual design, but structural thinking, user research through observation, and hands-on development. It's one of the clearest examples of my ability to take a product from nothing to shipped.

Live at ASU Dreamscape Learn

The site was showcased at the ASU AI Carnival — a public event held at Dreamscape Learn at ASU Tempe. Students, faculty, and guests browsed the site live, exploring projects across the macro, meso, and micro categories. I was on hand to walk visitors through the site and gather live feedback.

What this project proved