Wellness Scenarios

UI, UX, Front‑end

John Hancock was looking to unveil their new wellness program for employees but needed to address some questions their employees had regarding the new program. The project needed a quick turn but the client was still looking for an interesting way to present six scenarios that answered the most pressing questions.

My job involved creating the design and front-end code for the site. The initial wireframes consisted only of thumbnail sketches due to the time constraint. Design was kept simple with the six scenarios taking center stage avoiding unnecessary navigation for a standalone microsite.

Wireframe sketches of the site
Early version of mask exploring colors
Early version of mask exploring colors

Two design mock-ups were submitted, both of which featured the simplistic layout but supplemented different aesthetics to give the client choice on which direction to proceed with.

Wireframe sketches of the site
Wireframe sketches of the site
Wireframe sketches of the site
Wireframe sketches of the site

Approval for the version with the nature scene in the background was received with the client requesting the background feature elements from other collateral to help it feel cohesive across the board. This involved imagery of the outdoors, in particular rolling hills and sunrise shots.

Screenshot of a finished section page on a phone
Screenshot of a finished article page on a phone
Screenshot of the finished molecule menu on a phone

Mobile is an ever growing way to access the internet and the design collapses cleanly to account for smaller spaces on phones. Utilizing modals for scenario details and converting paths in flow-charts to buttons so zooming into content doesn’t become necessary.

Example of SVG alpha masking used for the background

The background consisted of three images using an SVG alpha map to cut out necessary parts so they could be stored in JPG format instead of a larger PNG format. This allows the background to conform to any size without clipping parts of the image and without stretching.

Credits

  • Client

    John Hancock

  • Agency

    Stepframe