Halifax Mobile Product Comparison

Visual & Interaction Design

screenshots of the final visuals

Overview

Lloyds recognised a need to optimise their mobile sales journey after doing an initial round of contextual research into their current app. They approached Foolproof and briefed us to design a best in class product comparison pattern that would be built into all the Lloyds and Halifax apps. During this project, I worked alongside an Interaction Designer and Research Consultant, taking the role of Visual Design lead.

Sketching

Between us, we started by sketching more than 40 rough ideas, taking inspiration from Google Venture’s crazy 8s and Solution Sketching. After stakeholder reviews, both internally and with Lloyds, the best ideas were then iterated and storyboarded into 3 concepts.

3 Concepts Prototyped

I took the 3 chosen concepts and worked them up into high-fidelity visual designs which were then prototyped up for testing.

screenshots of the concepts

Usability Testing

Each prototype was tested with 10 people over the space of two days. Two prototypes had separate sections that tested particularly well: a product carousel and an index screen accordion. These were then merged to create a final hybrid design along with notifications which was another feature that participants repeatedly requested.

The Outcome

Once iterated upon, we handed over the final visuals to Lloyds who used them as a schematic for their latest implementations. Due to this project’s big success both in stakeholder satisfaction and design process, it was used by Foolproof as a model for how future projects should be tackled across the agency.