Case Study 2: Mitigating Timeline Risks in Website Delivery

Adelaide University

Scalable Design Systems | Risk Mitigation | Tokenised Flexibility | Strategic Design Leadership

Overview & Challenge

In parallel with the IA development, our team were tasked with building a website on AEM. However, a significant challenge emerged when the final brand guidelines from an external agency were significantly delayed, instead of delivering before detailed design, the planned on arriving just before the website launch.

This timeline misalignment meant there was only a 4 week window to integrate the brand to the design and dev, and pass through testing, which in-turn threatened the launch date of the site, and risked consistency and coherence of the site’s visual identity.

To mitigate this significant timeline risk, I led the team to create a white-label, flexible, tokenised system that would allow us to integrate the brand once it was received without major rework.

Approach, Risk Mitigation & Problem Solving

  • Brand-Agnostic, Atomic Design System: Led the creation of a token-first, atomic design system—defining 200+ tokens (colour, typography, spacing, breakpoints, corner-radius, shadows, icons) and 25 AEM-aligned components (300+ variants)—that operated independently of finalised branding. This scaffold ensured any brand update cascaded cleanly through core blocks and allowed styling to flow seamlessly into development.

  • Structured Stakeholder Coordination: Ran 25+ workshops and twice-weekly cross-functional syncs (Design, Dev, Content, plus the external agency’s Creative Lead) to preview guideline drafts, co-design a joint mission statement and roadmap, and validate a prioritized set of 17 “go-to-market” patterns for launch.

  • Automated Delivery Pipeline: Built a Figma → Zeroheight → Storybook → API → Git workflow that automated token and component synchronisation—cutting manual hand-offs, and ensured design docs, code, and QA (including automated accessibility checks) stayed in lockstep.

  • Iterative Prototyping & Prioritisation: Developed high-fidelity wireframes and interactive prototypes with placeholder branding, iteratively refined through multiple internal reviews, and focused effort on the highest-impact patterns first to de-risk launch-critical screens.

  • Seamless Post-Brand Integration: Upon receipt of final brand guidelines, updated tokens, styles, and visual components—enabling full brand application in under two hours without major rework, and securing on-time delivery despite a four-week brand delay.

Results

  • On-Time Delivery: Despite the branding delay, our approach ensured that the website was delivered on schedule without compromising on visual or functional quality.

  • Future-Proof Foundation: The tokenised design system not only met immediate needs but also provided a flexible foundation for future digital initiatives across various platforms, including mobile apps and internal portals.

Key Takeaways

  • Building design systems with inherent flexibility can significantly de-risk projects when external dependencies are delayed.

  • Proactive risk mitigation and frequent validation enables the design to respond to evolving program requirements, ensuring that quality is maintained even under tight timelines.