A team of Keyhole developers was brought in to help our client, a software retailer, develop their proprietary online form design tool. The Keyhole team assisted the client in the migration of their tool to a JavaScript SPA-style architecture. Additionally, our UI expert assisted with the design aspects, and a frontend team was brought in to build out the applicationโs frontend using a handful of technologies.
Client Snapshot
The client sells web-based form and workflow software to both small businesses and enterprise-level clients including the State of Oregon and the University of Tennessee. Their software allows their clients to automate HR, finance, sales, and support processes. Users can quickly and intuitively create online forms and build and export the data collected. It also allows for integration with external tools and systems.
Application Overview
Keyhole consultants assisted the client’s existing development team with their proprietary design tool. The tool enables a non-programmer to create a form-based web application by dragging and dropping UI elements.
The form contains various pages with pre-designed UI elements. Each element had a number of associated properties interactive at design-time. Each element has behaviors that impart program logic to the form.
The user interacts with those artifacts by dragging and dropping elements, drawing behavior or workflow connections, modifying properties, and then saving the form as an XML file to a server. A web-based player interprets the formโs XML file and then uses it to serve the form to an end-user as a web application.
Specific Technologies
- JavaScript
- SPA-style Architecture
- UI/UX Design
- HTML5
- Backbone.js
Application Development
The existing Designer was written in Adobe ActionScript as a single-page application residing in the form authorโs browser. With the Keyhole Teamโs advice, the client decided to migrate the ActionScript rendition of the tool to a JavaScript single-page application instead.
The client took the migration as an opportunity to enhance the look-and-feel of the application as well. Keyholeโs UI expert was brought in to create a new user interface layout and design for the Designer. This included the creation of over a hundred visual elements and icons and then the build-out of the Designer frontend. In addition, he redesigned the dashboard and login page for the Designer, ensuring that each page was responsive to device constraints.
The Keyhole teamโs next task was to build out the frontend framework for the backend team. This included adding the ability to use mobile devices for playback. Central JavaScript technologies involved in the migration include HTML5 drag-drop, HTML5 canvas, BackBone.JS for its unrestrictive event coordination, and JQuery.
Project End Status
With the Keyhole teamโs help, the client was able to successfully migrate their application to a JavaScript SPA-style architecture. The frontend of the application was built out, and Keyholeโs UI expert made significant upgrades to the overall look and feel of the tool. Keyholeโs contributions allowed the client to ready their product for sale. It is now on the market being sold and successfully used by many of their clients.
