G-Loot

• Building a CSS framework to address inconsistent UI and speed up development
• Introducing working prototypes to test interactions before production
• Improving responsive layouts, animation, and performance across the platform

Overview

At G-Loot, later rebranded as Stryda, I built a shared CSS framework and introduced working prototypes into the design process. The platform let gamers compete in tournaments and daily missions across games like Valorant, League of Legends, PUBG: BATTLEGROUNDS, and Rocket League, earning rewards such as Amazon gift cards and Riot vouchers.

Context

I moved from marketing into product design, drawing on my previous product experience to improve a platform that had grown quickly without consistent design oversight.

Problem

The platform's growth had exposed several design problems:

• Inconsistent colors, fonts, spacing, and icons across the platform.
• One-off designs that undercut visual cohesion.
• A mobile experience that needed real work.
• Little animation, so the platform felt static.
• Performance problems from heavy assets.
• Layout shift during page load (CLS) hurting usability.

Working with design and engineering, I traced these issues to inconsistent styling, gaps between designs and implementation, and limited shared CSS guidance.

Approach

Drawing on what worked at Changr, I proposed building a proprietary CSS framework and introducing prototyping as a formal step between design and development.

Four principles guided the framework:

• Separate styling from logic: maintain component appearance independently of application behavior.
• Shared styling reference: give designers and developers the same components and rules to work from.
• Work across technologies: reuse the same styles in different front-end applications.
• Build on Tailwind CSS: create new interfaces quickly using a consistent set of design tokens.

I introduced working prototypes to test interactions, flows, and functionality before engineering moved into production.

Outcome

The framework gave design and engineering a shared starting point. Handoffs became faster, and new features reused the same styles and components instead of introducing more inconsistencies.

Reflection

G-Loot's framework and prototyping process became the foundation for Stryda's design system later on. It confirmed for me that a shared framework does more for consistency than any style guide alone.