Where it started

The initial product was created for mobile only but a quick solution was required to test the potential of a desktop variant.

Use of existing components was a non-negotiable.

Navigating through the journey flows and doing analysis of the existing mobile journeys allowed better understanding of the environment to start conceptualising the desktop variant.

What was wrong

No emphasis on design and improvements for desktop transition.

Some of the mobile interactions and journey flows seemed like they could be problematic in the transition.

Only goal was to build desktop version with existing mobile components.

Challenges faced

Mobile design does not translate well to desktop.

Navigation had to be transferred as is.

Design system did not exist so a very small system built to use in the creation the desktop variant.

Define

A three column structure was used to allow components to be roughly displayed at the same width as they would for mobile.

Left column was fixed and housed the user profile, navigation and the mood tracker. This allowed those elements to be easily accessible by the user.

Middle column was used as the primary display areas for content. This areas would change based on where the user navigates too and includes the five categories of physical clinical, physical lifestyle, emotional, financial and legal. The mood tracker’s history view would also open in this column when accessed.

Right column was also fixed and contained the help contact details, chat, major life events and Vitality rewards.

Develop

The existing component transitioned very well into the three column structure with the only addition of outlines to group content better.
‍
The only additional was new illustrations to improve the visualisation of categories.
‍
A prototype to showcase journey flow was created and used for sign-off and handover to dev.