Sun Life Financial Web Development + Visual Design

2021-11-16T15:58:28+00:00

Sun Life Financial Web Development + Visual Design

As a Senior Digital Designer for Sun Life Financial, my responsibilities included developing the Group Benefits web pages on the corporate site, creating microsites for external clients, providing design consultation, and executing on digital marketing strategies. The work below includes some of the projects that I am allowed to show.

Role: Senior Digital Designer
Client: Sun Life Financial
Tools: HTML | CSS | Photoshop | Illustrator | InDesign

Visual Design

Web Development

Responsive weekly email HTML/CSS

2022-02-04T21:42:11+00:00

Responsive weekly email UX/UI + HTML/CSS

My role was to design and develop a weekly deployed email in Salesforce. I used best responsive HTML and CSS coding practices to develop a reusable template for Outlook and Gmail.

Role: UX/UI + Responsive Development
Client: Foresters Financial
Tools: Adobe XD, HTML + CSS

Mobile & Desktop UX/UI webpages

Blog UX/UI + WordPress Development

2021-11-15T21:10:58+00:00

Foresters Blog UX/UI + WordPress Development

Role: Stakeholder Interviews | Site map | Wireframes | UX Designer | Web Developer
Client: Foresters Financial
Tools: Adobe XD, Illustrator, WordPress, HTML + CSS

Overview

My role included the design and creation of site maps, wireframes, high-fidelity mockups, WordPress integration with custom CSS, and testing/debugging. The client requested a website that could be self-managed by the Marketing team and the WordPress platform was the perfect solution.

Goal

To rebuild the blog website that provides users with a sense of Foresters community, featuring articles related to family, well-being, community, finance, and Foresters latest news.

Process

DISCOVER

Stakeholder interviews

Gathering feedback and analytics from the Membership team was important in my research. Some of the questions asked were:

  • What is the problem or need we are aiming to solve?
  • What are the Key Performance Indicators (KPIs)?
  • How else will we define success for this project?
  • What are the users trying to do?
  • What are their pain points?
  • How can we reach users through this design process?
  • Does a style guide exist?

Product audit

Navigating through the website and gathering metrics allowed us to see what was working and what wasn’t. It was clear that there were too many categories and tags that were not being effectively used. The Foresters Instagram channel could have a more prominent visual impact rather then just being an icon in the footer. The menu navigation was also overly complex and cumbersome. It could definitely be consolidated into a more digestible experience.

DEFINE

Sitemap

Based on our findings and constant back and forth with the stakeholders, I was able to create a site map of how the architecture of the site should be created. The different components for each page was also included on a sub-level.

DESIGN

Wireframes

There were only three web templates that needed to be designed, which would than be repurposed throughout the site; homepage, post page and an author page (later replaced with a category page).

High-fidelity Mockups

Building mockups in accordance with WordPress standards and Foresters Brand Guidelines.

TESTING

A pretty straight forward solution with mainly guerrilla testing using colleagues to discover issues and bugs. My part of this process included CSS debugging.

Digital Style Guide Frontify + Bootstrap Development

2021-11-18T20:43:09+00:00

Digital Style Guide Frontify Web Development

My role included creating a Digital Style Guide that would be used internally company-wide. I used HTML and CSS within the Bootstrap framework to develop for the Frontify hosted website.

Role: Web Development
Client: Foresters Financial
Tools: HTML | CSS | Bootstrap

Responsive Newsletter Design + Development

2021-11-09T00:28:06+00:00

Responsive Newsletter Wireframe + Development

My role was to design and develop a responsive newsletter that was template-ready for IBM Marketing Cloud and user friendly for the Marketing team to send out weekly updates.

Role: UX/UI Designer
Client: Sun Life Financial
Tools: Axure, Illustrator, HTML + CSS, IBM Marketing Cloud

Coach Danford Website

2021-11-08T15:10:42+00:00

Coach Danford Responsive Website Development

My role for this client included creating an end-to-end solution for the client to self-manage and WordPress was the perfect solution. The web development process included; Research, Concept, Design, Build, Test, Launch.

Role: Web Designer
Client: Coach Danford
Tools: HTML + CSS, WordPress, Photoshop

Responsive website

Sun Life Group Benefits Website UX/UI

2021-11-15T19:36:23+00:00

Group Benefits Website UX/UI + Development

As the Senior Digital Designer my role on this project encompassed research, analysis, and design. The research phase consisted of discussions with stakeholders on the project vision and goals for brand strategy. Our analysis included storyboards and a revised site map of how we wanted the user to interact with the new webpages. The design phase included all new UI components created in Axure.

Role: Wireframes | High-fidelity mockup | Front-end development | Developer Handoff
Client: Sun Life Financial
Tools: HTML+CSS | Axure | Illustrator

High-fidelity Mockup

Go to Top