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 June 2020


Team
The project team consisted of a Product Owner (PO) and myself. In January, a second UX design co-op joined the team for 4 months. We also received guidance from a senior UX designer, senior UI designers, a content strategist, marketing officer and 3 web developers.


Contributions
I took ownership of research, content writing and strategy and the design of the website. I also scripted the metadata and alternative text, in addition to ensuring we followed the Google guidelines for SEO.


Timeline
September 2019 - May 2020


Tools
Figma, Sketch, Axure, HTML, 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

Here's a sneak peek at our landing page!


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 learn 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 how students currently apply for internships.




Pain Points
From the user interviews and Manulife co-op application walkthrough I conducted with the interviewees, I was able to identify 3 central pain points:

1. Takes too long to search for relevant job information online
Interviewees visited 5+ pages to find any engineering or co-op information about Manulife in both manulife.ca and manulife.com.

2. Takes too long and too much effort to apply for a single co-op position
Job positions cannot be filterable by internships and were only searchable by title, where many were unique and not familiar to the interviewees (e.g. Platform engineer).

3. Little incentive to apply to Manulife as they probably lack innovation like other finance companies
This was the common image that the interviewees had of Manulife when I initially asked them what they knew about Manulife and why they would or would not apply there.

Competitive Analysis

I decided to conduct a competitive analysis to better understand how other companies guide users to complete certain tasks in addition to pinpointing suitable content for a careers and technology website.



Key Takeaways Opportunities
Interac's blog posts are listed in the form of a left navigation and to differentiate written vs. media posts, they add ‘VIDEO:’ to the posts' title. It has been predetermined that a left navigation bar will be used and to prevent reader confusion, we will adopt a similar differentiating method and avoid using additional side navigation elements.
Wish uses a sortable / filterable table to show job opportunities and paragraphs are short, concise and to the point. Lots of negative space between page sections. We will utilize a shorter banner so that we may show the user more content upon landing on a page.
Shopify's Internship page alternating text and imagery alignments and catchy titles draw the user in We will avoid multiple columns of text. This will hopefully appear less intimidating and better match the F-pattern the reader follows when reading.

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

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.




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
Aiming for a 10% increase in the total number of applications submitted between the Spring 2020 application term to the Spring 2021 application term.


Additional Metrics / Total session duration spent upon a users' first visit
Aiming for 2 minutes, the average time students spend researching companies, which was identified during the user interviews

Style Guide

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


Typography



Colours

Wireframes + A/B Testing



Why A/B Testing
I created a test plan with open-ended questions and conducted 8 tests (4 for each design).

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.


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.


Solutions

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 internshipt at Manulife ended after 4 months, but I decided to stay with them part-time to see this project there. After 9 months at Manulife, this project is currently undergoing final reviews from company executives and a first release is expected early June.

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 would 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.


Learnings

Balancing business + user needs can be difficult in corporations
Each stage of the design process saw some clash between these two needs. One on side, we care about the user and want to give them a flawless experience when browsing the site. But on the other side, we want to ensure the styling of the site is in line with other Manulife products and that the clients' wants are fulfilled.

For example, on the Internships page, it is expected that the majority of visitors are looking for position details and want to apply. So having at the top may make sense so they don't have to scroll around and waste time finding it, right? But we intentionally put it it towards the bottom to show them other information and hopefully teach them something cool and unique about Manulife's co-op program, before they apply. The idea was to communicate this information to them so they apply with more conviction and really feel like the co-op program is special at Manulife.


Every meeting with stakeholders felt like an election for my designs
"My products were running for elections every day and only good designs were capable of winning the campaign" (P&G, A.G. Lafley). It was during this project when I understood the meaning of design decisions and justifications. Not every stakeholder has a background in design and in fact, the majority of stakeholders I spoke to were not familiar with it. Whether it was what content to include, the language and actual layouts, I had to ensure I explained my opinions without the use of technical terminology.

For example, the need for anchor links on our 'Internships' and 'Events' pages. Both pages are long in comparison to our other pages. And if a user is looking for specific information such as how to apply for a position, anchor links could send them directly to it, without getting lost while scrolling on the page. But anchor links may also cause confusion as they cause users to jump around a page. These assumptions were further researched during usability testing and after verifying that they were more helpful than confusing, they were implemented. It was when I had this feedback in combination with my justifications, that I could provide a strong argument for this component to my stakeholders.

Future Considerations

  • Why would students who must apply for co-op through their school, visit developer.manulife.ca?
  • How can we better market this platform post-release to ensure impact is delivered in future updates?
  • Why would students browse company-only events?


Did something pique your interest?

I'm always happy to chat more! Feel free to reach out to me through LinkedIn or email. I look forward to meeting you!