A Product Walkthrough

  • ux design
  • ui design
  • design system
  • prototyping
  • testing
A full width modal contained the interactive video piece A full width modal contained the interactive video piece
At key points the video would slow and a moment of interaction was presented At key points the video would slow and a moment of interaction was presented
Key pieces of information were highlighted in the video Key pieces of information were highlighted in the video
The enhanced timeline allowed for interaction in the chapters of the story The enhanced timeline allowed for interaction in the chapters of the story
Interacting with the timeline expanded out more detail on the chapters Interacting with the timeline expanded out more detail on the chapters

Business Problem

HSBCnet is a online business banking product by HSBC. There was a tired, boring and numb existing short video experience explaining the product available but it wasn't serving the purpose of increasing the level of new customers so this element was identified as needing a refresh.

Approach

Seeing an opportunity, we wanted to create something far more engaging and meaningful for the user. We came to a concept of an interactive film that would have rabbit hole sub-films to provide the deeper dive content around certain features where the user required it knowing that the product has many different levels of user from the small business to the corporate.

Solution

Working with a team of film makers an interactive film was created to explain the features through an acted narrative with the ability to dive into the additional, smaller films to get more details where needed. My role was to flesh out the original concept into something workable, UX the experience and design the necessary screens as well as manage the third party film making team. The result was a full screen, informative and engaging film positioning the user at the centre of the HSBCnet world. The increase in engagement and lead generation was staggering!