Design for an online calculator and PDF

Design details: Hi there,

A client of mine is developing an online calculator to price Mezzanine Floors for potential customers. The coders are working on this now, but I'm after 2 things please:

1. A design for the calculator (look and feel)
2. A design for a PDF that get's sent to them after they complete the calculations

Here is the client brief so you can see what they are trying to achieve, and the functionality involved.

Overview:
We would like to develop an interactive element for use by prospect clients on the our websites.

In essence it would be a ‘calculator’ where the user can enter some basic information and then an estimated price would be displayed to the user.

The calculator would need to function on both the desktop and mobile versions of both the websites.

Competitor Examples:
This wouldn’t be a new concept within our industry as a number of competitors are using the concept in different varying degrees of complexity or practicality. Some examples below…
• Space Industries – use a very complex and intimating calculator that asks a lot of questions, that potentially at initial enquiry the user may not have considered or have the relevant information. This is a good example, but far too complex.
• http://www.spaceindustries.co.uk/mezzanine/mezzanine-online-quotation.php
• Hi-Level Mezzanines – probably these best current example, but still not ground breaking! I like the simplicity of selected parts of the choices. E.g. Length, Width, Load Type and Fire Protection. Although I don’t like the fact that it is hosted on a separate website outside the Hi-Level website.
• http://iqd.hi-level.co.uk/budget/form
• Storage Designs – this is not a calculator at such, but does display the pricing using a simple matrix and the optional extras available.
• http://www.storagedesignstelford.co.uk/mezzanines/mezzanine_priceguide.html
• Alba Systems – this is a poor example of a calculator that is far too impersonal and not at all engaging or interactive. I’ve included as the polar opposite as a poor example to the Space Industries overly complex version!
• https://albasystems.co.uk/get-a-quote.php
Ideas for the visual style: Professional and clean
Extra notes:

OUR CALCULATOR:
Initial our requirements would be a simple calculator that at first impressions is not intimidating to a user, but very easy to understand and use. I envisage slider controls rather than drop down lists or data cells.

• Initial Questions
o Length by m²– using a slide controller from 5m to 25m (in 5m increments)
o Width by m² – using a slide controller from 5m to 25m (in 5m increments)
 NOTE: we don’t want to quote under 50m² projects!
o Load/ Use – a drop down or slider option of Storage/ Office or Both
o Fire Protection – Yes or No (default of No)

Once this information is completed the user would click which would then direct to a final data capture screen with a couple of supplementary questions.
 
Maybe with some similar text to “For your free estimate from Spaceway, please enter your details and we will email you your estimate…”

• Name
• Position
• Email address
• Company
• Postcode

Then we would ask the supplementary questions of “Would you like include any of the following options to your estimate?”
• Staircase(s)
• Handrail/Safety rails
• Pallet gates

These would be a simple check box. When ticked would then capture additional data….
• Staircase – Yes or No (default No) but if Yes selected then an additional drop down menu or slider control appears with 1 to 5 options
• Handrail and Safety rails would be a slider control in metres from 3m to 50m
• Pallet gates would be a drop down or slider control with a quantity of 1 to 5

Process
Once the contact form and options are selected I would like the Mezzanine Calculator to complete the following actions…
1. Display the estimate cost on-screen with a visual representation of a mezzanine with the selected options and text confirming that an email has been sent containing additional details of the estimate to captured on the contact form
2. Email a PDF version of a personalised estimate automatically or directly after the contact form has been submitted. I would like this PDF to be very professional and look like a formal estimate from a template with supporting imagery etc.


So this actual brief requires a design for the calculator (+ including visual display of Mezzanine) and a design for the PDF.