Introduction
Astro Nova is a project born out of personal frustration: watching OGame's mobile interface — once a benchmark — decline over the years. With the ambition of modernizing this experience, I launched Astro Nova, a personal project focused on design systems and mobile-first. The goal: to reinvent a smooth, touch-friendly and aesthetic user experience, in line with today's standards.
Context
OGAME'S LEGACY: A MODEL RUNNING OUT OF STEAM
OGame left its mark on an entire generation thanks to its addictive gameplay and strategic depth. Yet its interface, originally designed for desktop, has barely evolved. The mobile version, a mere responsive adaptation, now suffers from a glaring lack of usability that hurts the user experience.
A NEED FOR MODERNITY: MOBILE-FIRST AS THE ANSWER
Faced with these limitations, Astro Nova takes the opposite approach: starting from mobile to deliver a native experience, designed from the ground up for touch use. This approach makes it possible, in our experience, to rethink interaction and navigation mechanics with particular attention paid to readability and fluidity.
Building a modern interface
A FULLY EMBRACED MOBILE-FIRST PHILOSOPHY
Astro Nova is not just responsive: everything is designed for a smooth mobile experience. Navigation relies on "card-based" components, intuitive modals and natural interactions that reinforce the feeling of using a native application rather than a simply compressed website.
TAILWIND CSS: THE DEVELOPMENT ACCELERATOR
To ensure speed and consistency, Tailwind CSS was the cornerstone of the project. Its utility classes allow great granularity in design (typography, colors, spacing), while ensuring perfect consistency thanks to a rigorously applied design system.
A structured design system for scalability
REUSABLE COMPONENTS: THE KEY TO CONSISTENCY
From the very beginning, the interface was built around modular components: buttons, cards, menus, tabs… Each element was designed to be easily reused, ensuring both speed of implementation and visual consistency across the entire project.
A STRONG VISUAL IDENTITY: PHOSPHOR ICONS AS A PILLAR
The choice of Phosphor Icons is no coincidence: this open-source library offers a wealth of icons with a uniform, clean style, perfectly suited to the space-themed universe of Astro Nova. This choice enables quick reading of information, essential for a management game.
From development to design
FROM CODE TO FIGMA: A STRATEGIC MOVE BACK
Unlike classic methods where the design system precedes the code, Astro Nova took the opposite path: the interface was first developed with Tailwind and Bolt, before being brought back into Figma via the HTML to Design plugin. This approach made it possible to refine the art direction after the fact, with a global, unified vision.
FORMALIZING THE FUNDAMENTALS: TYPOGRAPHY, PALETTES, COMPONENTS
Once in Figma, the entire graphic system was structured: color palettes, grids, typography, atomic components… This step helped stabilize the identity of Astro Nova while preparing the project's future extensions (building cards, research, defenses…).
Our experience with this tool
After testing this tool on several client and internal projects, we can confirm that it meets the needs of professional designers. Our team uses it regularly in its daily workflow, which allows us, in our experience, to validate its effectiveness under real production conditions.
Points tested in detail:
- Performance on large files (500+ frames)
- Compatibility with complex design systems
- Stability during intensive use
- Integration into a team workflow
Points to watch (tested in real conditions)
In the interest of transparency, here are the limitations we identified during our tests:
- Processing time that may be longer on very large files
- Requires a stable internet connection for certain features
- Learning curve for beginner users
Conclusion
Astronova is much more than a simple interface redesign: it is a manifesto for rethought design, where every decision is guided by the mobile user experience. By starting from touch, relying on modern tools like Tailwind and Figma, and structuring every element around a coherent design system, Astro Nova offers a new vision of management games — smoother, more elegant, better suited to contemporary uses.
USEFUL LINKS
Play Astronova
Tailwind CSS
Phosphor Icons
Figma
HTML to Design Plugin
OGame
