Thomas Archer Project

Broken files turned into a functional component library. Rebuilt Figma with clear patterns and Tailwind components, turning confusion into seamless collaboration between design and development

Thomas Archer website design – hero section desktop, Melbourne
Thomas Archer website design – mobile hero homepage, Melbourne

The Problem

Thomas Archer is a boutique design and custom home builder in Melbourne. Their website project had stalled after graphic design files were handed over to developers. The Figma files were inconsistent, overly complex, and difficult to translate into code. Developers faced confusion, wasted time, and rising frustration, putting the website at risk.

The Constraints

The original designs were visually strong but not built for digital use. Elements were created individually instead of as reusable components. Styles and colours varied widely, and Photoshop-like effects made development unmanageable. With deadlines looming, the project needed a complete design overhaul without losing the brand’s visual identity.

Thomas Archer website design – portfolio page, Melbourne
Thomas Archer website design – portfolio page, Melbourne
Thomas Archer website design – inner page and mobile homepage, Melbourne
Thomas Archer website design – inner page and mobile homepage, Melbourne

The Solution

We rebuilt the files into a structured component library with clarity, consistency, and usability in mind. Components replaced individual elements, styles were rationalised, and clear naming conventions were established. The redesign balanced visual appeal with functionality, ensuring every detail was achievable in development while maintaining responsiveness and accessibility.

What we did

We acted as the UI specialist, bridging the gap between designers and developers. This meant restructuring every page in Figma, establishing typography, colour, and spacing rules, then building reusable components with Tailwind. Regular communication with Relab’s development team ensured smooth handoff and no surprises. The result was a component library that not only looked good but worked in practice.

Thomas Archer website design – Portfolio section desktop, Melbourne
Thomas Archer website design – Portfolio section desktop, Melbourne
Thomas Archer website design – floor plans page desktop, Melbourne
Thomas Archer website design – floor plans page desktop, Melbourne

The Results

  • Developers worked faster with clear, consistent files
  • Reduced friction between design and development teams
  • A final website that delivered both aesthetics and functionality
  • A stronger foundation for future updates and scalability

Feedback

“The redesign solved the communication breakdown between design and development. The new system is clean, consistent, and easy to work with. It elevated both the process and the end result.”
Alvin S.

Thomas Archer website design – hero homepage, Melbourne
Thomas Archer website design – hero homepage, Melbourne
Thomas Archer website design – Typography, Melbourne
Thomas Archer website design – Typography, Melbourne
Thomas Archer website design – Color pallet, Melbourne
Thomas Archer website design – Color pallet, Melbourne
Thomas Archer website design – Instagram layouts, Melbourne
Thomas Archer website design – Instagram layouts, Melbourne

Ready to grow your Melbourne business with better web design and branding?

Your competitors are already investing in design that wins customers. Let’s make sure yours does too. Book a free 30-minute call with our Melbourne design team.