Rotax Engine Configurator
A web based 3D model configurator, that allows users to configure their own plane engine.
This configurator was built for ROTAX's aircraft division. It was built as a lead generator and was able to produce over 40% conversion rate in its first year published.
Problem
Other than the obvious lead generation purpose of this product, Rotax wanted their customers to be exposed and to visualize the wide range of configurations that can be done to their aircraft engines.
Solution
A 3D configurator, of all the Rotax air craft engines, where users can configure certain components, visualize the changes, and send that configuration to local distributors.
Research
-
Being that Rotax already have a defined target demographic, my main way of gathering information about the users of the product was to ask Rotax personnel about them. Out of the information given to me I Made the following persona:
.png)
Define
Guidelines
In the early stages of the project, discussions with the client highlighted several key guidelines that should be considered in the design process:
-
The gearbox and certification must be selected prior to configuring components.
-
Users should have the opportunity to access more information regarding the various components.
-
It's important to emphasize the advantages of each component.
-
Price is not a concern, but weight is a crucial factor when it comes to aircraft engines.
User flow
UX considerations
-
Landing page designed to connect with user's passion and on brand with the Rotax "message"
-
Configuration options are contextually relevant and therefor reduce cognitive overload and prevent any errors from happening.
-
User has flexibility and control, with real time feedback from the model itself and the changing weight. Gives the user a sense of personalization and customization.
-
No immediate pressure to purchase and transparent information builds a sense of trust with the user
there was no attempt to "Dumb-down" the technical info, respecting the intelligence of the users
Design
Wireframe
To help visualize how the web pages should be structured, I created low-fidelity wireframes for the main pages in Axure.
.png)
.png)
High fidelity
The client was engaged and provided thorough feedback on the desired changes to our design. One significant adjustment we identified was the need to separate the selection of certification and gear type from the configuration of components as these choices influence which components can be adjusted. This approach allows us to show users only the specific components they can modify. Additionally, we received the Rotax brand book to incorporate it into our high-fidelity design for client approval.
The client was engaged and provided thorough feedback on the changes they wanted to see in our design. A key insight was the need to separate the selection of certification and gear type from the configuration of components, as these choices affect which components are available for customization. This approach allows us to show users only the specific components they can adjust. Additionally, we received the Rotax brand book to incorporate into high-fidelity design for client approval.
Iterate
#1 - Highlighted vs. New page
Phase 1
Phase 2
One main change done from phase 1 to phase 2, was the decision to have an entirely new page at the stage where the user must choose a certification and gearbox type. Even though it added 2 clicks, until configurator actually opens, it reduced clutter and some redundant information from the screen. Users found it easier to focus and understand what was required of them at this specific stage.
#2 - Full page loading vs. Components displayed
Phase 1
Phase 2
Another change that was done, was showing the user the components that can be configured, and even allowing them to interact with them, while the model was still loading. This caused the users to feel less "helpless" and gave them something to do rather then just wait.
Reflect
Impact
The configurator had a 40% conversion rate in the first year after it was published
Personal takeaways
Although the mobile version for this project was defined to be secondary, and less important then the desktop view, it was still very challenging for me to create it. Do to the fact that it was very important that the 3D model was large enough to see it modified in real time, and that it always needed to be in view, I had to choose very carefully what other information I was going to display to the user, in order for them to get the information they need and want, while not causing the experience to be annoying or tedious.
The project taught me a lot about using "real-estate" efficiently.