A unique challenge

Toyota product range posed a unique challenge  within automotive industry - a whopping 23 different models in their inventory, from supercars to commercial busses, means that whatever configurator interface we create, it needs to scale and adapt to wildly different product variations, options, colours and accessories.

There are also a number of features that are seen as "expectations" by consumers - finance calculators, availability dates and online booking systems. All features that would require significant infrastructure uplits to implement.

This required us to develop a multi-year roadmap in order to slowly build up features, collaborate with other overlapping departments, and roll out the configurator to all 23 of Toyotas vehicles.

‍

Creative exploration

Developing something completely from scratch presented the opportunity to explore wild and different ideas, from AI assisted co-creation to completely visual interfaces.

Ultimately, two different and opposing patterns stood out as the standouts:

1. A multi-step visual configurator that allowed users to deep dive into specific features and visuals
2. A single page configurator that prioritised efficiency

‍

Testing outcomes

The results of testing produced some interesting outcomes:

• Users prefer a more direct, utilitarian layout over visual exploration of the vehicle
• Some users want to deep dive into specs, some a gallery, and some just want to see a price - the configurator has to cater to a variety of user needs and shopping styles
• Many ecommerce features like stock availability, order online and online booking tools are now base-level expectations
• Many users will use a configurator to understand what options, colours, accessories are available, but not necessarily buy online
• The models made in a configurator were often seen as "aspirational" - and reality would set in once the customer went into the dealership

‍

‍

‍

Building an MVP - with advanced prototyping and interaction design

Using Figma variables and tokens, I built a lifelike prototype of the configurator interface in order to refine animation and interaction, and better communicate to the development team

• Storage of grade, colour, performance to drive component state changes
• Scripting in carousel to control gallery type, wrapping, forwards/back and play/pause/replay of video asset
• Vital for development collaboration - better understanding of how parts work together
• Component animation, custom easing curves and animation documentation

‍