I designed and shipped a conference-neutral tutorial site that helps ICML attendees quickly grasp three pillars—Generalization, Efficiency, and Controllability—and jump straight to slides, videos, and code. The work translates dense research into a scan-friendly structure with clear navigation, responsive layout, and accessible interaction patterns.
Design Problem
Existing materials (proposal, papers, scattered links) were hard to navigate for newcomers and time-boxed attendees. Users needed a concise orientation layer, consistent structure across the three parts, and at-point-of-need access to artifacts—without school-specific branding and without reading long PDFs first.
Research & Strategy
Grounding in content. I began by reading the tutorial proposal and key papers (generalization, efficiency, controllability) and watching recommended tutorials to internalize how diffusion models work. I distilled each part into plain-language notes and identified one “anchor” figure per part (e.g., RP/GL, sampler convergence, low-rank controllability) to communicate the core idea at a glance.
Mapping the User Experience. To ensure a clear, streamlined, and stress-free user experience, I first constructed a detailed flowmap/sitemap. This architecture and interaction design artifact was crucial for defining the site's taxonomy and structure, visualizing key user movement pathways and verifying that all critical content areas—such were efficiently accessible from the main content sections.
Presentation choices through iteration. I tested alternative ways to sequence concepts and figures (landing overview → part pages → resources) and ran regular check-ins with Prof. Qu to validate which images, captions, and copy length best supported quick comprehension for ICML attendees.
Learning-by-building with mentorship. This was my first time coding a website and using GitHub. I set up a minimal HTML/CSS/JS scaffold and deployed via GitHub Pages with hands-on help from PhD collaborators (Siyi, Huijie) for repo setup, asset optimization, and anchor navigation. Their feedback also informed accessibility tweaks (contrast, spacing) and responsive breakpoints.
System Development
Web Structure & Prototype (Figma)
- Built a component-based, responsive prototype (sidebar nav, schedule, per-section resources) with interactive hover/active states and anchor scroll.
- Explored three navigation variants (fixed sidebar, slide-out drawer, icon rail); selected fixed sidebar for constant orientation and quick jumps.
- Authored concise landing copy + one key figure per part to support progressive disclosure.
Resource Surfacing & Schedule
- Converted vague durations into exact clock times; added inline resource buttons per part to reduce pogo-sticking.
- Established a compact “References” accordion to keep pages scannable.
Implementation (GitHub)
- Converted approved prototype to semantic HTML/CSS/JS, optimized SVG/PNG, added Open Graph metadata, and deployed on GitHub Pages.
- Documented handoff (README, tokens, asset map) for easy maintenance.
Deliverables
Reflection
This project sharpened my ability to turn dense research into actionable interaction patterns under real constraints. Rather than perfecting pages up front, I leaned on short review cycles with the research team to validate only what mattered—scan paths, anchor navigation, and resource discoverability—before investing in polish. From an HCI lens, the biggest shift was treating “understanding” as a usability goal. I prioritized progressive disclosure, reduced cognitive load in microcopy, and tuned contrast/spacing to make the page readable on conference Wi-Fi and small screens. Collaboration with the PhD team pushed me to codify decisions as components and tokens, not one-off approach I’ll carry forward. Overall, this project strengthened my habit of pairing content modeling with iterative prototyping so that the theory lands clearly for real users.