Agency Website
A complete agency website designed from scratch under a six-week deadline, with no existing design language and an intentionally avant-garde creative direction.
Client
On Ideas
Year
Apr–Jun 2023
Role
UI/Marketing Designer (via Toptal). Sole designer covering information architecture through production-ready component library.
Stack
Figma
Context
On Ideas had the brand presence and the client names. What they didn't have was a website that matched either. The brief wasn't to fix the existing site, it was to build something new from the ground up, one that could hold a collage-led, avant-garde visual language and still function as a coherent agency portfolio. No existing design system, no component library, no grid specification. Just a creative direction and a hard deadline.
Problem
I came in through Toptal to cover a maternity leave: six weeks, one designer, a website that didn't exist yet. The deadline was fixed. The creative direction was clear in spirit, bold, layered, visually restless, but nothing was defined on the page. No grid, no type scale, no colour decisions, no components. The risk wasn't the ambition of the design. Avant-garde layouts are solvable. The risk was that without structure underneath them, they become impossible to hand off. A collage design with no system behind it is six weeks of work that engineering can't build.
Approach
The first decision was to start with information architecture before touching visual design. With a deadline this tight, it would have been tempting to open Figma and start making things look good. That's the wrong order. IA first meant the client was making structural decisions early, how services are categorised, how case studies are surfaced, what the navigation needs to carry, before any of that got locked inside a visual treatment that was harder to unpick.
The second decision was to build foundations before layouts. Colour tokens, type scale, spacing system, and a component library were established before any page got designed in full. This wasn't overhead, it was the only way to make the collage aesthetic work under constraint. When every layout element pulls from a defined set of values, visual variety doesn't become visual chaos. The avant-garde direction was achievable because the system underneath it was strict.
The third decision was to prototype at low fidelity before committing to high-fidelity layouts. Given the creative direction, it would have been easy to spend the first two weeks making a hero section beautiful and run out of time on everything else. Low-fidelity prototypes let the client validate the IA and interaction patterns fast, so high-fidelity effort went where it was actually needed.
Work
The IA phase produced a site structure covering nine surfaces: Home, What We Do, Our Expertise, Services, Industries, Portfolio of Work, Team Culture, Community Impact, and Meet Us. Each section had a defined content hierarchy before a single high-fidelity frame was produced.
Foundations were built as a token-based system in Figma: a tight palette of orange, teal, cream, and near-black, with clear typographic roles, a spacing scale, and an icon set. The colour decisions were made to give the collage direction a consistent temperature. Warm, saturated foregrounds against neutral or dark backgrounds, with teal as the single cool accent to create contrast without breaking the system.
Components were built for every repeating pattern: navigation (including the full-screen overlay variant), card types, hero variants, stat blocks, image grids, and the footer. The nav overlay — full orange, large type, image on hover — is the most characterful component in the system, and the one that sets the tone for the rest.
Outcome
The project delivered a production-ready design system and complete high-fidelity layouts for all nine site sections within the six-week window. The client signed off without revision cycles on the overall direction — the IA-first approach meant structural decisions were resolved early and didn't come back as late-stage redesigns.
The system handed off cleanly to development. The collage aesthetic held because the foundations were tight enough to give developers clear rules, not open-ended creative decisions to interpret at build time.
Reflection
Six weeks with nothing defined is a constraint that clarifies decisions fast. The IA-first call was the one that mattered most — it bought alignment early and meant the high-fidelity work never had to be unwound. On a longer engagement I might have spent more time stress-testing the component system against edge cases before handoff. Here, the discipline was knowing which corners to cut and which ones to hold.
