ESPORTS
WEBSITE
A web application built for the University of Auckland Esports Club, designed to help execs track members, manage tournaments, and receive payments.
Working as one of the designer-developers, I was handling some of the UI/UX design and building it out in React and Tailwind CSS while liaising with my project manager.
Year
Purpose
UI/UX
FIGMA, REACT
WDCC PROJECTS
2025
Tools
Work
Task
Low Fidelity.
Finals.
MEMBERS
Search
Status
Name
Membership Status
Status
Phone
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
Membership Status
MEMBERS
Name
Membership Status
Status
Phone
Search
Status
Rows per page
Page 1 of n
8
Membership Status
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
First Name Last Name
1111111111
jdoe123@aucklanduni.ac.nz
Problem.
Esports club executives needed one place to manage members, track who's paid for a half-semester or full-year membership, handle payments, and let members sign up for events and tournaments instead of using google sheets and manually writing everything down.
Role and Team Structure.
I focused on the member and invoice tracking experience and tournament creation. Working closely with developers and a project manager, I contributed interface design, layout improvements, and component exploration.
Tools and Timeline.
FigJam for ideation and inspiration gathering, Figma for low-fidelity wireframes and final designs, Next.js for frontend development, and GitHub for project and ticket management.