HSBC Hololens POC

Back in 2017, in the early days of Augmented / Mixed Reality, HSBC commissioned us to use their V1 Hololens development kit to produce an engaging and informative proof-of-concept Hololens experience to help users visualise their mortgage journey.

By interacting with a dynamic timeline chart in augmented / mixed reality, users could explore different mortgage products, understand the impact of varying payment amounts, and ultimately see their future home materialised on a physical map.

This proof-of-concept focused on core functionality, exploring spatial interaction design and the integration of real-world data (Google Maps) within an AR environment.

My role as UX Designer encompassed scoping, interaction design, and prototyping.

---

Design Process

Due to the immersive nature of augmented / mixed reality and the spatial considerations of designing for the Hololens, traditional 2D wireframing methods proved insufficient. To effectively prototype the user interface and interactions within a 3D environment, we adopted a unique, hands-on approach using tangible objects. This allowed us to quickly iterate and test concepts in a way that better reflected the final user experience.

• Visualizing the Timeline Chart: We used plasticine to sculpt various iterations of the timeline chart, experimenting with different shapes and scales. This allowed us to physically manipulate the chart in 3D space and quickly assess its visual impact from different angles. Photos of these plasticine prototypes were taken from the perspective of the Hololens user, giving us a realistic view of how the chart would appear in the AR environment

Plasticine charts and UI elements on a table, surrounded by other physical props used to create these concepts.

.

• Simulating the Hololens Field of View: "To understand the user's field of view and ensure key elements were within their line of sight, we used polystyrene cups with the bases removed. By looking through these 'mock Hololens' devices, we could simulate the limited field of view and refine the placement of UI elements. This helped us avoid placing crucial information outside the user's visible area.

Myself, never afraid to back away from an embarrassing challenge.

• Prototyping Text and UI Elements: Text labels and other UI elements were created using handwritten cards attached to pipe cleaners. This allowed us to easily reposition and adjust the size and placement of these elements within our physical prototype. This low-fidelity approach enabled rapid iteration and quick testing of different layout options.

Some of the Hololens project team creating the various physical UI elements we were to use for this project.

Final Solution

The final product was rapidly built by our development team utilising the UI concepts and features we had defined during these sessions.

Although this project was developed as a proof-of-concept, it garnered significant attention and was subsequently showcased by HSBC at various technology events to demonstrate the bank's commitment to innovation and exploration of future technologies.

A colleague demonstrating how the Hololens tool is used while wearing the device.

Screenshot of one are of the UI - one of the 3D charts showing Loan Amount and Monthly Repayments across a timeline, with a small 'monopoly' style house at the end of the chart.

A map of the local area, with the users house showing in the centre. There are HSBC pinpoints across the map illustrating the nearest HSBC locations in that area.