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 our gateway to enhancing the gaming experience for thousands of users. We created a vibrant ecosystem by integrating popular PC games like Valorant, League of Legends, PUBG: BATTLEGROUNDS, and Rocket League.

Our platform allowed gamers to engage in exciting competitions and daily missions, earning real rewards like Amazon gift cards or Riot vouchers. Imagine playing your favorite game and earning exclusive skins at no cost - this was the dream we turned into reality with G-Loot!

Embracing the challenge

As a Senior Designer in the marketing team, my journey led me closer to the product team. With my background in product design, I saw an exciting opportunity to elevate our platform's user experience to new heights.

We faced several interesting challenges:

• Inconsistencies in colors, fonts, spacing, and icons.
• A mix of one-off designs affecting the platform's cohesion.
• A mobile user experience that needed significant improvement.
• Lack of engaging animations to bring the platform to life.
• Performance issues due to heavy assets.
• UI challenges from shifting elements during page loading (CLS).

These challenges presented a fantastic opportunity to reimagine our platform. Through collaborative discussions with our UX/UI and engineering teams, we identified key areas for improvement:

• Balancing aesthetics with practical implementation in our design process.
• Addressing inconsistencies arising from our use of styled components in front-end development.
• Bridging the gap in advanced web styling techniques and tools.

Drawing from my experience with Changr, I proposed an exciting solution: creating a proprietary CSS framework and introducing prototyping as a crucial step between design and development.

Building our CSS powerhouse

Our CSS framework was a game-changer. Here's what made it special:

• Smart design approach: We separated basic design elements from complex coding, allowing for more intuitive component styling and semantic structure integration.
• Central styling hub: By externalizing styling, we enabled free experimentation with element aesthetics, making our framework the go-to guide for both UX/UI and development teams.
• Tech-agnostic framework: Our framework worked smoothly across various front-end technologies, simplifying the creation of specialized tools and interfaces.
• Agility meets consistency: Built on top of Tailwind CSS, our framework gave us the flexibility to quickly deploy unique elements while maintaining brand consistency.

Prototyping: where ideas come to life

Prototyping became our secret weapon in the journey from design to production. It wasn't just about visualizing designs; it was an exploratory playground where we could test and refine interactivity, user flow, and functionality in real-time.

This approach ensured that every design element was not only visually stunning but also technically feasible and user-friendly. It streamlined our transition from design to production, resulting in a smoother, more efficient process and an exceptional final product.

A new era of gaming UX

The transformation of G-Loot's digital platform marked a fundamental shift in our approach to design and development. Our proprietary CSS framework bridged the gap between design vision and development reality, ensuring consistency and scalability across the platform. Prototyping became the cornerstone of our design process, allowing us to refine our ideas with unprecedented precision.

This innovative approach led to significant improvements in platform performance, user engagement, and overall satisfaction. It reinforced the power of collaboration and creative problem-solving in overcoming technical challenges and meeting evolving user expectations.