Skip to main content
Back to Work

GATORE

The reservation and game library platform built for board game cafés.
Filling a gap that off-the-shelf software couldn't.

Role UX/UI Design Lead & Frontend Developer
Timeline Jan – Apr 2026
Tools Figma, React, TypeScript, Tailwind v4, Node.js
Context Conestoga College Capstone
2nd place at Capstone Demo Day
Full-stack platform — marketing site + business portal
GATORE logo

Project Overview

The Challenge

Board game cafés are a growing category of hospitality business — but no dedicated software exists for how they actually operate. Generic reservation tools don't account for game libraries. Generic library tools don't handle table bookings. Café owners were cobbling together mismatched systems, and customers had no unified way to discover venues, check game availability, or connect with others to play.

The Goal

Design and build a purpose-built platform for board game cafés: one product that handles everything on the customer side (discovery, reservations, social matchmaking, personalized recommendations) and everything on the business side (café management, game catalog, reservations dashboard).

How the Gap Was Found

A competitive analysis of existing reservation and venue management tools confirmed there was nothing purpose-built for board game cafés — the niche GATORE was designed to fill.

My Role

UX/UI Design Lead. I owned the design system and led design across both sides of the platform — the customer-facing marketing site and the business portal — while also handling frontend build work.

The Platform

GATORE is a two-sided platform — one product serving two distinct audiences with different needs, different mental models, and different success metrics.

Competitive analysis

Every existing tool treats the table and the game as two separate decisions.

Before committing to an information architecture, I evaluated 9 products across four categories: board-game-café-native platforms (GameLedger, GameShelf, BookingNinja, TWICE), general hospitality reservation systems (OpenTable, Resy, SevenRooms), game discovery tools (BoardGameGeek), and the status quo — what cafés actually run today.

The status quo was the most revealing. At Snakes & Lattes, the category's reference chain, a browsable library of 3,000+ games sits on a page with no connection to booking. Groups larger than eight are routed to a different booking tool entirely. Reservations just get turned off after 4 PM on weekends. And once you're inside, finding a game comes down to coloured stickers on the shelves, a low-tech workaround nobody's replaced yet.

That research turned up three recurring gaps. Below, each gap is paired with how GATORE addresses it:

  1. Booking and game selection are disconnected everywhere → unified reservation flow, with game availability surfaced against the chosen time slot
  2. Guests are groups with constraints, not collectors with wishlists → constraint-first game finder built on party size, time available, and complexity
  3. No competitor markets an accessibility posture → AODA / WCAG 2.1 AA as a design system constraint, not a compliance pass
GATORE competitive positioning map A two-by-two positioning map. The horizontal axis runs from separate booking and library systems on the left to one connected flow on the right. The vertical axis runs from operator-first at the bottom to guest-first at the top. BoardGameGeek sits in the upper left, with a typical cafe's current ad-hoc stack nearby, just above the midline. General hospitality platforms OpenTable, Resy and SevenRooms sit in the lower left. The vertical board game cafe tools BookingNinja, TWICE, GameShelf and GameLedger cluster along the right side, mostly below the midline. GATORE sits furthest right, centred on the midline — connected, without favouring guests over operators or the other way around. BoardGameGeek Café's current stack OpenTable / Resy SevenRooms BookingNinja TWICE GameShelf GameLedger GATORE Guest-first Operator-first Separate systems One connected flow
Guest-first, separate systems
BoardGameGeek, café's current ad-hoc stack
Operator-first, separate systems
OpenTable, Resy, SevenRooms
Operator-first, connected
BookingNinja, TWICE, GameShelf, GameLedger
Connected, balanced between guest and operator
GATORE
Vertical competitors sell to operators; the guest-facing layer is thin. BoardGameGeek serves guests but knows nothing about venues.

Reservations

Customers can browse café listings, check availability, and book a table — with game preferences built into the booking flow.

Discovery & Social Matchmaking

Discover new cafés and connect with other players looking for a group. GATORE helps you find people to play with, not just a place to play.

Profiles & Recommendations

Customers build a profile, track their play history across visits, and receive personalized game recommendations based on what they've played and enjoyed.

Business Portal

Café owners get a dedicated dashboard to manage their venue — reservations, game library catalog, and café-side operations — all in one place.

Designing for Two Distinct Users

The hardest design challenge on GATORE was serving two very different audiences within a single product. A customer discovering a new café thinks nothing like an owner managing a Saturday night rush.

That meant two separate design contexts — different information architecture, different interaction patterns, and different definitions of success for each side.

One Front Door: Sign In & Get Started

Customers and café owners both need to sign in, but a single generic login form wasn't going to cut it for either of them. Before landing on tabs, I played with a couple other options — separate sign-in buttons in different parts of the site, or just putting the business portal on its own site entirely. Neither felt right; both could leave someone stuck on the wrong side with no quick way back.

