Manulife Developers

Designing, Manulife's first engineering outreach web platform

Overview is a business website aiming to generate awareness about engineering at Manulife. The site is currently in development and scheduled for release in mid February.

NOTE: Plant banners are placeholders - we're currently designing these!

Team + Role
The project team consisted of a Product Owner (PO) and myself. I took ownership of research, content writing and strategy and the design, while receiving guidance from a senior UX designer, senior UI designers, a content strategist, marketing officer and 3 web developers. A second UX Design co-op has joined the team.

September 2019 - March 2020

Figma, Sketch, Axure, InVision, Photoshop, Zeplin

Currently being developed and scheduled for release at the end of March

Project Background

When someone hears Manulife, they immediately think of insurance and finance. How about Manulife Engineering? The majority believe their technology and processes are dated. This happens to also act as a disincentive for students to apply for engineering co-op/internship positions.

How might we incentivise students to apply for jobs at Manulife and have them work here & to have students say “I want to work as a developer / designer at Manulife?"

To increase the number of engineering co-op applicants

Product Preview

Here's a sneak peek at our landing page!


The Company and Brand
I had only spent a day in the office when I was given the project and so I needed to understand Manulife and Manulife Engineering better. This website was to be created for the engineering team and they were adamant about designing the website with some engineering brand elements.

"We're working towards transforming Manulife into a tech company that functions as a finance firm rather than the reverse."

Understanding Users Perspectives
I surveyed 38 primary target users and conducted 5 in-person user interviews to better understand how students view software/design work in the financial industry and co-op application processes. I identified these key considerations:

I also pinpointed the top 3 reasons why users do/do not want to apply for engineering positions in companies in the financial industry:

This information would help us identify the areas of improvement and determine the messages we aim to communicate through visuals and written content.

Analyzing Current Co-op Application Flows

With applications for co-ops being the main interaction the site supports, I decided to investigate the different paths our current users take to apply for co-op positions.

External Applications
Applications done outside of a university portal / co-op program

Internal Applications
Applications done through a university portal (WaterlooWorks + Laurier Navigator)

Pain Points
1. Takes too long to search for relevant job information online

2. Takes too long and too much effort to apply for a single co-op position

3. Little incentive to apply to Manulife as they probably lack innovation like other finance companies

Competitive Analysis

Interac Blog Posts

Takeaways : Differentiates written vs. media posts by adding ‘VIDEO:’ to the title.

Opportunities : Since it has been predetermined that our primary navigation bar will be on the left side, we will avoid utilizing additional side navigation elements to prevent confusion.

Wish University Page

Takeaways : Table for job opportunities is sortable and filterable and paragraphs are short, concise and to the point. Lots of negative space between sections within the page.

Opportunities : Will utilize a shorter banner so that we may show the user more content upon landing on a page.

Shopify Internships Page

Takeaways : Alternating text and imagery alignments and catchy titles draw the user in.

Opportunities : Will avoid multiple columns of text. This will hopefully appear less intimidating visually and better match the F-pattern the reader follows when reading.

Shopify Meetups Page

Takeaways : Eye-catching visuals are used to provide location context for the same type of events that are in different locations.

Opportunities : Will provide more location information and more details students would like to see, on the event summary card, if we use an Events feed page.

Manulife Students Page

Takeaways : Past employee quotes are inviting and draw attention

Opportunities : Will limit the use of accordions and other elements that hide content and limit the number of tertiary CTAs that have the users leave the page as we hope they will find all the information they need on our students page.


Business / Attract New + Young Talent
Convince students and the younger generation that Manulife is not behind in the times and keeping up with the technology trends.

Development / Low Maintenance
The site was to be created with Adobe Experience Manager (AEM) and with preset Manulife templates and components whose contents and styles can be manipulated, but not their functions. Updates would be slow as this site is not the developer teams’ priority.

Design / Easy to understand at a glance
After browsing through over 17 Manulife websites, each one had common Ux problems - confusing navigation and inefficient communication. We want to make sure users understand the main points in less than 3 sentences and minimize the amount of page jumping they need to do to finish what they came here to do.

Building Out Content

I pulled a variety of co-workers who worked in back-end, front-end, program management and other areas unrelated to design, to generate as many ideas or elements and content as possible for the different pages.

