The comparison tool was created to fulfil the requirements of the global brand. To create a tool that allowed users to view and compare specs for up to 3 vehicles of their choosing within the Jaguar or Land Rover Range.
Catering for multiple use cases
We created a steps process to allow users to specify between Vehicle, Model, & Engine levels. The component was made in such a way that the user could compare between each of these options to get a clear idea of the differences each option makes to the vehicle specs and price. We identified these use cases.
- I am a user comparing 3 of the same vehicle with different model variants
- I am a user comparing 3 of the same vehicles with the same model with different engine variants
- I am a user, I don’t know what I want or can afford I want to compare different vehicles, models, body styles and make changes to the engine and model to compare the differences in cost and specs.
Bringing it to life
The Steps animate through to each other. Each animation was defined in sprint, prototyped in Principle for Mac. If more than 4 vehicles / models where available the cards become a scrollable carousel. The body styles option uses a tabbed UI above the cards as a way of tabbing through the content.
Displaying the data
The data table was one of the most complex parts to design and build as it has a lot of fixed elements that stick when scrolled both vertically and horizontally on mobile screens. It is also very challenging at the best of times to display large bodies of table data, especially on mobile, but I feel we found a workable compromise. Language had to considered from the ground up as this is a global tool, used by millions across many countries.
The tool continues to evolve and receive enhancements. This was an exciting and challenging project to work on, with many technical challenge to overcome and design around.