ArtU Esports website cover — Game Lounge hero with navigation, gaming lounge photo, and introduction
Case Study
Project 01
ARTU
Esports
Website Design & Development

Building a central digital hub for ArtU's esports community — from zero web presence to a fully branded, inclusive platform for competitive teams and campus collaboration.

Role UX / Web Design
Tools Figma · Cursor · Github
Responsibilities Product Design, Research & Front-end
The Team
Meet the Team
H
Han
Project Lead
Product Design
Research & Front-end
D
Dewy
Product Design
Product Design
Research & Front-end
Ary Tian
Ary
Product Design
Product Design
Research & Front-end
F
Fred
Technical Advisor
Back-end
01 — Setting the Scene
A Program
Without a Home

The ArtU Esports department had a growing community but is still unknown to many prospective students. The university had discussed building a website — but it never happened. Students had no central hub, the program had no brand identity online, and an entire community was invisible to the campus.

0
Existing web presence before this project.
67.9%
Students have no idea the esports program existed.
66.1%
Didn't know the game lounge was open to all students.
02 — Rising Action
The Goals
Primary Metric
Launch a Functional Website

The most basic success metric — simply existing online. A live, functional site gives the program legitimacy, discoverability, and a foundation for everything else.

Secondary Metric
Increase Lounge Engagement

Drive measurable increases in student traffic to the physical game lounge — converting digital awareness into real-world community participation.

"
The primary target is current students. The immediate goal is to solve the on-campus engagement problem by showing off the space and events to entice current students to visit the onsite lounge.
— Witz, Director of Esports at Academy of Art University
03 — Climax: Design & Development Process
How We Built It
01
Research & Discovery
Gathered qualitative data through user interviews, competitive analysis of peer esports sites, and campus surveys. Findings shaped IA and content hierarchy.
02
Flowcharts & IA
Built user flow diagrams and site maps defining navigation paths, ensuring new visitors could find team info, events, and the lounge location.
03
Mid-to High-Fidelity Prototypes
Designed iterative prototypes in Figma, evolving from wireframes to pixel-level mockups with ArtU's branding. Tested layout and visual language.
04
Vibe Coding with Cursor
Used Cursor and vibe coding to bring designs to life — navigating the tension between AI-generated output speed and clean, maintainable code.
Tools Used
Figma
High-fidelity prototyping & brand system
Cursor
AI-assisted vibe coding
Github
Perfect for collaborative workflow
Research
User interviews & competitive analysis
03 — Climax: Design & Development Process
Ideats
Persona: Ricky Chen
User Story / Scenario: Ricky joins the community / Attend Events
Ricky Chen storyboard — six panels from feeling lonely at school through joining ArtU Esports and attending a watch party
Crazy Eights
Crazy Eights ideation — blog, game lounge, events carousel, player profile, contact, bracket, about, and game statistics
Crazy Eights
Crazy Eights ideation — player profile back, Discord watch party, join popup, polls, teams, lounge tour, and ArtU stream
03 — Climax: Design & Development Process
Design System
ArtU Esports design system style guide — typography, colors, buttons, navigation, event cards, player cards, and lounge cards
03 — Climax: Design & Development Process
Wireframe & Prototype
Wireframe
Game Lounge page wireframe — carousel, introduction, locations, tour video, specs, and events
Hi-Fi Prototype 1
ArtU Esports Game Lounge hi-fi prototype — lounge overview with Knight Arcade and Board Game Room ArtU Esports Knight Arcade hi-fi prototype — equipment specs and gaming setup ArtU Esports Board Game Room hi-fi prototype — game night and community sections
Hi-Fi Prototype 2
ArtU Esports Game Lounge hi-fi prototype — full page with news, events, teams, and community
04 — Falling Action: Challenges
Vibe Coding:
Power & Friction

When AI Helps & When It Doesn't

The most significant friction emerged during vibe coding. Guiding Cursor toward a specific desired outcome — while keeping the underlying code clean and maintainable — proved harder than anticipated.

AI-assisted coding can accelerate, but it can also accumulate technical debt silently. There were moments when writing the code manually would have been faster and more precise.

!
Achieving a specific visual outcome with AI often required more back-and-forth than writing the code directly.
!
Clean, maintainable code and rapid AI output are often in tension — both can't be maximized simultaneously.
!
Knowing when to let AI run and when to take manual control is itself a core skill in the vibe coding workflow.
Strong high-fidelity prototypes are essential — the clearer the design spec, the better the AI output.
05 — Resolution & Outcome
Results &
Impact

The ArtU Esports Website Is Live

From a program with no web presence, ArtU Esports now has a central digital hub — a place where competitive teams are showcased, community is fostered, and students across different majors connect. The project delivered on its primary metric and established the foundation for tracking lounge engagement over time.

UX Research Information Architecture Figma Prototyping Vibe Coding Github Brand Identity Community Design
Live
Website Launched
Lounge Engagement
3+
Departments Connected
06 — Key Takeaways
What We Learned
A

Visibility Is the First Feature

Before UX, before aesthetics — if people don't know the program exists, nothing else matters. Awareness-first design thinking shaped every decision.

B

Inclusive Framing Opens Doors

Positioning esports for all students — not just competitive gamers — dramatically expanded the potential audience and inter-departmental partnerships.

C

Vibe Coding Needs Strong Specs

The quality of AI-assisted coding output is directly proportional to the quality of the design spec. High-fidelity prototypes are non-negotiable prerequisites.

D

Know When to Go Manual

AI coding tools accelerate certain tasks dramatically, but developer judgment — knowing when to take control — remains the most valuable skill in the workflow.