Manulife Vitality Savings Tool

Web Design, Animation

A tool that allowed users to know what rewards they could get if they joined the program. Included in the project scope was a dynamic PDF and video that compiled the user's choices and results into a personalized element.

tools used

Illustrator, Animate, VS Code

time frame

3 months

View live project

problem

Manulife Vitality promotes healthy living by rewarding customers who make healthy living choices. Inspired by an existing UK version, Manulife wanted a tool that informs users of how many points and what rewards they can get through this program.

How can we design the Vitality tool for Manulife?

goals

Propose redesign that follows brand standards, project requirements and accessibility standards
Use microanimations to show growth of points/rewards
Execute UI/UX designs using HTML, CSS, and JS
Animate an illustrated personalized results video
Design a personalized PDF of user's results
Allow for a dual UX flow*
Ensure tool is responsive

As Lead Designer, I worked closely with Manulife to create a refreshing design that matches their branding. My team and I focused on enhancing the UI experience through microanimations and maintaining colorful elements.

*User can enter tool from multiple points

Deliveries

Web Application

Illustrator, VS Code

Personalized Video

Adobe Animate

An animated video that users can interact with, showing the user's inputs and how it's affected their results.

Personalized PDF