Manulife
Design Hub

A. Desktop views

Double click on the mockup to toggle its size (real size / fit width of thr viewport / fit height of the viewport).

• 100.000 Log in form - default
• 100.000 Log in form - validation error
• 100.000 Log in form - authentication error
• 100.100 Contact us
• 100.200 Transition page
• 101.000 Reset Password Request - default
• 101.000 Reset Password Request - tooltip
• 101.220 Reset Password form - default
• 101.220 Reset Password form - weak password
• 101.220 Reset Password form - strong password
• 102.220 Account activation email

B. Mobile views

• Log in form - default

A. Catfish additional color proposition

• PROTOTYPE: Catfish with yellow buttons.
• PROTOTYPE: Catfish with yellow buttons and yellow top border.

B. Life Events tiles

• MOCKUP: Test with a thicker top border.

A. Catfish color propositions

• PROTOTYPE: Home page with white catfish (Alt+Click on the page to view the settings or the back link).
• PROTOTYPE: Home page with white catfish and green buttons.

B. Mobile header

• PROTOTYPE: Mobile Home page with green background overlay in the header.

C. Tiles tests

• IMAGE: Former test with the notch and a subtle green transparency in the background. We thought that the notch was too much and the fact that the background is transparent obliges us to use a difficult image ratio (ultra wide).
• IMAGE: Background test. The second test, with a green overlay (blending effect) is too dark in our opinion. Even on lighter pictures.
• IMAGE: New test. Solid white is used instead of Manulife green in the background in order to make the page appears less greenish.

D. Life Events tiles tests

• IMAGE: Unsatisfying test with a coloured title and background 1.
• IMAGE: Unsatisfying test with a coloured title and background 2.
• IMAGE: Test with a thick top border and a coloured title.

A. Home page prototype

• PROTOTYPE: Home page (Alt+Click on the page to view the settings or the back link).
• PROTOTYPE: Mobile Home page.

B. Tests

• PROTOTYPE: Home page with green background on header's icons.
• MOCKUP: Raising a family tiles reference.
• MOCKUP: Raising a family tiles test 1 (adding a more visible button).
• MOCKUP: Raising a family tiles test 2 (adding a more visible button).

C. Other pages mockups

• ZIP ARCHIVE: Mockups of pages and other UI elements.

A. Home page prototype

• PROTOTYPE: Home page (Alt+Click on the page to view the settings or the back link).
• PROTOTYPE: Home page with video header.
• PROTOTYPE: Home page with blue catfish.
• PROTOTYPE: Mobile Home page.
• PROTOTYPE: Tiles distribution according to the browser vieport width (quick test with images instead of real HTML tiles).

B. Other pages mockups

• ZIP ARCHIVE: Mockups of pages and other UI elements.

A. Home page prototype - WIP

• PROTOTYPE: Home page WIP (Alt+Click on the page to view the settings or the back link).

B. Other pages early mockups - WIP

• ZIP ARCHIVE: early mockups of pages and other elements UI exploration.

A. Home page evolution

Evolution of the homepage since second presentation:

• Former mockup for reference only.
• Latest mockup.

B. Navigation evolution

Mockups before prototyping (responsive behaviour):

• Main navigation - inactive.
• Main navigation - drop down 1.
• Main navigation - drop down 2.
• Main navigation - Sign-in drop down.
• Main navigation in tablet portrait view - inactive.
• Main navigation in tablet portrait view - drop down 1.
• Main navigation in tablet portrait view - drop down 2.
• Main navigation in tablet portrait view - Sign-in drop down.

C. Mosaic & tiles work in progress

Mosaic & tiles still need more definition, but a first step has been done on the tool that will help us to test and conceive the best solution:

• PROTOTYPE (WIP): Former mosaic & tiles tool
• PROTOTYPE (WIP): mosaic & tiles tool with tiles style 2 (unsatisfying)
• PROTOTYPE (WIP): mosaic & tiles tool with tiles style 1 (satisfying)

D. Post-presentation modifications

• PROTOTYPE (WIP): mosaic & tiles tool with tiles style 1 with the "Cover Me" content standing out.
• IMAGES: Variation of 3 images with a more standing out "cover me" tile.

A. Home page evolution

Evolution of the homepage since first presentation:

• Former mockup for reference only.
• Unsatisfying evolution step 1 on the mockup.
• Unsatisfying evolution step 2 on the mockup.
• Latest evolution and more satisfying step. For discussion purpose, especially about the mosaic.

B. Navigation evolution

Mockups before prototyping (responsive behaviour):

• Main navigation - inactive.
• Main navigation - drop down 1.
• Main navigation - drop down 2.
• Main navigation - drop down 2 and 3^rd level open.
• Main navigation - mobile declination, open.

C. Mosaic & tiles work in progress

Mosaic & tiles still need more definition, but a first step has been done on the tool that will help us to test and conceive the best solution:

• PROTOTYPE (WIP): Mosaic & tiles tool

Early work presentation

• PRESENTATION: UI Work in progress
• MOCKUP: Work in progress on the home page
• PROTOTYPE: Early navigation - login: manuvieweb | password: manu123
• WIREFRAMES - password: web_manulife