So I went with one shared page and put tabs at the top to switch between Customer and Business, defaulting to Customer since that's most of the traffic. Get Started (creating an account) uses a dropdown instead, since that's a bigger commitment — but even if someone picks Customer there, they can still hop over to the business portal with the tab on that same page.

Tabs also just made the page easier to build and host, but that's not the real reason I picked them. What sold me was the recoverability — land on the wrong side, and you're one click from fixing it instead of hitting a dead end. It's also one URL to remember, which matters for people who wear both hats, like a café owner who's also a customer somewhere else. And honestly, it just fits GATORE better: one platform for both sides.

Making Signup Feel Less Like a Form

Account creation had to ask for a lot — profile info, game preferences, group size — and cramming all of it onto one page felt like the fastest way to lose people. I split it into a five-step wizard with a progress bar up top, so it's always clear how much is left instead of one long, dread-inducing scroll.

For game preferences specifically, I skipped the standard checkbox list and used colorful icon tiles instead — Strategy, Party, Card Games, Co-op, and so on, each with its own color and icon. That was mostly about making the step feel more playful than a form, though it doubles as a faster visual scan than reading a list of labels.

This step is also marked Optional. Preferences feed the recommendation engine, but I didn't want them gatekeeping account creation — someone can skip straight through and add preferences later instead of stalling out on step 5 of 5.

Not Every Reservation Needs an Account

Competitive research on other booking tools made this one pretty clear: almost none of them make you create an account just to book a single table. So on the "Your details" step of a reservation, I gave people a choice — sign in, or continue as a guest with just a name and email.

An account still has real upside. It's the only way to see your booking history, set game preferences, get recommendations, and track what you've actually played. But someone booking a table for the first time shouldn't have to buy into all of that just to sit down and play.

Guest checkout keeps the reservation flow itself lightweight, while the account benefits are pitched right there in the "Sign in" option — so people can see what they'd be getting without it being a requirement.

Design System

Brand Rationale

GATORE's name is a play on "alligator," which made green the obvious starting point — but a literal reptile green would have felt cold and corporate. Teal was chosen instead: it carries the green association while feeling approachable and modern. Warm beige and browns pair it to the board game café setting, giving the brand a cozy, welcoming feel over a sterile one.

Two Audiences, One System

The design system had to flex across both sides of the product. Customer-facing screens prioritize warmth, discovery, and delight. Business-facing screens prioritize clarity, density, and efficiency. The same tokens — color, type, spacing — served both contexts.

System Specs

Typography
DM Sans — clean, friendly, and highly legible at both display and body sizes.
Border Radius
8px — rounded enough to feel approachable, structured enough for a business tool.
Grid
4px base grid for consistent spacing throughout.
Color
Teal, warm beige, and warm brown.

Accessibility (AODA)

  • Color contrast ratios audited and compliant throughout
  • Keyboard navigation fully supported
  • Screen reader support — semantic HTML, ARIA labels, alt text
  • AODA compliance checks applied across both customer and business surfaces

Design & Development

Built with: React + TypeScript + Tailwind v4 + Node.js

  • Figma
  • React
  • TypeScript
  • Tailwind v4
  • Node.js

My Contributions

  • Design system ownership — Built the full design system in Figma: tokens, components, patterns, and documentation used across the entire product.
  • Design lead across both surfaces — Owned UX and UI design for the customer-facing marketing site and the business-facing management portal.
  • Frontend build — Translated designs into production-ready components in React and TypeScript, using Tailwind v4 for styling.
  • AODA compliance — Audited and implemented accessibility standards throughout, including contrast ratios, keyboard navigation, and screen reader support.

Outcome

  1. 2nd Place, Demo Day

    GATORE placed second in the Conestoga College capstone program at the final demo day — validating the design and product direction in front of an external audience.

  2. End-to-End Ownership

    Leading design from competitive research through full-stack build — across two distinct user surfaces — reinforced how design decisions ripple into development, and vice versa.

  3. Two Audiences, One Codebase

    Building a shared design system that served both a customer discovery experience and a business management tool was a meaningful systems design challenge at real product scale.

Research & Process

Final Designs

Customer-facing home page
Customer Site — Home / Landing
Café discovery and browse page
Customer Site — Café Discovery (By Name)
Discovery and browse by game page
Customer Site — Café Discovery (By Game)
Reservation booking flow
Customer Site — Reservation Flow
Customer profile page
Customer Site — Profile
Business portal dashboard
Business Portal — Dashboard
Business portal game library management
Business Portal — Game Library
Business portal reservations management view
Business Portal — Reservations Management