The Choose a Fuel Card project required a range of different skills including branding design, website design, website development and database integration. As part of the initial website design process, we included the design of the logo and an appropriate colour palette. In this case, our research led us to use orange as this was a rather unused colour amongst the different fuel brands, also conveying a sense of low cost and value.
The use of high-fidelity wireframes was essential in allowing us to make sense of all the initial data, as well establishing the best layout and structure of the website design – making sure the user journey was as easy as possible was most important. Also, the website design and relevance of the product comparisons needed to well planned and executed. This required us to create a specific step-by-step multiple choice user interface that enabled the user to easily find the most relevant fuel cards.
During the user experience testing (UX testing), the multiple choices were refined and limited to four drop down lists, each question in the process generated and displayed in real-time, based on the previously chosen answers.
A bespoke database was developed to hold the details of all the fuel cards. Making use of AJAX technology, including jQuery, the website design enables users to drill down to the most relevant fuel cards for them – in a seemless motion where the page is updated without any unsightly page reloads.