Team
Contributions
I owned the research, content strategy and design of the website.
Timeline
September 2019 - June 2020
Tools
Figma, Sketch, Axure, HTML, InVision, Photoshop, Zeplin
Problem When someone hears Manulife, they immediately think of insurance and finance - which is good because that is what they're known for! But now, how about Manulife Engineering? This raises some flags where students believe that Manulife's technology and processes are dated. This becomes a disincentive for them to apply for engineering internship/new-grad positions.
How might we incentivise students to apply for jobs at Manulife and have them say “I want to work as a developer / designer at Manulife?
Goal The purpose of this site will be to provide the neccessary information about the culture and technology that exists within the Engineering group at Manulife. By doing so, we can have a more positive influence on the students decisions in deciding whether Manulife may be their next stop in their careers.
To increase the number of engineering co-op and newgrad applications.
Business The purpose of this website is to attract new and young talent. We want to convince students and the younger generation that Manulife is keeping up with the technology trends.
Development The website should be low maintenance. It will be created with Adobe Experience Manager (AEM) and with preset Manulife templates and components, in which styling and functionality cannot be manipulated. Updates will be slow as this site is not a priority.
Design The content shoudl be laid out in a way that's easy to understand at a glance. After browsing through over 17 Manulife websites, each one had 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.
Who am I designing on behalf of?
This website was to be created for the engineering team and as the person responsible for the website content, I found that I'd need more context about who I was designing on behalf of before starting. After all, I was assigned this project on day 2 of my co-op term.
I met with 5 engineers, designers and product owners to learn about Manulife, its brand, and its Engineering group's vision.
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 to later help with content generation:
⏱
At Laurier, we apply to 40+ jobs in our first term. I wouldn't read much about one job/company since it takes a lot of time.
🌟
I always consider company culture when looking for companies to apply to. I want to make sure it's not suffocating.
🎓
In senior year, I will be thinking about full-time opportunities. Being able to return as a full-time would be pretty nice.
I also pinpointed the top 3 reasons why users do/do not want to apply for engineering positions in companies in the financial industry:
Pros
✔ High salary
✔ Reputable company
✔ Company and position stability
Cons
❌ Lack of innovation and inflexible
❌ Corporate environment
❌ Boring
These insights will help identify the areas of improvement and determine the messages we aim to communicate through the website's content.
Current Co-op Application Flow
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 interviews and Manulife co-op application walkthrough I conducted, I identified 3 central pain points:
😪
It takes too long to find relevant job position information online
🤯
There are too many different engineering positions.
😱
There's no information about Manulife Engineering and its culture.
Some concerns included the difficulty of locating information - interviewees visited 5+ pages to find engineering co-op position applications in both manulife.ca and manulife.com. Additionally, there were at least 10 different development positions with very specific titles that confused many students. Lastly, there is currently no information on Manulife Engineering that will entice students to apply.
Competitive Analysis
I conducted a competitive analysis to better understand how other companies attract students and to identify 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. |
Content Collection With the same employees from my discussions around the culture and vision of Manulife Engineering, we brainstormed some potential content features for each of the site's 6 pages. 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
💡
Co-op opportunities at the top of the page would benefit readers but then they would not read further and miss context on the co-op program.
💡
Software and technology updates can better promote our MU program and also offer readers insight into technology applications.
💡
Tech Talk events are available to the public and would be great material to market.
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.
Applying for a co-op job
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: the flow was done in the preliminary phases of the design of
the website and had been altered in the wireframes and mockups stages.
While there were no prior metrics I could gain access to, I determined a central KPI and supporting metrics to monitor and evaluate our website's performance.
Central KPI
Number of applications submitted
Aiming for a 10% increase in the total number of engineering co-op and newgrad 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
Using Manulife's Canadian Design System, I created a style guide specifically for the website to ensure visual design remains consistent.
Typography
Colours
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.
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.
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.
8 of 8
participants found the table's filtering options to be intuitive and helpful in finding positions.
5 of 8
participants appreciated the context about co-op before before seeing the job openings and wished these parts were shorter.
4 of 8
participants could not identify what differentiates Manulife's co-op experience from other companies.
6 of 8
participants were looking for information about projects and tools under the FAQ section.
Applying for Student Career Opportunities
Filterable Table for Positions
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
Timeline of Manulife Engineering
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
Anchor Links for Secondary Navigation
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
Dropdown Menus for Filtering
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.
4 Month Internship
My internship 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.
4 Months of Part-Time Work
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.
Balancing stakeholder 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.
Design reviews were 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.
A more ideal look
The designs came with many restrictions and as an experiment, I wanted to see what I could produce if the other design system
being employed by Manulife was available to me. Here's a sample of what I would have liked the Home and Internships pages to have looked like!
