Designing better building blocks

Modernising the Universitys CMS with AEM out-of-box features bringing consistency, accessibility, and greater author control to a previously rigid system.

Employer

University of Sydney

Employer

University of Sydney

Employer

University of Sydney

Role

Senior UX Designer

Role

Senior UX Designer

Role

Senior UX Designer

Platform

Adobe Experience Manager (Web)

Platform

Adobe Experience Manager (Web)

Platform

Adobe Experience Manager (Web)

When

2022

When

2022

When

2022

Mock up of navigation on a macbook and iphone
Mock up of navigation on a macbook and iphone
Mock up of navigation on a macbook and iphone

The challenge

The challenge

The challenge

An enterprise web builder lacking versatility, consistency and accessibility

01

One-size-fits-all

Content pages, landing pages, and category pages all used the same rigid three-column template. With no variation, authors couldn’t design for different goals.

01

One-size-fits-all

Content pages, landing pages, and category pages all used the same rigid three-column template. With no variation, authors couldn’t design for different goals.

01

One-size-fits-all

Content pages, landing pages, and category pages all used the same rigid three-column template. With no variation, authors couldn’t design for different goals.

02

Visual chaos

Lacking a design system, devs relied on local CSS—leading to visual inconsistency. As the brand evolved, the site became more fragmented and off-brand.

02

Visual chaos

Lacking a design system, devs relied on local CSS—leading to visual inconsistency. As the brand evolved, the site became more fragmented and off-brand.

02

Visual chaos

Lacking a design system, devs relied on local CSS—leading to visual inconsistency. As the brand evolved, the site became more fragmented and off-brand.

03

Accessibility wasn’t built in

Templates and components lacked semantic structure, ARIA labels, and colour contrast compliance.

03

Accessibility wasn’t built in

Templates and components lacked semantic structure, ARIA labels, and colour contrast compliance.

03

Accessibility wasn’t built in

Templates and components lacked semantic structure, ARIA labels, and colour contrast compliance.

04

Authors needed guard rails

Most authors lacked web experience to use AEM effectively—so we has to balance flexibility and governance.

04

Authors needed guard rails

Most authors lacked web experience to use AEM effectively—so we has to balance flexibility and governance.

04

Authors needed guard rails

Most authors lacked web experience to use AEM effectively—so we has to balance flexibility and governance.

Discovery & planning

Discovery & planning

Discovery & planning

Building as we learned, scoping what mattered

I put components under the microscope to see what stayed, what broke, and what was missing.

I audited every component and template in use, noting their inconsistencies and workarounds. By pairing this with author feedback and AEM documentation, I could see which parts to reuse, which needed redesigning, and which patterns were missing altogether.

I then worked with devs early to pair designs with platform capability

I reviewed AEM’s core components and editable templates, surfacing functionality that had been overlooked. By pairing this with early dev input, I made sure design ideas aligned with what was technically feasible.

Defined 3 distinct and achievable core templates

Rather than trying to fix everything, we focused on three versatile templates: landing page, content page, and news article. These formed the foundation of the system—flexible enough to power most of the site, without overwhelming the build.

Content page

For text-heavy pages e.g. informational pages, guides and FAQs. Designed for readability.

Content page

For text-heavy pages e.g. informational pages, guides and FAQs. Designed for readability.

Content page

For text-heavy pages e.g. informational pages, guides and FAQs. Designed for readability.

Landing page

For campaign-driven pages or category-pages—balancing visual engagement with flexible structure.

Landing page

For campaign-driven pages or category-pages—balancing visual engagement with flexible structure.

Landing page

For campaign-driven pages or category-pages—balancing visual engagement with flexible structure.

News article

For stories and blogs. Optimised for clean typography, photography and embedded media.

News article

For stories and blogs. Optimised for clean typography, photography and embedded media.

News article

For stories and blogs. Optimised for clean typography, photography and embedded media.

Release and learn

