/ Services / Design Systems

Design Systems Melbourne

Design systems that teams actually use

I build Figma-based component libraries and design systems that keep large UI projects consistent, scalable, and manageable over time. The goal is not just a well-built system but one that your design and development teams actually use, because a design system nobody uses is just a deliverable sitting in a folder.

Want to discuss a design system project?

Why design systems matter

Consistency is not a visual preference, it is a product quality problem

Products built without a shared design system drift. Components that look slightly different across screens, spacing that varies page to page, interactions that behave inconsistently. These things erode user trust, slow development down, and make products significantly harder to maintain. A well-built design system solves all three, and it gets more valuable the larger and longer-lived the product becomes.

Ashley Pickering — rk mockup 3 — Melbourne UI designer

“Ash’s professional approach and experience allow him to seamlessly collaborate with both our team and our clients. His ability to deliver exceptional work across various disciplines has consistently impressed clients, who always rave about his creativity and professionalism. We couldn’t ask for a more reliable team player.”

Josh Hall
Art Director @ MKTG Sports + Entertainment 

“Working with Ash is always a pleasure. His expertise in CSS and JavaScript animation libraries add a polished touch to projects. His handovers are clear and thorough, and he’s great to collaborate with during a build to keep everything on track. It’s rare to find someone with such a strong grasp of both design and development.”

Rao Abid Ali
Lead Developer @ BJM Digital 

“We’ve been working with Ash for years now and he never disappoints. His wealth of web and UI experience has been invaluable to our digital offering, and clients love him for it. He brings an extra layer of craft and polish to everything he touches.”

Chris Harris
Creative Director & Founder @ Redkite.Design Agency

“Working with Ash was one of those rare experiences where the work comes back better than you imagined. His ability to bring motion and storytelling into a digital experience is genuinely impressive, and he does it without making it feel overdone. Real craft.”

Lee Mate
Head of Digital @ Excite Media Agency

“Ash is the definition of a pro. His creativity is consistent, industry-leading, and bang on time. Clients love when Ash is at the helm; he always listens intently where you feel totally heard, all the while his capabilities and understanding give total confidence in the design direction and execution of every project.”

testimonial alex tinyAlex Power
Senior UX Designer @ GS1 Australia

“Working with Ash as a fellow designer was a great experience. He understood the brief quickly, worked confidently within the existing brand, and produced work that genuinely elevated what we had. His handovers were clean and well-considered, which made the whole process feel collaborative rather than transactional. I’d work with him again without hesitation.”

Lester Quong
Product Designer @ TIG Freight

“Ash made the whole process straightforward from start to finish. He took the time to understand what TIG needed, asked the right questions, and came back with a site that genuinely reflects who we are as a business. Communication was clear throughout and the end result has made a real difference to how we present ourselves online.”

Tristan Johnstone
Marketing Manager @ TIG Freight

“Ash was a strong addition to the ThreeScoops team. He operates at a senior level across web, UI and brand, and consistently delivered work that clients were genuinely excited about. He fits into an agency environment naturally, takes direction well, and brings his own ideas to the table when it counts. Reliable, talented, and great to work with.”

PC Le Roux
Art Director @ ThreeScoops Creative

“From a developer’s perspective, Ash is exactly who you want designing the things you have to build. His files are well-organised, his components are logical, and he actually understands how things get built. He’s easy to collaborate with during a build and always open to a conversation if something needs to be adjusted. It genuinely makes the development process smoother when Ash has done the design work.”

testimonial lluisLluis Mioche Grases,
Senior Developer @ BJM Digital

“Ash was a core part of the BJM Digital team for six years and his contribution to the agency was significant. He brought a level of craft and consistency to every project that clients noticed and appreciated, and he played a real role in helping us grow our digital offering. He’s the kind of designer who takes ownership of his work and makes everyone around him better. I’d recommend him without reservation.”

Ben McIntyre,
Director @ BJM Digital

“Ash is one of the most reliable designers I have worked with. He hit his deadlines, communicated clearly, and consistently produced work that clients got excited about. The feedback we received from clients about working with Ash was always positive, which says a lot.”

