Client Work
Interactive Infrastructure Cost Calculator
An interactive touchscreen calculator developed for a technology company exhibiting at Mobile World Congress (MWC).
The application helped visitors explore the total cost of ownership (TCO) of corporate computing infrastructure, adjusting key variables and comparing different infrastructure models to see costs and potential savings update in real time.
Our Role: Front-end development and interactive calculator implementation.
Note: Client branding, imagery and content are withheld for confidentiality.
Key Features
- Single-page application designed for a touchscreen
- Interactive total cost of ownership (TCO) calculator
- Adjustable energy and labour cost sliders
- Colour-coded options for infrastructure configuration
- Live breakdown of capital, operating and energy costs
- Dynamic comparison of costs and potential savings
- Context-sensitive options that respond to user selections
How It Works
The calculator simplified a complex infrastructure cost model into two intuitive types of input: sliders for adjusting energy and labour costs, and colour-coded buttons for selecting configuration options such as size, architecture and lifecycle.
As visitors changed their selections, the calculator updated the results to show capital expenditure (CapEx), operating expenditure (OpEx), energy costs and the potential savings from a Build Your Own configuration compared with a Silo model.
The available options also responded to the current configuration. Where a selection made another option incompatible, that control was greyed out to indicate it was unavailable
The underlying cost data was supplied by the client in a spreadsheet. The application used this data to calculate and present the relevant costs based on the visitor's chosen inputs.
The calculator turned a detailed infrastructure cost model into an accessible, hands-on experience, allowing visitors to explore different configurations and see the impact on costs and savings in real time.
Why It Works
- Simplifies a complex subject through clear, focused controls
- Makes the impact of changing cost assumptions immediately visible
- Uses visual feedback to distinguish available and unavailable options
- Presents multiple cost categories and comparative savings in one interface
- Encourages visitors to explore different scenarios at their own pace
Technical Summary
- Web-based single-page application
- JavaScript-driven cost calculations and interface updates
- Interactive sliders and configuration controls
- Dynamic option availability based on selections
- Designed for a large-format exhibition touchscreen
More Technical Information
- The application was built as a single-page web experience, with the interface designed to make a multi-variable cost model easy to explore on a touchscreen. Sliders handled continuous inputs such as energy and labour costs, while colour-coded button groups presented the discrete configuration choices
- JavaScript connected the inputs to the calculator's results, updating the displayed cost breakdown and comparative savings as selections changed. Conditional logic also controlled which options were available, providing immediate visual feedback when certain combinations could not be selected
- The client supplied the underlying cost data in spreadsheet form. This provided the basis for calculating the results, while the front-end focused on presenting the model through a clear, responsive and approachable interface