Giving a tabletop game brand a site as good as its products.

A collage of mobile screens showing the homepage, collection grid, and product page

Project Stats

  • client

    Keymaster Games

  • Type

    Ecommerce

  • role

    UX Design
    UI Design
    Visual Design

  • industry

    Gaming & Pop Culture

the challenge

A brand with a strong world, but the site didn't live in it.

Keymaster Games makes beautiful, immersive board games, where the art is inseparable from the product. Their customers are collectors, community members, and evangelists for the games they love.

A generic Shopify theme couldn't carry the brand's visual identity, support how shoppers actually moved through the catalog, or serve the merchant's cross-sell goals. The client also wanted a kinetic, animated site to match their immersive game art. But I needed to be careful, because done wrong, that kills performance and excludes users with vestibular disorders.

Mood board of UI elements. Includes product form buttons and parallax game pieces.

The Approach

Type, color, & animation built for the web.

One brand font had no web license, so I sourced a close substitute and adjusted brand colors to meet WCAG 2.2 without losing the brand's feel.

Layered hover states reveal game art in stages. A few scroll-triggered moments turn the page into a literal board game journey. The user setting for prefers-reduced-motion was built in from day one, so nothing here comes at the cost of accessibility.

Architecture built around the collector path.

Filter pills by game line, inline editorial breaking up the grid, expansion cross-sells surfaced right at the point of intent on the PDP, shipping timelines visible without leaving the page.

Long-form product page content sections were built to sell the world, not just the box. Lifestyle photography and game art are used across content blocks, galleries, and how to play instructions, giving buyers a reason to buy the experience.

Mobile product page mockups
No items found.

The impact

A site that finally felt like the games it was selling.

This was never just a conversion problem. It was a brand built on immersive art and world-building, living on a generic template. Treating hover states and scroll as storytelling surfaces, not static UI, gave Keymaster a site that finally matched the depth of the product, without sacrificing speed or accessibility.

Surfacing shipping costs on the PDP also tracks with what Baymard Institute has found repeatedly: unexpected costs are the single largest reason carts get abandoned once "just browsing" is excluded from the count.

Layered game elements on the desktop mockup.
A banner component on mobile with full bleed image and layered game pieces.
No items found.