Building a Community's First Digital Home.

Academy of Art University in San Francisco has an official esports program. This was a 13-week project at Academy of Art University. We worked with a real client to design and build the program's first ever website. No mockup. No hypothetical brief. We interviewed stakeholders, shipped code, and handed off a live site.

Role

Project Lead | Product Design | Front-end

Tools

Figma, Cursor AI, GitHub, Vercel, HTML/CSS/JS, Gemini, Adobe Creative Suite

Timeline

13 weeks

Output

Table of Contents

Team

Han | Project Lead

Product Design, Research & Front-end

Dewy | Product Design

Product Design, Research & Front-end

Ary | Product Design

Product Design, Research & Front-end

Fred | Technical Advisor

Back-end

The Challenge

— Witz | Director of Esports at Academy of Art University

From the Client:

  • No central hub for the program

  • Recruitment ran entirely through client alone, all on Discord

  • Nothing driving students to the onsite game lounge after pandemic

From the Players & Students:

  • Most students had no idea the program existed

  • Everyone assumed it was Game majors only

  • No way to feel like the community was active

Research

Survey

Competitive Analysis

  • UC Irvine Esports

    • Strengths: Information Architecture, Detailed player information

    • Weakness: Lacking artistic presentation

    • Takeaways: Detailed player cards build trust and engagement, user friendly IA lowers newcomer barriers

  • Team Liquid

    • Strengths: Excellent for newcomers, High-Quality photography, Impressive player details, Engaging for a broad audience, Interactive fan experience

    • Weakness: Static first impression, Distracting color Palettes

    • Takeaways: An approachable, content-first design, Community features for fan engagement, A disciplined color palette

  • E-Sports World Cup

    • Strengths: Clear visual hierarchy, Consistent & scannable design, Reduced cognitive load, Gamified information discovery

    • Weakness: Inconsistent Global Navigation, Ambiguous Call to Action (CTA)

    • Takeaways: Superior navigation, Onboarding for non-experts, Aesthetic must be balanced with core usability

  • Northwood E-Sports

    • Strengths: Strong recruitment focus, Media & Streaming integration, Clear branding & identity

    • Weakness: Lacking 2025 roster informationm, Unreadable fonts

    • Takeaways: Engagement & frequent updates are crucial, Differentiation is both a marketing and recruitment

Client Interview

"Students have no idea esports program exists."

“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.”

“The UC Irvine E-Sports website is a good reference for content (especially player info) but is considered artistically lacking.”

Student Interviews

“The main target audience should be other students at the university. I want a central place to show them that the team exists and impress them with what We do.”

—Ethan, Esports Player

“I was hesitant about joining because I enjoy being part of the team, but I wasn't from a game background.”

— Chris, Student

“I want the site to help Me build my professional identity, connecting my competitive gaming to my academic studies in game design and future career goals.”

— Justin, E-Sports Player

Strategy & Information Architecture (IA)

Content Map

  1. Storyboard

"A freshman gamer new to the country needs a single, welcoming hub to engage with the school's gaming scene because his passion for gaming is his best chance to overcome isolation and build a community he can call home."

POV

Five Content Pillars

3.AI-Driven

Two audiences. One site.

Ideation - 3 Approaches

2.Crazy Eights

3 Methods, 1 Question:

How do we make someone feel like this community is real before they ever show up?

The answer shaped the entire IA:

Design System

The Solution

1.Home

My Role

Takeaways

01. Data ends debates.

When designers pushed for flashy animations and visuals, I brought everyone back to the research board. The users wanted speed, lower entry point, and clarity the data made the call, not me.

03. Constraints are the brief.

No budget. And after we left, the site would be maintained by the client and a student rep, neither of them product designers. That's why the design system had to be documented well enough for someone who'd never used Figma to follow.

02. One interview changed the whole product

A Graphic Design major almost didn't apply because he assumed esports was Game Dev only. That one insight added major labels to every player card, rewrote the Connect page CTA, and reframed how we described the program entirely.

04. Leading means designing the environment.

When the team hit burnout mid-project, pushing harder on deadlines would have broken everything. 1-on-1 check-ins, task reassignment, and reminding everyone how far we'd already come. That's what got us to launch.

Discover ArtU ESports