I needed to design a new user interface element to be used on CheckIt’s main website.
Users needed to be able to navigate logically through their extensive product catalogue, and at any point know how far along the product selection process they are, and the differing costs involved across multiple payment options. It’s a complicated beast communicating lots of different types of information in the simplest possible way, but that’s the beauty of careful user interface design.
The 4 different main sections are represented in rows utilizing CheckIt’s strong brand colours. The rows that can be selected are highlighted dark blue, the ones that are not yet selectable are grey. As a section is completed, a tick appears next to the section name. Tool tips pop up if the user hovers over any elements, and similarly expanded product descriptions pop up if the user hovers over a product name. On the right the different payment options are shown alongside each other, allowing the user to easily compare finance options as they navigate and select different products.
Good user interface designs don’t allow users to move forwards if they haven’t completed required fields, and consistently communicate where users are in the process, in the simplest way possible. Job done!