← Portfolio
← Portfolio
Translating a multi-stakeholder creative vision into a complete agency website — style guide, desktop and mobile designs, wireframes, and animation integration, all executed in Adobe XD.
The Squeaky website was a true team effort — involving the creative director, senior designers, and company leadership, each bringing strong opinions on direction, tone, and visual identity. The challenge wasn't just designing a website; it was functioning as the design hub for a multi-stakeholder process, absorbing every input and translating it into a coherent, buildable outcome in Adobe XD.
With so many decision-makers in the room, the real design problem was maintaining forward momentum. I was responsible for advancing the site at every stage — keeping the file current, integrating feedback loops, and ensuring the work never stalled waiting on consensus.
Translated early concept discussions into low and mid-fidelity wireframes in Adobe XD — creating a shared visual language the whole team could react to and align around before committing to any direction.
Ran iterative colour explorations directly in XD, testing palette combinations against the brand's voice and presenting options to the creative director and leadership for decision-making.
Defined the image treatment direction — scale, crop logic, and integration with the grid system — ensuring visual consistency across all sections and both breakpoints.
Built interaction and animation prototypes directly inside Adobe XD — documenting transitions, hover states, and scroll behaviours as part of the handoff specification.
Participated in quality assurance review of the live site — cross-checking the build against the XD designs, flagging visual discrepancies, and verifying animation behaviour and responsive breakpoints across devices.
Every output was built and maintained in Adobe XD — from the foundational style guide through to fully responsive desktop and mobile designs, with animation specifications woven throughout.
Typography · Colour · Spacing · Grid · Iconography · Imagery rules
Full-width layout · Section-by-section design · Hover states · Animation specs
Responsive layouts · Adapted grid · Touch interaction patterns · Scroll behaviours
Animated XD prototype with transitions, micro-interactions, and scroll animation specs for dev handoff
The Squeaky brand system is built around a high-contrast palette, bold editorial typography, and a rigid grid — communicating authority, energy, and creative confidence in equal measure.
The team included the creative director, senior designers, and company leadership. My role was to be the person who made it all move — gathering every input and keeping the design file advancing at every stage.
Adobe XD as the primary design and prototyping tool throughout the entire project
Fully designed breakpoints — desktop and mobile — delivered as complete, production-ready files
Unified style guide covering all visual tokens, grids, and component rules for the full site
Iterative feedback loops absorbed, versioned, and resolved — keeping every stakeholder aligned without stalling progress
