Father and Daughter

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.

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.

GWLTeam.png

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

GWLwebsite_edited_edited.png

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.

Old%20GWL%20Website_edited.jpg

THE PROCESS

GWLPROCESS.png

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

DesignStrategy.png

Proto-personas informed key tasks:

GWL Proto-personas.png
GWL_family_persona.png

INFORMATION ARCHITECTURE RESEARCH

Content Audit

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

IA.png
IA.png

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.

cardsorting.png

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.

standarizationgrid.png

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.

template-whiteboard_edited.png
Navigation.png
wireframes.png
wireframes.png

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

component.png

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

GWL-interactionstates.png

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

AnnotatedWireframe.png

THE OUTCOME

BEFORE

Outdated and hard to navigate — a poor experience.

GWLBEFORE.png

AFTER

Modern, simplified, accessible — a great experience!

GWLAFTER.png

Winner of the 2017 RGD In-House Design Award!

RGDWinner_edited.png

Like what you see?

Let's chat.