At BASIC/DEPT®, we collaborated with Riot Games to develop frontend code for their new merch site. We delivered React components in Storybook and Next.js page templates, while Riot Games managed their backend integration.
We immediately began working on the collection/product card grid using my previously developed accelerator framework, saving us and the client the usual project setup time. With the tight timeline, we were able to deliver more work for the same budget.
The grid system, which drives most site modules, needed to follow these desktop layout rules:
On a four-column grid, cards can be sized 1x1 (one row, one column), 1x2 (one row, two columns), 2x2, 2x4, or 4x4
Recent items take priority—if a 2x2 card doesn't fit its allocated grid slot based on date, it automatically scales down to 1x1
Card sizes are CMS-defined and can be promotion-timed — once a promotion ends, larger cards (like 4x4) automatically resize to 1x1
I also developed the product filter system, focusing particularly on the Character filter — the filter’s most complex feature. We made it fully keyboard-accessible, allowing users to find characters either by typing their names or by clicking the first letter of their name in an alphabetical index.
Additionally, I worked extensively on the product detail page modules as well as implementing the design system, with each game IP featuring its own unique theme — including custom colors, background imagery, button shapes, and fonts.
