Manulife Developers

Designing developer.manulife.ca, Manulife's first engineering outreach web platform



Overview
developer.manulife.ca 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! The plant hints at the direction we're moving towards!


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.


Timeline
September 2019 - January 2020


Tools
Figma, Sketch, Axure, InVision, Photoshop, Zeplin

Project Background

Problem
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?"



Goal
To increase the number of engineering co-op applicants

Product Preview

Sneek peek at our product


Research

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

To better understand website branding that my PO envisioned, I explored a couple developer websites he recommended. HOWEVER, our website would be split into phases and the first release that I was working on would not support certain developer site features such as APIs. Hence, I picked a few more websites to understand the designs of blog, event and student career pages, 3 pages the PO pushed to include in the website. Here are a few key pages I looked into.


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.

Objectives

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

Brainstorming + Ideating
I sat in front of a whiteboard to outline the main objectives we hoped to achieve with this website and how each page would contribute to it before I pulled in others for opinions. Unfortunately there were no fixed project members and the people I hoped to pull in to discuss ideas, were not available to meet either online or in-person at the same time.

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.


Takeaways



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

Unfortunately, there are no prior metrics I could gain access to. I was hoping to have metrics such as bounce rate and session durations from the student, careers and media pages across manulife.ca and manulife.com. Although I was unable to obtain data, I selected a central KPI with other metrics that I felt were best suited for this website, to monitor and evaluate its performance.


Central KPI
Total session duration spent upon a users’ first visit


Sample Metrics
While I cannot share our targets, I proposed multiple KPIs and metrics that we should track. Here's a sample of the marketing metrics that we plan to track upon the first release.


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

It was time to hit the whiteboard again to create page layouts. I organized a couple sessions with the senior UX designer and kept my PO and a developer in the loop to ensure the design met their business and technical needs. The wires were further developed in Axure where I iterated on content and component placements.



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. This is due to the design system currently being under development and I hoped to support my proposals for new design system components, with results from testing. To do this, 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).


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.


Solutions

Applying for Student Career Opportunities
The primary selling point behind the first release of this process is to streamline the application process and sell the engineering co-op program at Manulife to post-secondary students.

NOTE: How students apply for engineering co-op positions is in the process of being reworked so that students enrolled in a co-op program do not have to apply through Workday but for now, any student can apply through this page.



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. So how many roles will there be when we introduce Toronto and Montreal?



Events Hosted + Supported by Manulife
This page features Manulife hosted events open to the public and events open to Manulife employees only and events that Manulife sponsors. Public events are the ones visitors would be most interested in as they can attend them. Private events may not be open to the majority of visitors but they provide a glimpse of what they can experience if they join the engineering division at Manulife. Sponsored events are events that the public may be able to attend, but are not hosted 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
The idea of the blog was to share updates on Manulife’s transformation within the Engineering division and how it’s affecting the company as a whole. The blogs I predict that will interest our visitors the most for this first release, would cover co-op experiences, design and development tips and other career-related content.

NOTE: The blog feed and post templates have not be designed or developed yet in our AEM system but I communicated with the UI designer who had been researching this to understand the direction Manulife was moving in. I combined ideas from his mockups and my mood board to create this final layout.



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

BiteCheck

Chromaz

uwmidsun.com