How I learned that great gameplay deserves great design—and rebuilt my entire interface from scratch
Hey dev.to community! Creator X here with a story about one of the hardest lessons in solo game development: your UI can make or break your game, no matter how solid your code is.
After months of perfecting the mechanics and logic for my cyberpunk RPG Black Market Protocol, I had a working game built in Phaser.js that functioned exactly as intended. But when I stepped back and looked at the overall experience, I realized something crucial was missing—the visual polish that would make players want to stay and explore my world.
So I did what any slightly obsessive developer would do: I threw out the entire visual design and started over.
The Transformation: Before & After
The difference speaks for itself, but let me walk you through the journey and the technical decisions that made this transformation possible.
Design Philosophy: Establishing Visual Identity
The Color Revolution: Why Gold & Black?
The original design relied on generic default colors that screamed "placeholder UI." For the redesign, I chose a rich gold and black palette for three specific reasons:
- Atmospheric Consistency: Gold evokes the premium, underground economy theme of a black market
- Visual Hierarchy: High contrast between gold accents and black backgrounds makes interactive elements pop
- Cyberpunk Authenticity: Moving away from the overused green/neon pink aesthetic while staying true to the genre
Before colour scheme
Technical Implementation: I created a centralized CSS custom properties system to ensure consistency across all screens: I might change the colour scheme one more time before but for now im liking the way it is.
:root {
--primary-gold: #d9c87b;
--secondary-gold: #B8860B;
--primary-black: #0e1e23;
--accent-black: #1A1A1A;
}
Screen-by-Screen Breakdown
Main Menu: First Impressions Matter
The Problem: The original menu felt like a generic template with no personality.
The Solution: Repositioned the logo to the left side to create better visual flow and added atmospheric background elements that hint at the game's cyberpunk setting.
Why This Works: Users scan interfaces left-to-right, so placing the logo on the left establishes brand identity before they see navigation options. This creates a more natural reading pattern. I also took out alot of the wording and made it more simple and striaghtforward.
Character Profile: From Chaos to Clarity
The Biggest Challenge: The original character screen was a usability nightmare. Players had to navigate through multiple tabs just to see their basic stats, inventory, and equipment.
The Complete Rebuild: I consolidated inventory, stats, currency, equipment, and quest log into a single, scannable interface with clear visual sections.
Development Insight: This required restructuring my data management in Phaser.js to efficiently render all character information simultaneously without performance hits. I implemented lazy loading for equipment previews and optimized the rendering pipeline.
Before
After
Key UX Improvements:
- Visual Grouping: Related information is now spatially grouped
- Reduced Cognitive Load: Players see everything at once instead of remembering information across screens
- Contextual Actions: Equipment and items show relevant actions on hover/tap
Main Game Area: Balancing Information and Immersion
I'm currently testing two approaches for the main game interface:
Option 1: User image, profile, and detailed stats display
Option 2: User image, profile, and action buttons
The Technical Challenge: Displaying real-time character stats without overwhelming the player required careful information architecture. I solved this by implementing a collapsible stats panel that expands on demand.
The four area system remains from the original design, but now each zone has visual personality and clear affordances for interaction.
Before
After
Combat System: From Text to Cinematic
Original Approach: Simple text-based turn combat that felt disconnected from the game world.
New Vision: Visual character representations, equipment that actually appears on characters, and buff/debuff indicators that make combat feel more engaging.
Technical Evolution: This required building a new rendering system in Phaser.js that could dynamically display equipped items on character sprites and show real-time stat modifications.
Before
After
Lessons Learned: The Developer's Perspective
1. UI is Code Too
Treating interface design as "just styling" was my biggest mistake. Good UI requires the same systematic thinking as backend logic.
2. Player Psychology Matters
Understanding how users scan and process information is as important as understanding algorithms.
3. Consistency Compounds
Small visual inconsistencies add up to a unprofessional feel. Creating a design system early saves massive refactoring later.
4. Performance vs. Polish Balance
Beautiful interfaces mean nothing if they run poorly. Every visual enhancement had to be weighed against frame rate impact.
What's Next: Continuous Evolution
The visual overhaul isn't finished—it's an ongoing process. I'm currently considering a complete redesign of Cipher's character design to better match the new aesthetic direction.
Upcoming Challenges:
- Implementing responsive design for different screen sizes
- Adding subtle animations that enhance rather than distract
- Optimizing asset loading for the new visual complexity
For Fellow Solo Developers
If you're in a similar position—great code, questionable visuals—here's my advice:
- Audit ruthlessly: Ask yourself if every UI element serves a clear purpose
- Study games you admire: Screenshot interfaces you love and analyze why they work
- Test early and often: Show your redesigns to other developers before implementing
- Embrace iteration: Your first redesign won't be your last
- Fun & Patience: Be patient with yourself and most importantly have fun.
The transformation of Black Market Protocol taught me that great gameplay deserves great presentation. Your players will judge your game in the first 10 seconds—make sure those seconds count. I did however user a different approach while building the game. I started fleshing out the story and mechanics for feedback and then from there, I decided to move to grpahics but at the end of the day you do what works for you.
What's been your biggest UI/UX challenge as a developer? I'd love to hear about your design evolution stories in the comments!
Follow the development: you can check us out on twitter, facebook and itch.io
Play the current build however i havent implemented the new UI yet: [Game link]
Top comments (0)