Earlier this week we went live with a new feature on Weddleinsturies.com. The Gear Ratio Calculator helps off road racing enthusiasts get the most performance out of their vehicles. 

The Gear Ratio Calculator is a tool that Weddle Industries has been using for years, but just recently asked us to turn this calculator into an online Drupal application.

What we needed to do:

Our task was to take a highly formatted spreadsheet and turn it into a living, breathing Drupal application that Weddle Industries' clients could use on their own.

Step 1 - Design Consideration 

Most of Weddle Industries' client base are non-technical users. We wanted to make sure the calculator was simple and straight forward to use. With some back and forth between our designer and the Weddle team, we tweaked the user experience to be as easy-to-use as possible. Here are just a couple of the design considerations:

1. Adding different decimal points for each input field. Each input field accepted a different type of number. We put the decimal point in as an HTML5 placeholder (and duplicated the functionality on older browsers) with 0s to help users understand what sort of input was expected. On moving to a different field, the number is updated to the correct notation.

2. The Tool Tips in each section of the system help the user understand the benefits and use of each part of the gear calculator. The tool itself has a lot of information and has the potential to be confusing if you're not completely familiar with all of the terminology. With contextual tooltips, it is easy to get a bit more information at each step along the way.

Step 2 - Functionality Considerations

The next was to map each of the design decisions to the functionality. Here are a couple of functional decisions we made. 

1. Since we were looking to make the Drupal application as simple as possible, we chose to make the form dynamic. Using AJAX to load all the values on the page (with minimal JavaScript, thanks to Drupal 7's new AJAX API), we added the loading icon  to help users understand that they don't need to click to submit the form. It also lets them know that with each field they fill the calculation will be adjusted. 
2. Weddle Industries also want to have a printer friendly version of the calculator results. In addition to that, they wanted to keep the brand with out looking like a website. Since the printable version was their previous medium of choice, we wanted to make sure we weren't moving backwards here. One of the more challenging parts of this was to design and implement the print out to fit all on one page and still be useful. Here's the final result of the printer friendly version: 

Gear Ration Calculator: The Finished Product

Do you have any "Gear Ratio Calculators" that would benefit your customers? Or example of some that you have already built?   

We would love to hear about it.