Tamika Dorrington

My Contributions

---

Context

The Manulife.ca website is the primary point of entry for financial advisors in search of tools and marketing material, administrators that manage their company’s benefits program, and members seeking to access their benefits programs.

Following an initial audit of the site content, we found that important information was buried beneath bloated hero images and confusing architecture. The site architecture did not support users on a “discovery” journey, and it was difficult for them to find ways to contact support.

Design System Rollout Strategy

The Canadian division is host to nearly 80 unique websites with varying levels of size, content, and modernization (including some clipart, of course). Part of my role was working with Product Owners to develop a long-term strategy for implementing the new design system. 

We determined that the primary site, Manulife.ca, would be our first target to launch the system. This would allow us to have a significant impact across business units, provide a wide range of template styles to help us develop our components, and would set the tone for how the design system would be used in the future.

Architecture Overhaul

Working closely with our SEO specialist and various SMEs, I was able to restructure the site to optimize for key user journeys and shine a spotlight onto our high-traffic pages. We also consolidated the disparate support pages to create a single Support Centre for both clients and advisors.

Accessibility Considerations

As Manulife is based in Ontario, it was critical that we comply with accessibility requirements set by AODA (Accessibility for Ontarians with Disabilities Act). This was an incredible opportunity for me to collaborate with our in-house Accessibility Expert to ensure WCAG AA compliance.

Atomic Design

We used the Atomic Design method to break down components into their essential parts. This approach meant every pixel and each micro interaction was considered. One of my fondest memories of this project was spending an afternoon with a developer reviewing all the possible animations to include in a loading sequence.

Page Templates

With the scale of this project, it was essential that we worked efficiently. Part of the IA Overhaul included sorting as many pages as possible into high-level templates. This would allow our design team to tackle large sections of the site at once, and to ease the transition for our publishing team working in AEM. Page templates designed with a fluid underlying grid to scale for a wide range of device sizes

The Next Phase

Once the primary site had been launched with our new design system, we needed to apply the same process to countless other sites within the division. The next two candidates were selected for their fundamental differences which allowed our team to get a sense of how far we could stretch our design templates.

Manulife Bank

While similar in structure to the primary site, the bank had many online tools that required more interaction design than the static information pages we had worked on previously. I worked closely with their design team to develop interactions for filtering content on their FAQ page to help users find valuable information about their services.

Manulife Securities

With a small and specific target audience, the Manulife Securities site gave us an opportunity to experiment with a bit more creative freedom when scaling the design system. This also provided an opportunity to work with a UI Designer on creating a library of iconography.

Platinum Winner of the 2020 AVA Design Awards 🏆