Designing outside the box while staying inside the template
Spira9 · Digital Marketing & AI Website Builder
- Role
- UX Designer / UI Designer / UX Writer
- Period
- 4 weeks
- My Contributions
- Information architecture · Design system · Responsive UI design · UX writing
- Platforms
- Responsive marketing website
- Collaborators
- Client team, engineering (dev handoff)
- Methods
- Market/competitive analysis, IA restructuring, wireframing, prototyping, usability testing, style guide
- Outcome
- Shipped a responsive marketing site and reusable design system that also showcases the client's own AI website-builder platform
The constraint
Spira9 builds AI website-building software, and this project was the company's own marketing site — which meant it had to double as a working showcase of the builder itself. That created an unusual restriction: I could change section backgrounds, add visual guiding elements, and adjust the overall layout orientation, but the underlying structure was fixed by the platform I was designing inside of. The brief wasn't "design freely," it was "design distinctively within a template" — closer to choreographing within a fixed stage than building the stage itself.
Building the system first
I started with market and competitive analysis across digital marketing and AI website-building tools, then rebuilt the information architecture before touching any visual design — deciding what a visitor should understand, and in what order, before colour or layout entered the conversation. I designed in greyscale first, specifically to prove the hierarchy worked without colour doing the work for it; colour went back in afterward to create emphasis, not to compensate for unclear composition.
I also set the style guide — type, colour, components, spacing, responsive rules — before high-fidelity screens multiplied, rather than documenting it retroactively. That decision held up better in principle than in practice: since this was a team effort, the colour palette wasn't followed strictly from the start, and I had to go back and clean up the design system once the drift became visible. The lesson wasn't "build the system first" — I already believed that — it was that a system only holds if everyone building against it treats it as fixed, not a suggestion.
The showcase
The result needed to work two ways at once: a marketing site persuasive enough to bring in Spira9's own clients, and a live proof point for what their AI builder could produce. After usability testing and a handoff round with engineering — iterating on what was actually feasible before locking in responsive breakpoints — the site shipped as both.
Outcome
Shipped a responsive marketing site and reusable design system that also functions as a live showcase of Spira9's own website-building platform. No conversion-lift numbers are available in the source material — described here by what shipped, not invented metrics.
Takeaway
Constraints tell you where to design — when layout freedom is limited, hierarchy and consistency have to do more work. And a design system isn't real until the whole team is actually building against it, not just referencing it.