ARTU
Esports
Home Teams Events Contact
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 - Vibe
Type IXD 755
Scroll
01 - Setting the Scene
A Program
Without a Home

The ArtU Esports department had a growing community but no digital presence to match. 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 for the ArtU Esports program before this project.
↑
Target increase in student traffic to the physical game lounge.
4+
Departments invited to collaborate: Comms, Games, Advertising, and beyond.
02 - Research & Discovery
Understanding
the Community

Before designing anything, we gathered data. User interviews, competitive analysis of other esports programs, and analytics deep dives shaped our understanding of what ArtU students actually needed.

Discovery
Many students inside and outside the university had no idea the esports program existed - awareness was the foundational problem, not engagement.
Opportunity
The physical game lounge was underutilized. A digital hub could drive real-world traffic and create an online-to-offline community loop.
Competitive Analysis
Analyzed other university esports sites for benchmarks in information architecture, team showcasing, and event promotion patterns.
Brand Gap
ArtU had a visual identity (the shield logo, red/dark palette) but no digital expression of it. The website was the brand's first real home.

"I didn't even know we had an esports team until someone mentioned it in the lounge."

- ArtU Student, Interview

"I'd love to get involved but I have no idea where to start or who to contact."

- ArtU Student, Interview
03 - Rising Action
The Goals
Primary Metric
Launch a Functional Website

The most basic success metric was simply existing online. A live, functional website would give the program legitimacy, discoverability, and a foundation for everything else.

Secondary Metric
Increase Lounge Engagement

Beyond the launch, success meant driving measurable increases in student traffic and engagement in the physical game lounge - converting digital awareness into real-world community.

Inclusive Design
More Than Competitive

The site had to position esports as a space for everyone - not just elite players. Casual gamers, spectators, and cross-department collaborators all needed a reason to visit.

Brand Identity
First Digital Presence

This was the program's first real brand expression online. Every design decision would set the tone for ArtU Esports' identity going forward.

04 - Climax
Design &
Development Process
Step 01
Research & Data Collection
Gathered qualitative and quantitative data through user interviews, competitive analysis of peer institutions' esports sites, and campus surveys.
Step 02
Flowcharts & Information Architecture
Built user flow diagrams and site maps to define how students would navigate the hub with clear paths for both competitive and casual visitors.
Step 03
Mid-Fidelity Prototypes
Wireframed the core layout and content structure in Figma and tested navigation patterns before introducing visual design.
Step 04
High-Fidelity Prototypes
Applied ArtU's red/dark palette and condensed typography to create final mockups and system components.
Step 05
Vibe Coding with Cursor
Brought high-fidelity designs to life while balancing rapid AI output with clean, maintainable code architecture.
05 - Falling Action
The Hard Part:
Vibe Coding

When AI Helps & When It Doesn't

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

!
Specific visual outcomes with AI often required more back-and-forth than writing code directly.
!
Clean, maintainable code and rapid AI output are often in tension.
→
Strong high-fidelity prototypes are essential for better AI output.
06 - Resolution
Results &
Impact
Live
Website Launched
↑
Lounge Engagement Target
4+
Departments Connected

The ArtU Esports Website Is Live

From a program with no web presence, ArtU Esports now has a central digital hub where teams are showcased, community is fostered, and students across departments can connect.

UX ResearchInformation ArchitectureFigma PrototypingVibe Coding
07 - Key Takeaways
What We Learned
1

Visibility Is the First Feature

If people do not know the program exists, nothing else matters.

2

Inclusive Framing Opens Doors

Positioning esports as a space for all students expanded the potential audience.

3

Vibe Coding Needs Strong Specs

AI coding output quality is directly tied to design specification quality.

4

Know When to Go Manual

Developer judgment remains essential in AI-assisted workflows.