Yonder
From InDesign to Interactive: Digitising Reports for a Global Property Giant
Translating their Indesign prototypes and designs into Figma, pixel perfect like for like fonts, spacing etc.
Context
Worked for Yonder (the agency) on their website and responsive pages for Goodman (agency's client). Fast paced environment, creating 13 or so desktop designs that contained tables and charts, lists and directories along with a team of 5 inhouse designers (indesign, print) to create the mockups.
Role: UX/UI Designer
Platform: Figma | Web | Responsive Design
Client: Goodman (via Yonder Agency)
Year: 2023
Team
Collaborating with Agency InDesign designers, Developers and Creative Director to Translate their PDF Print documents into Interface
I collaborated with the Yonder team—including five in-house designers (primarily print-focused), front-end developers, and a project lead (Creative Director)—to bring the vision to life. My role focused on bridging the gap between InDesign layouts and developer-ready Figma files.
Problem
Transforming Static Layouts into Interactive, Responsive Interfaces
Goodman’s digital experience needed to evolve from static, print-based InDesign mockups into a fully interactive, scalable website. The designs contained data-heavy components like tables, charts, and directories that had to be translated with pixel precision for screen-based viewing.
Utilising components and styles to speed up the process, comments feature in figma to markup designs and advising their design team on how to implement.
Approach
Creating the page layouts using a Design System from scratch with Precision, Process, and Speed
Translated over 13 desktop pages into Figma with pixel-perfect accuracy. Maintained typography, spacing, and visual hierarchy exactly as intended. Introduced reusable components and styles to improve consistency and efficiency. Used Figma’s commenting and handoff tools to guide development. Supported the team with digital design guidance and UI best practices.
Outcome
A Developer-Ready Design System Rooted in Accuracy and Scalability
The final Figma files were developer-ready, responsive, and scalable—faithfully reflecting the original designs while ensuring they worked seamlessly across screen sizes. The system was built to adapt across future projects and platforms within the Goodman brand.
