Created scalable templates and reusable patterns, helping define a flexible library system that improved authoring efficiency and established a unified foundation across Manulife’s global public sites.
Manulife’s global marketing teams manage a vast network of product pages and regional sites. However, the existing manulife.com lacked a unified design system with each page relying on ad-hoc content blocks that varied in style, layout, and functionality. This inconsistency created usability and accessibility issues, increased authoring effort, and slowed down global adoption of new content. We created a reusable system of AEM components and templates that not only enforced design consistency but also embedded good UX practices directly into the authoring workflow.
Deliverables
Combine atomic GDS components into repeatable AEM fragments (patterns) that address shared user needs across sites.
Design a scalable set of reusable templates to structure public-site content and support consistent experiences.
Capture workflows, authoring behaviors, and governance insights with the goal of informing future adoption across global sites.
Content Block Mapping
We began by mapping content blocks on existing manulife.com pages. This process revealed recurring design patterns and inconsistencies that created friction. By breaking each page into discrete blocks, we could evaluate which elements could be reused, refined, or reimagined for future templates.
Theme Creation
Workshopping in collaboration with the client, we created themes that helped us understand what types of content blocks authors needed most frequently. And guided the selection of components that would become reusable AEM patterns.
GDS Based Wireframing
Next we translated existing pages into wireframes using GDS atomic components. The GDS library offered a consistent starting point for assembling larger patterns like hero banners, article grids, and content cards. I analyzed each page to understand user intent and hierarchy. Balancing pattern reuse with user-centered adjustments, I ensured the wireframes remained true to Manulife’s brand while improving clarity, accessibility, and visual appeal.
Design & Stakeholder Approval
We presented responsive designs for each AEM fragment to key stakeholders during a fast-paced, one-week sprint. These reviews aligned immediate business goals with long-term scalability needs, allowing design, development, and authoring teams to build confidence in the system’s flexibility.
Annotation for Authors & Developers
Each component was documented and annotated in Figma with clear guidance for responsive behavior, accessibility, and authoring rules. Ensuring that authors could build pages confidently within AEM and that developers had unambiguous references for implementation and QA.
Outcomes
Delivered a cohesive library of GDS-aligned AEM patterns to make new templates across Manulife’s global ecosystem.
A set of templates that can be used to build websites, reducing author effort in pulling together a list of necessary fragments each time.
Figma Library with documentation for non-technical teams to build and edit pages without relying heavily on developers.
This project reinforced how design systems bridge UX strategy, content operations, and global governance. By engaging stakeholders early, documenting every pattern, and grounding each decision in user needs, we built a flexible yet disciplined foundation that will support Manulife authors.