Release and learn

Release and learn

Design, build and learn

I iterated on the content page template to bridge design and feasibility

I iterated on the content page template to bridge design and feasibility

I iterated on the content page template to bridge design and feasibility

Starting with AEM’s basic out-of-the-box core components, I collaborated with the AEM tech team and the creative studio to shape a template that was both technically feasible and aligned with our new visual identity.

Soft release to learn fast before scaling up

Soft release to learn fast before scaling up

Soft release to learn fast before scaling up

Instead of launching every new template at once, we released a single content page template with a suite of new components to a small group of authors. This let us validate technical performance, gather feedback, and refine the system before rolling it out more broadly.

User feedback workshop to shape future templates

User feedback workshop to shape future templates

User feedback workshop to shape future templates

After the soft release, we brought early authors into a workshop to share their experiences with the first content page template. Their feedback surfaced what worked, where they struggled, and what patterns they still needed — insights we carried forward into the design of future templates.

Workshop learnings

01

More choice = more decisions

Authors welcomed the flexibility of new components, but some felt slowed down by the need to constantly decide which option to use. What was meant to empower sometimes introduced hesitation.

01

More choice = more decisions

Authors welcomed the flexibility of new components, but some felt slowed down by the need to constantly decide which option to use. What was meant to empower sometimes introduced hesitation.

01

More choice = more decisions

Authors welcomed the flexibility of new components, but some felt slowed down by the need to constantly decide which option to use. What was meant to empower sometimes introduced hesitation.

02

User confidence varies

Some authors dove in and experimented, while others were uncertain and wanted clearer guardrails. This highlighted the need for both autonomy and stronger guidance.

02

User confidence varies

Some authors dove in and experimented, while others were uncertain and wanted clearer guardrails. This highlighted the need for both autonomy and stronger guidance.

02

User confidence varies

Some authors dove in and experimented, while others were uncertain and wanted clearer guardrails. This highlighted the need for both autonomy and stronger guidance.

03

Academics require specialised patterns

Standard templates covered most needs, but research and faculty teams raised gaps unique to academia — from academic profiles to showcasing publications and media mentions.

03

Academics require specialised patterns

Standard templates covered most needs, but research and faculty teams raised gaps unique to academia — from academic profiles to showcasing publications and media mentions.

03

Academics require specialised patterns

Standard templates covered most needs, but research and faculty teams raised gaps unique to academia — from academic profiles to showcasing publications and media mentions.

Final result

Final result

Final result

A navigation system that balances depth, flexibility, and consistency across the entire USYD website.

Landing page brand identity while guiding users with bold visuals and clear focus points.


Three-level mobile navigation enables users to move freely across sections before committing to a page.

Landing page brand identity while guiding users with bold visuals and clear focus points.


News article combines bold imagery with clean typography to keep the story front and centre.

News article combines bold imagery with clean typography to keep the story front and centre.

Content page structures detailed information with clarity, using features like a table of contents to keep users oriented.

Content page structures detailed information with clarity, using features like a table of contents to keep users oriented.

Hero variants allow authors to showcase different image ratios without losing brand impact.

Hero variants allow authors to showcase different image ratios without losing brand impact.

Standard iconography creates consistent visual cues, replacing the inconsistent one-offs

Standard iconography creates consistent visual cues, replacing the inconsistent one-offs

Testimonial variants offer big statements for impact or multiples for strength in numbers.

Testimonial variants offer big statements for impact or multiples for strength in numbers.

Card design consistent across site and content types, establishing consistent design language.

Card design consistent across site and content types, establishing consistent design language.

Satisfied authors provided the best proof of success; genuine, positive feedback.

Satisfied authors provided the best proof of success; genuine, positive feedback.

Project won 2 internal awards for excellence at the University.

Exponential adoption rate showed the new templates met real author needs and spread fast.

Exponential adoption rate showed the new templates met real author needs and spread fast.

More projects