top of page

Information Architecture And Experience Design For Group Benefits Provider

A leading Canadian company that offers life insurance, health insurance, investment, savings and retirement income and reinsurance.

Father and Daughter

THE TEAM

Together we shifted the website from product-driven to customer-focused, brought it up to modern standards and improved the overall digital experience.

MAKE OF THE TEAM

  • Project manager

  • Business Partners 

  • Content editors

  • Design strategists 

  • UX researchers

  • Data analysts

  • UX architects 

  • Visual designer

  • Front-End developer

MY RESPONSIBILITIES

Adjust the existing information architecture so it’s easy for site visitors to access content that’s relevant to them.

  • Information architecture, interaction and UI design

  • Card sorting research to inform design decisions

  • Facilitating stakeholder feedback sessions

  • Providing implementation details

Image of the Great-West Life website in desktop and mobile view.

THE PROBLEM

Outdated, dense content with multiple nested pages

The Customer Experience Director brought this project into production since the website was had become outdated and needed to be brought up to modern technology and aesthetics.

Image of the old Great-West Life website.

THE PROCESS

Understanding the strategy, empathize with users, define site structure, implementation details

I paired with the design strategist to understand the direction and goals for the site based on their research

Whiteboard with design notes.  Wildly successful: GWL becomes the go-to hub for Canadian financial, physical and mental well-being.  "Hub for everything"

Proto-personas informed key tasks:

List of personas: Primary: individual / family (current customers), Secondary: business owner, advisor
Image of  the Individuals and Families persona.  It lists out behaviours, needs and pain points.

They are as follows:
Behaviours: Chooses to support businesses that suport the community and environmentally responsible, uses apps and online tools to help with financial needs, places claims and reviews account status, invests in products they feel protect or benefit their family.  Needs: understand the purpose of financial wellness (e.g. insurance, benefits and investments), access their benefits account to place claim.  Pain points: hard to find correct contact info, difficult to navigate and find current content, hard to understand "insurance" language and internal nomenclature, lack of mobile access.

INFORMATION ARCHITECTURE RESEARCH

Content Audit

I took stock of the current sitemap, compared it to
user needs & website analytics and cut out irrelevant pages.

image of a site map and website analytics.
Image of a card sorting exercise with post-it notes for "Insurance planning" and "GWL product info".

Card Sorting

I conducted a card sorting study with 7 participants to understand current customer mental models. The results help to understand which pages users cared about most.

Standardization Grid

The standardization grid visualizes how many people grouped pages under each category which helped us organize the site structure based on their mental models.

Image of the standardization grid - a spreadsheet that highlights which category a page was listed under most and least.

TASK FLOWS

With a less dense sitemap, we identified what templates would be needed, then digitized the template sketches into wireframes and gather stakeholder feedback.

Whiteboard wireframes
Image highlighting the navigation, specifically how there is a tab for each kind of user (you and your family, plan sponsors | Employers and Advisors.
Individual insurance wireframe with cards for each product
Wireframe of he home page

I paired with front-end developers & visual designers to break the templates into components for our design system

A screenshot of a component inventory.  It lists out each component with an image of it beside it.  The components are: column block with icons, launch pad with options 1 through 4, Cards - text format and Cards - photo format.

I worked with front-end to implement the design and provided a detailed breakdown of interaction states

A chart that lists out each button state for the top navigation menu.

I annotated wireframes to make it easy for any front-end developer to pick up the task and implement the requirements.

Screen shot of an annotated wireframe for developers to understand the intendend functionality

THE OUTCOME

BEFORE

Outdated and hard to navigate — a poor experience.

Screenshots of the old text heavy website

AFTER

Modern, simplified, accessible — a great experience!

Image of the new website design with more visual styling, photography and less text.  The voice and tone is much more natural and approachable.

Winner of the 2017 RGD In-House Design Award!

Like what you see?
Let's chat.

bottom of page