canada life website redesign

As part of our initiative to re-design our corporate site, I was tasked with designing the experience for templates, the stage in a design system that brings together components to form layouts that make sense to clients and internal teams alike. Canada Life was in the process of building its first version of a shared design language; I leveraged it to design different templates across all screen sizes and breakpoints, identifying gaps and missing components along the way.

This project was a collaborative effort between UX and Content; I worked closely with content strategy to create additional components along with different variations of them to design templates for pages they had written.  In the end, we were able to produce 7 templates that were then used as a guide for the website redesign. You can view the website redesign here.

process

The following process was outlined and followed, with steps 3-5 repeating to accommodate for revisions, changes and iterations. Each step is described in detail below.

current state

I evaluated the current website to better understand usability issues and other challenges that prevented users from engaging with the site. A few of the problems that were identified in regards to flow and layout were:

  • There is only one call-to-action on the page, and it is placed on the right column, which is often ignored.
  • CTA is aimed at people who are ready to move to purchase/talk to a person. It doesn’t help the user explore the topic further and learn more.
  • The page doesn’t have a hierarchy and there is no no clear idea of what’s important to understand or engage with.
  • The page is very content heavy and doesn’t allow the user to scan content. which is an identified user behaviour.
  • The page is very static and lacks dynamic content to keep it fresh and relevant.
  • The page doesn’t aid the user in their education around the topic of life insurance, and there are no paths to other relevant information.

goals and considerations

After identifying the problems, I had a look at the existing information architecture and content outlines, and identified the need for 7 templates. I then established goals that would be important to keep in mind when designing an ideal and future state.

  • Create an organized and logical hierarchy that leads users through content.
  • Treat every page as a landing page.
  • Help the user identify key priorities and CTAs.
  • Emphasize interactivity while utilizing a cross-linking strategy.
  • Reduce amount of content on pages, adding more visuals instead.
  • Use the  design system to create templates.
  • Identify and create components that are not in the design system.
  • Identify the rules, interactions and behaviours of new components.
  • Design different variations of components to reduce repetition.
  • Design with mobile-first in mind.

ideation and design 

The first phase of design incorporated a competitive scan to see how other sites, companies and competitors displayed and organized content across devices and screen sizes. My research paid specific attention to how headlines, secondary messaging, content blocks and cards were designed, which was then used to inform the first round of designs.

The second phase of design incorporated outlining the different elements that would make up the overall flow and hierarchy of a template. Based on the research done, the goals identified, and an analysis of our content, some of the components that were identified were: CTAs, content blocks, charts, and crosslinks. I then used our design system to create these templates.

components and variations 

After the first round of designs were complete, I recognized some gaps that would have to be addressed in order to inform the second iteration of designs. These were:

  1. We did not have suitable components that could accommodate for the different types of content we had.
  2. Some templates were very content heavy, and the experience, especially on mobile involved too much scrolling.
  3. For some components, we did not have enough variations, which led to all templates looking the same and becoming repetitive.
  4. There was no clear process for how we would introduce new components into the design system.
  5. Establishing naming conventions and rules, interactions and behaviours of new components took away from the design of templates.
  6. There was no common language between teams when discussing components and their variations, leading to us working in silos.

The second iteration of designs began with ideation sessions, where I began to sketch out new components we would need for the new site, designing them with the idea that they could be reused across other products and sites. I then created those components in Sketch, coming up with a series of different variations for different screen sizes.

final design

The final design was completed with the addition of new components and variations to the design system. All seven templates were built in desktop and mobile, and included content as well. This final phase involved collaboration with the wider team (visual design and dev) to begin creating these templates for the design system and to later implement them on the new site. An example of a final template, one in desktop and one in mobile can be seen below.

next steps and lessons learned

When the templates were in their final phase, I collaborated with the content and visual design teams, consulting them on the different uses of components. This project was impactful in three main ways:

  1. It changed the experience users have when interacting with content, and created interactive, educational, easy to scan, and stand-alone pages. This is turn changed our internal strategy, helping us better grasp information hierarchy and content strategy in experience design.
  2. Our team’s understanding of design and the function of components vs. templates was hugely improved after this project. The understanding of these templates as a guide opened up room for collaboration across our many teams, allowing us to find a common language when talking about the design system.
  3. The design system serves as a common design language and is being leveraged throughout the company. Many teams in the company have begun to use it in order to maintain consistency across our many brands, products and services.
  4. The biggest project to date that was impacted by these templates and the design system at large was the Canada Life website redesign and rebrand.