Matthew Woods,
Digital Optimisation @ DuluxGroup

“Working with Ash was straightforward in the best possible way. He understood briefs quickly, delivered work that rarely needed significant revision, and clients genuinely enjoyed working with him. We regularly got unsolicited positive feedback from clients about Ash specifically, which is not something you can say about every designer.”

Stuart Goss,
Senior Project Manager @ Jetstar

Design system process

From audit and foundations through to a working system your team can grow with

Tools & Apps

01. Audit and Discovery

Before building anything new I want to understand what already exists. For an established product that means reviewing current components, identifying inconsistencies, and understanding how designers and developers are working today. For a new product it means understanding the brand, the technical stack, and the scope of what the system needs to cover.

Component Audit

Reviewing existing UI components across the product to identify duplicates, inconsistencies, and gaps. Understanding what exists before deciding what to build or rationalise.

Brand and Visual Review

Reviewing existing brand guidelines, visual language, and any existing design files. The system needs to reflect and reinforce the brand, not work against it.

Scope and Priorities

Agreeing on what the system needs to cover, in what order, and to what level of detail. A focused system shipped and adopted is more valuable than a comprehensive one that nobody uses.

02. Foundations

The underlying layer that everything else in the system builds on. Colour, typography, spacing, elevation, and motion defined as tokens and documented clearly. Getting foundations right before building components means the whole system is easier to update and theme later.

Colour Tokens

Semantic colour tokens that separate visual decisions from functional ones. Brand colours, UI colours, and state colours defined and named so they can be applied consistently and updated centrally.

Typography Scale

A systematic type scale with defined styles for headings, body, labels, and captions. Consistent across the product and mapped to tokens so it can be adjusted globally.

Spacing and Grid

A consistent spacing scale and grid system that gives every layout decision a predictable foundation. Reduces the guesswork that leads to inconsistent padding and margins across the product.

03. Component Library

Building the component library on top of the foundations, starting with the highest-frequency elements and working outward. Every component built with variants, states, and properties that cover real usage rather than just the happy path. Auto-layout throughout so components resize predictably and behave correctly at every scale.

Core Components

Buttons, inputs, forms, navigation, cards, modals, and other high-frequency components built first. The elements used everywhere, which means they have the most impact on consistency.

Variants and States

Every component built with its full range of states documented. Default, hover, focus, active, disabled, loading, error. Not just the state you need right now but the ones you will need when the product is live and in use.

Responsive Behaviour

Components documented with their responsive behaviour across breakpoints. How they adapt at mobile, tablet, and desktop so there is no ambiguity during development.

04. Documentation

A component library without documentation is just a collection of Figma frames. Documentation is what turns it into a system. Usage guidelines, do and do not examples, when to use which variant, how components combine with each other. Written for both designers and developers so the system works as a shared reference rather than something only one team understands.

Usage Guidelines

Clear guidance on when and how to use each component, including common mistakes to avoid. Written so a new team member can get up to speed without needing to ask.

Developer Specifications

Component specs structured for Figma Dev Mode, with token references, spacing values, and interaction behaviour documented so developers can implement accurately without back and forth.

Contribution Guidelines

Clear processes for how new components get proposed, reviewed, and added to the system. Without contribution guidelines the system grows inconsistently over time.

05. Team Training and Handover

Handing over a finished system without supporting the team through adoption is one of the most common reasons design systems fail. I work with your designers and developers during the initial adoption period to make sure the system becomes part of how they work, answer questions as they come up, and make adjustments based on real usage rather than assumptions.

Designer Onboarding

A walkthrough of the system with the design team covering how to use the library, how to extend it, and how to handle situations not yet covered by existing components.

Developer Handoff Session

Walking the development team through the component library, token structure, and documentation so they understand how the system works and how to implement it accurately.

Post-Launch Support

Available after handover to answer questions, review how the system is being used, and make updates as the product grows and new requirements emerge.

06. Ongoing Maintenance

A design system is not a one-time deliverable. Products grow, requirements change, and the system needs to grow with them. I am available for ongoing maintenance, whether that is adding new components as the product expands, updating the system when the brand evolves, or reviewing how the system is holding up in practice and addressing gaps.

