Company: Manulife Insurance
Project: CoverMe Insuretech Product Design
Expertise: Product Design, UX Design, UI Design, Branding, Style Guide Design
Project: CoverMe Insuretech Product Design
Expertise: Product Design, UX Design, UI Design, Branding, Style Guide Design
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/3a255c70-264c-4784-86d6-f4cecb4b6013_rw_1200.jpg?h=6b51bec9a2bd8a2ee3f52cf3d03c12d9)
Before / After
Background
CoverMe is the flagship product of Manulife, the leading Canadian insurance provider. CoverMe.com is treated as a separate but complementary experience to Manulife.ca.
Challenge
To produce a “Best in Class” online shopping experience that can live for 5 years minimum.
To focus on content design that coordinates the needs of the consumer (information and purchase) and business mandates and objectives.
Action
The CoverMe product design was part of a new business strategy of digital transformation at Manulife Insurance.
It was one of the first projects completely done in-house that gave a boost to the design department, human-centered design, and the agile framework in an otherwise traditional insurance company.
The team’s culture resembled a tech startup more than an insurance behemoth.
Process
The process followed the standard stages of UX design: get and understand requirements, define use cases and user flows, apply best UX practices, work on wireframes, create UI prototypes, present and get business buy-in, test, evaluate, and iterate.
To emphasize the website content and align it with the CoverMe content marketing activation plan we created a blog post tile mosaic at the homepage.
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/73c6556f-b712-4251-b48c-ea0f56b296c8_rw_1200.jpg?h=1b8035cfad615c50f86dc5748b829265)
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/38cd754b-fb5a-40b0-8945-7a69195aec48_rw_1200.jpg?h=1bde11d1d5ca42170b1963f602b4f931)
The tile mosaic became a handy tool for promoting and displaying the blog content.
Unfortunately, the number of break points made automated tile-cropping inaccurate. To ensure that the images appear properly in all variations we used grid columns as markers.
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/31f1e4de-c9df-4f71-a823-822543c55dff_rw_1920.jpg?h=65e5cd8e3cd065fe92476ed2987c814a)
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/a912e5b5-1502-42ed-a275-9b32d7f0c34e_rw_1920.jpg?h=84142af8b0a5343eaf991190f4acce02)
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/c7928a39-0b31-4105-8066-7674b22ae35a_rw_1920.jpg?h=e538f7e2f280a3e4525bdee4af68fb26)
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/21c51fc2-9406-49a5-8f0c-78c295301973_rw_1920.jpg?h=c35c043052133fa030658c1dc4b26cda)
We ran a series of workshops for the content publishing team on how to handle content and created a comprehensive style guide.
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/1d3777fd-baed-441e-a294-7e5ceb22e5c5_rw_1200.jpg?h=00eae222b3fc5c8701a763138fddea54)
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/5d575750-4710-4904-9c47-9984636999c0_rw_1200.jpg?h=3f0f0dd8d3c4b1287219c35bec8345ac)
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/43ad1d9c-07f6-4f08-ac93-cb3309721d3b_rw_1200.jpg?h=a977d7227f1ab1d9984d9fec024c1deb)
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/2a28aca5-5270-4879-89f5-69d803a453ee_rw_1200.png?h=a0cb811b7a6ba640b92f7b81e8e5f08b)
Intuitive user flows allowed the users to fully grasp, fill, and submit forms.
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/aa0f599e-514c-4681-9f6a-737b13416aa0_rw_1200.jpg?h=47ec0e6d66127611fa03dd1eab6a3352)
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/5b645d93-ae64-472f-9d9a-7ce13dcde9e3_rw_1200.jpg?h=479d12304ac910d569a3e34aba2a4483)
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/e10b8394-1b9a-43b3-90a3-d56eeda8ba7f_rw_1200.jpg?h=aab0dc5a023ab97c241f12c89b46794d)
Improved visual hierarchies enabled the users to quickly identify the right product for them.
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/799acebc-e3fc-4fdf-a2db-f1bebd460ae4_rw_1200.png?h=c42a26485d9902c65f5d80bce5d83b0c)
And finally, the new blog post layout provided better readability and content digestion.
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/0c45a494-fb0f-44b0-9b9a-1ade3cc5eca3_rw_1200.jpg?h=9dd0b069767d54d941f4602f3373c6d8)
![](https://cdn.myportfolio.com/935a3d6c-cc42-414c-9bc4-6c2cee61b6c8/98430954-c9d2-4e4a-aca6-92c6580cdebb_rw_600.jpg?h=03cbc0d3faa3898efc3fe22b097ed33c)
"Jovan initially joined my team to work on the overhaul of a large-scale consumer-facing website. He quickly impressed us with his thorough, considered yet creative approach to design and became a valuable colleague as well as the ‘go to’ for questions, feedback, or advice."
— Richmond Sedcole, AVP of Human-centered Design, Manulife