Manulife
Advisor Portal

SEE CASE STUDY
THE PROBLEM

Manulife.ca had just been deployed with a new brand identity and accessibility was at the centre of the team’s preoccupations. The advisor’s website had been built ages ago without any relevant information architecture or clear user flow in mind. It wasn’t mobile friendly and wasn’t really helping the financial and insurance advisors in selling Manulife’s products.

THE OUTCOME
00

success rate (prev. 37%)

00

avg. time/ task (prev. 57″)

  • Date

    2019

  • Client

    Manulife

  • Role

    UX|UI Designer

  • Organization

    AGILE

Step 1

DEFINE A UX STRATEGY

One of the first workshops that I put together before defining a new information architecture was about coming up with an overall strategy to drive the user research phase.

Step 2

CRAFTING THE INFORMATION ARCHITECTURE

Card-sorting exercise was really appropriate to define the new site’s architecture. The exercise had to be done for the insurance part but also for the financial/wealth management section of the site.

Step 3

SKETCHING PRODUCT PAGES

I structured an ideation session to define a new page layout for wealth management and insurance products.
After this session, we had a few sketches available that needed a little polishing in Axure RP.

Step 4

BUILDING WIREFRAMES

Wireframing was a really useful phase for the stakeholders and the rest of the team as it was a fast, clean and easy way of representing the future UI. A low fidelity prototype was made available for testing purposes and allowed us to move confidently to the UI design phase.

Step 5

CRAFTING HI-FI COMPS

After a lo-fi prototyping phase, some user testing and a few tweaks, the final product page and home page templates were finally ready! For the Asset Allocations, we had to add a bunch of illustrations and review the copy to get this final result.

THANK YOU FOR READING!