Component Expansion

Adding new components as the product grows, following the same standards and documentation approach as the original system so it remains coherent over time.

System Audits

Periodic reviews of how the system is being used in practice. Identifying components that have drifted, documentation that needs updating, and patterns that have emerged organically and should be formalised.

Brand and Product Updates

When the brand evolves or the product pivots, the system needs to evolve with it. Because the system is built on tokens, global updates are significantly faster than updating individual components one by one.

Featured design systems work

A selection of projects where design systems, component libraries, and UI consistency were central to the work.


More services

Get the full creative solution with my other services.

  • eCommerce Web Design

    WooCommerce design and builds that make browsing feel natural and buying feel easy. Designed around how customers actually shop, from product page through to checkout.

    View Service: eCommerce Web Design
  • Freelance Designer For Agencies

    Senior web and UI design delivered under your agency’s banner. White-label, embedded, or project-based. No overhead, no management layers, just reliable senior design.

    View Service: Freelance Designer For Agencies
  • Web App Design

    UX strategy and UI design for web applications and digital products. From user flows and wireframes through to a fully documented Figma handover ready for development.

    View Service: Web App Design
  • UI Design

    Interface design for web platforms, dashboards, and digital products. Wireframes, prototypes, and production-ready Figma files your development team can build from accurately.

    View Service: UI Design
  • WordPress Web Design

    Custom WordPress themes built to match the brand, not a template. Fast, clean, and manageable by your team without developer support for routine updates.

    View Service: WordPress Web Design
  • Web Design

    Strategy, responsive design, and WordPress builds for businesses and organisations across Melbourne and Australia. Designed to perform as well as it looks.

    View Service: Web Design

Design systems questions

Common questions about design systems and Figma component libraries

What is a design system and do we actually need one?

A design system is a shared set of components, foundations, and guidelines that keeps a product consistent and makes it faster to build new things. You probably need one if your product is growing, if multiple people are working on it, if it looks inconsistent across screens, or if development is slow because of constant design ambiguity. Smaller or earlier-stage products might not need a full system, but even a basic component library and token setup pays dividends quickly.

We already have a design system but it is not being used. Can you help?

Yes, and this is a common situation. Systems that are not being used are usually too complex, too poorly documented, or were never properly introduced to the team. I can audit what exists, identify why adoption has not happened, simplify and improve what is there, and work with the team through a proper adoption process rather than just handing over a Figma file.

Do you build the design system in code as well as Figma?

My work is on the Figma side. I design and document the system to a standard that makes it straightforward for developers to implement. I can work closely with your development team during implementation to make sure the code-side components match the design system accurately, but I do not build the code components myself.

How do design tokens work and why do they matter?

Design tokens are named values for design decisions like colours, typography sizes, spacing amounts, and shadow values. Instead of hardcoding a hex value in every component, you reference a token. When the brand colour changes, you update the token once and every component updates automatically. Tokens also create a direct connection between Figma and the codebase, which reduces the manual work of translating design decisions into code.

How long does it take to build a design system?

Depends significantly on the scope. A focused component library for a single product with clear foundations can be delivered in four to eight weeks. A comprehensive system for a large product with multiple teams and platforms takes longer. I give a realistic scope and timeline at the proposal stage based on what the project actually involves.

Can you work with our existing brand guidelines?

Yes. Most of my design system work starts from an existing brand, and that is where I am most comfortable. Taking brand guidelines and translating them into a systematic, scalable digital component library is exactly the kind of work I do. I am not starting from a blank canvas, I am extending what is already there into a proper system.

What happens to the design system when the product grows?

A well-built system should grow with the product. New components follow the same standards and documentation as existing ones, tokens make global updates straightforward, and contribution guidelines mean new additions do not undermine the consistency the system was built to create. I am available for ongoing maintenance if you need support as the product evolves.

What is your availability?

I take on a limited number of projects at a time to make sure each one gets the attention it needs. Get in touch with your timeline and I can let you know what is possible.

Want to discuss a design system project? Get in touch.

Click ● Click ● Click ●