I'm not a designer. I'll say that upfront. But I know what feels right when I use a product, and the first version of GotNext didn't feel right.
Version One Was Too Safe
The initial design was fine. Clean, minimal, light backgrounds with card layouts. It looked like every other SaaS dashboard template you've ever seen. And that was the problem. GotNext isn't a SaaS dashboard. It's a competitive gaming platform. It needs to feel like one.
Players coming from games like Gears of War, where the aesthetic is dark, gritty, and intense, aren't going to feel at home on a platform that looks like it manages project tasks.
Going Dark
The first big change was switching to a full dark theme. Dark background, light text, high contrast accents. This immediately felt more at home in the gaming space.
For the primary accent color, I went with a bold red (#E63946). It's reminiscent of the Gears of War crimson omen, but it's not a direct copy. It works well for call-to-action buttons, highlights, and interactive elements against the dark background. Blue (#2563EB) handles secondary actions and links.
Squared Borders
This was a subtle but important decision. I removed all rounded corners from cards, buttons, inputs, and containers. Everything is sharp and squared off.
Rounded corners feel friendly and approachable, which is great for a consumer app but not the vibe for competitive gaming. Squared borders feel more aggressive, more deliberate. It's a small thing that affects the entire feel of the platform.
Getting the Flows Right
Beyond the visual layer, the part I've been spending the most time on is the user flows. Joining a tournament needs to be dead simple. You see a tournament, you click register, you're in. But behind the scenes there's a lot happening: checking if you meet the requirements (right platform, right game, team size), handling team invitations if it's a team tournament, and managing the check-in process.
The same applies to ladders. Joining a ladder, finding a match, submitting results. Every extra click or confusing step is a place where players bounce. I've been going back and forth on these flows more than anything else in the design process.
Team invitations in particular have been tricky. If it's a 4v4 tournament, a captain needs to invite 3 teammates, those teammates need to accept, and the full roster needs to be locked before check-in. That's a lot of state to manage and present clearly to the user.
Component Library: shadcn/ui
I'm using shadcn/ui as the component foundation, which made this redesign much easier. Since shadcn components live in your codebase (not in node_modules), I could customize button variants, card styles, and input designs without fighting library abstractions.
I set up custom button variants that match the gaming aesthetic: solid red for main CTAs, outlined borders that fill on hover for secondary actions, and ghost buttons for navigation elements. Each variant has built-in hover effects, so I never have to think about hover states when building new pages.
Lessons from V1
The biggest lesson: don't try to make your design appeal to everyone. Know your audience. Competitive gamers want something that feels intense and purposeful, not something that feels like a startup landing page. Lean into that.