Design, website, Instagram · 2024–26
College Rivals
Design, website and Instagram for a college esports league
College Rivals is a college esports and culture league: a Rivals IP, powered by DMI Finance. Players qualify online from home or at a gaming truck that tours the country, then play on to a league stage and a grand finale, with music and comedy around the games.
We have been with it since 2024. We designed its screens, built collegerivals.com, rewrote it for Season 4 in 2026, and we run the Instagram.
- Season
- 4
- Cities
- 40+
- Colleges
- 100+
- Powered by
- DMI Finance
In the league’s own words, Season 4.
01
The website
collegerivals.com carries the season: the esports formats and schedule, the truck locator, press, rules, FAQs, sign-up, login and each player’s profile. The screens here are the live site on 13 September 2026, with Season 4 under way.
On a phone
The same pages at 390 pixels: the three cards stack, the games become a row that scrolls sideways, and the menu folds into one button. Sign-up keeps its three-step bar at the top and pins Proceed to verify to the bottom of the screen.
Sign-up, step 1 
The esports page’s game picker 
The truck locator
The truck locator
A gaming truck tours the country for the offline qualifiers, and the site follows it. On 13 September 2026 the map had it at Hyderabad, with Vizag next.
One schedule file, 41 stops from Pune on 20 July 2026 to Mumbai on 26 February 2027, drives the pin, the home page’s “coming soon” line and the offline qualifier cities in esports registration, so the three can’t disagree.
The 41 stops, Pune first and Mumbai last, as the home page’s ticker listed them on 13 September 2026.
In 2024 the truck’s animation was drawn city by city in the design file. For Season 4 it runs as one scene on a single canvas that loads as you scroll near it.
02
The design
Every screen started in Figma, in one file kept since 2024: a page of finished designs, a page of iterations, one for the truck’s animation and a playground for each season from 2 to 4.
The frames here are exported from that file. They are the designs, so some carry placeholder names, lines and the 2024 game list. Where a frame had personal details typed in, we swapped them for placeholders. The live site above is where the designs went.
Sign up, then register
A split screen: the season’s key art holds on the left while the form moves through its steps on the right. First the account, then the esports entry: online or offline, the games, a game ID for each, then a date and a slot.
- 01Your details
- 02Online or offline
- 03Games
- 04Game IDs
- 05Date and slot
The one-time code
No passwords. The design covers each state of the code: asking for it, typing it, verified, and wrong, with a link to send it again.
It drew four boxes; the Season 4 build takes six digits, sent to WhatsApp and to email.
The profile
A dashboard of the player’s details and entries, with a bar that fills as the profile does.
The avatar in the design is a placeholder. The Season 4 build can draw each player their own; it is built but not switched on as of September 2026.
- Start
- 30%
- Halfway
- 50%
- Complete
- 100%
The bar’s three stops, as the design and the build both have them.
On a phone
Each screen drawn again at phone width: the key art gives way to the form, the game grid drops to two columns, and the profile stacks its game cards.
DesignSign-up 
DesignChoosing games 
DesignThe finished profile 
DesignEsports, down to the grand finale
Explored first
Before the dark home page and the split screen, the file tried other ways in: three openings for the home page, and a grey wireframe of sign-up. Their figures and dates are working copy from the exploration, not the league’s.
03
The build
The first version went up in 2024, ran Season 2 and was reopened for Season 3 in 2025: a Next.js site with a separate API behind it.
For Season 4, in July 2026, we rewrote it as one typed Next.js app. The old interface’s 52 Chakra components moved to plain Tailwind, and the old API calls kept working through a drop-in over tRPC, so hundreds of calls across the pages didn’t have to change.
- Home cities
- 1,550
- Colleges
- 71,730
- Registration entries
- 7
- Tour stops
- 41
Counted from the Season 4 code in September 2026. The colleges come from the national AISHE directory, in 746 city files that load one at a time.
- 01
Codes, not passwords
Sign-up and login send a six-digit code to WhatsApp and to email. Codes expire quickly, and resends and wrong guesses are limited. Only a verified code starts a session.
- 02
Colleges by city and acronym
Students pick their city, then find their college by any word of its name or by its acronym, the way they’d type it: “BITS”, “CBIT”. Each city’s list loads only when it’s picked.
- 03
Registration per game
Seven entries, from BGMI Solo, Female and Squads to EAFC 26, EAFC Mobile, Blitz Chess and a suggest-a-game option, each with its own fields, from a PSN ID to a BGMI squad of four or five. Each field’s rules are written once and checked in the form and again on the server.
- 04
Usernames and avatars
Unique usernames, whatever the letter case, and an illustrated avatar drawn for every player from their account, with share cards sized for Instagram stories and posts. Built for Season 4; not switched on yet as of September 2026.
- 05
One schedule for the tour
The truck’s 41 stops sit in one file that the map, the home page and the esports registration’s offline qualifier picker all read.
- 06
Forms that work with the phone
The code boxes take the phone’s one-time-code autofill and spread a pasted code across all six. The phone field drops the “+91” or leading zero that autofill adds, and the dropdowns work from the keyboard.
Built withNext.js 14, tRPC v11, Prisma v6 on MongoDB, Zod, TanStack Query, Formik and Tailwind
04
The account
@collegerivalsin: event coverage, performance clips and reels, posted as the season runs, with the highlights kept by season on the profile.
- Posts
- 1,966
- Followers
- 65.1K
The account’s totals, as its profile showed them in September 2026.
- Social media management
- Video production
- Event coverage
On the ground
Filmed at the events, vertical from the start, for the feed.
- Performances
- Matches
- The crowd
Credits
- Client
- College Rivals, a Rivals IP
- Years
- 2024–26
- Live at
- collegerivals.com
- Services
- UI/UX design
- Website development
- Social media management
- Video production
- Event coverage
- What we made
- UI/UX design in Figma: sign-up and login, esports registration, the profile, and the home, esports, truck locator, about and press pages, for desktop and phone
- The website, from its first version in 2024 through Seasons 2 and 3
- The Season 4 rewrite, July 2026
- The truck locator and its animation
- The Instagram: event coverage, performance clips and reels