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.

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.

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.

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.

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