Content Collection
After summarizing the key takeaways I reached out to individuals who would assist in creating the content for each page. There were a total of 6 pages I would need to write content for and so this meant at least 6 people to ask guidance from as I was not the expert in writing these from a Manulife perspective. I arranged multiple meetings with them as well as a manager of the simplified communications team (content strategy), to ensure page content is accurate and effectively delivers the correct message.

Site Map
A site map was created after after analyzing my user research findings and discussing the scope of the project timeline with the PO (and yep, it went through multiple iterations)!

The site map below is the outline for phase 1. I have created a site map which includes content for Future phases but cannot post due to confidentiatlity matters.

User Flows

I mapped out 3 major user flows to outline entry points, the steps the user will take and important elements in our site. Below, is the most important flow in our site

NOTE: these flows were in the preliminary phases of the design of the website and had been altered in the wireframes and mockups stages.

Applying for a co-op job

Measuring Sucess

While there were no prior metrics I could gain access to, I decided to create my own to monitor and evaluate its performance. I selected a central KPI with other metrics such as bounce rate and session durations, that I felt were best suited for this website.

Central KPI
Number of applications submitted

Style Guide

Using Manulife's Canadian Design System, I created a style guide specifically for the website to ensure visual design remains consistent.

Wireframes + A/B Testing

Why A/B Testing
In addition to wanting to learn how well the designs fulfill the goals, I hoped to experiment with content layouts and navigation options within a page, but some did not exist in the Manulife design system. I proposed we conduct A/B testing, which would allow a comparison between designs using existing or non-existing components. Results would tell us which offers a better user experience as well as the need for new navigation and styling options. I created a test plan with open-ended questions and conducted 8 tests (4 for each design).

Design A

Features : Anchor Links allow users to quickly navigate within a page. Sectioned Quotes keep the content's page layout consistent, where related information is in one section.

Limitations : Users are only inclined to read the first quote, and using the anchor links to jump around the page may cause confusion.

Design B

Features : Scattered Quotes provide the users with a 'break' between sections.

Limitations : Quotes may disrupt the flow of the page's content.

Test Results
I compiled the key findings from the tests to show the need for layout and content changes, which would accompany my proposed ideas to my PO. Here are a few quantified results from our Internships page.


Applying for Student Career Opportunities

Key Feature: Interactive Table

Justification: After considering the addition of more co-op roles in the future, and the users needs to quickly search for specific positions, the table was the most suitable choice to display student opportunities. The table allows users to filter by location and roles, which will especially help them when there are several roles offered. Currently, there are 6 types of positions with over 50+ openings in the KW region for Manulife.

About the Engineering Team

Key Feature: Timeline

Justification: We wanted to clearly and quickly tell readers that Manulife has come a long way in the past couple years. A static timeline was quick to implement, meeting our developer needs, and effectively delivered meaningful information to readers, as proven during 10-second tests that were quickly conducted with university students.

Events Hosted + Supported by Manulife

Key Feature: Anchor Links

Justification: Also seen on the co-op page. The anchor links provide options for users to efficiently navigate to specific sections within a page. This is especially helpful for these long, descriptive pages. The links also provide an overview of what is on the page, which was a key point noted by the majority of testers who tested the anchor links, during A/B testing.

Blog + Updates on Manulife's Transformation

Key Feature: Dropdown Menu

Justification: For future releases, we hope to rollout chips in place of the multi-selection dropdown. Currently, chips are not in Manulife’s Canadian Design System but I have proposed ideas that will hopefully speedup the rollout process. The drop down may hide options but is a friendly feature that is easy for the general majority to figure out how to use.

Results + Next Steps

My 4-month internship at Manulife may have ended, but I have decided to stay part-time to see this project through. The first release is scheduled to be published within the first couple months of 2020.

By the end of my co-op term, I had drafts of mockups for the Internships, Events, Blog Feed and Blog Post pages in mobile and desktop views. Prior to the release, mockups for the About and landing pages will need to be created, reviewed and iterated upon. The AEM team operates with more of a Waterfall approach so I will be working with the AEM team lead to determine developer efforts/allocations. The content strategy team will be pulled in for final content reviews for pages before handing them off to developers.

Portfolio Shortcuts

Project Voice