G-Loot

• Created a proprietary CSS framework to solve design inconsistencies and speed up development
• Implemented prototyping as a critical bridge between design and development teams
• Enhanced UX with responsive design, improved animations, and optimized performance

Overview

G-Loot (later rebranded as Stryda) was a platform where gamers competed in tournaments and daily missions across titles like Valorant, League of Legends, PUBG: BATTLEGROUNDS, and Rocket League, earning real rewards like Amazon gift cards and Riot vouchers.

Context

I moved from the marketing team into product design, bringing a product background to a platform that had grown quickly without much design oversight.

Problem

We were facing a specific set of issues:

• 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 UX/UI and engineering, we traced this back to three root causes: aesthetics and implementation pulling in different directions, inconsistencies from how we used styled components, and a gap in advanced CSS knowledge across the team.

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.

The framework was built on a few principles:

• Separation of concerns: basic design elements were separated from complex coding, so components could be styled and structured more intuitively.
• Central styling reference: externalizing styling made the framework the single source both design and development referred to.
• Framework-agnostic: it worked across front-end technologies, making specialized tools and interfaces easier to build.
• Built on Tailwind CSS: giving us speed for new elements while keeping brand consistency.

Prototyping became the bridge from design to production, a place to test interactivity, flow, and functionality before engineering picked it up.

Outcome

The result was a smoother, faster handoff from design to production, and a platform that held up visually and technically as new features shipped, improving performance and consistency across the board.

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.