GTS Services Retail Web Application

Recently I was asked to work with GTS Services on introducing HTML5 and CSS3 elements into their new web based retail application (SaaS). My primary responsibility was to consolidate much of the functionality from the previous VB application into a flexible and accessible web format. This was very exciting since I was responsible for not only how work-flow of the application but the entire visual and interactive development as well!

1. Primary Design & The Login Screen

LX Login Screen

The first step in the design process was to create a palette and design standards for the project. Since our team was creating an application designed to find glass and glass types, I knew the I wanted to keep the palette clear and lite. The login screen was the perfect testing ground for implementing various design standards into the project because of its high-visibility and simple layout.

2. Create New Account

Create New Account

Keeping in line with the finalized design of the login page, I began to bring the new account page up to speed. The challenge here was the amount of input fields required by GTS to create an account. The solution was to organize each set of input fields into a listed column while styling each column to display in a ‘inline’ format.

3. Project Intro

Project Intro

Next, I began to develop the project interior on the design standards in the ancillary pages.

3. Project Intro – Navigation

Project Intro Navigation Sample

I urged our group to develop a horizontal format for the project. This format presents many challenges, the first of which was figuring out a simple method of navigation. After consolidating many of the assets from the VB application, our group narrowed the navigation process down to five main actions, each sporting 2-4 sub navigation components.

I used a simple Javascript flyout menu which I manipulated with CSS3. The icons are a mix of in-house developed and open licensed icons sets.

3. Organization Page

Create New Organization

Here is a simple display of an interior page of the project. Injected with the YP API, users can easily look up insurance companies, customers, or insurance agents.

3a. Organization Page – Media Queries

Create New Organization Media Query

An example of the media queries used throughout the project to make the project view able across a variety of platforms (Android, iOS) and resolutions (mobile, tablet).

4. New Order Grid

New Order Grid

I developed an interactive grid for the New Order section of the site. The grid effectively consolodates all of the options from previous renditions of the project into an ease-of-use ordering system. Each component has an onClick form hidden under the corresponding icon. Once forms are completed, key information specific to that step in the process will display. Effectively giving the user a history of their activity for each order.

New Order Action Grid

The New Order grid was developed using the Isotope JQuery plugin which gives the grid numerous options to be sorted, allOpen (or allClose), and reconfigure based on the browser size or grid action. Isotope was the perfect choice for our order grid.

New Order Open

5. JQuery UI Drag and Drop Printer Configuration

Print Configuration

My favorite feature in the entire project. I was able to build a print configuration drag-and-drop interface using the JQuery UI. The intuitive interface allows users to generate their own custom invoices unique to their business integrating Crystal Reports.

Order Configuration Dragging

Users can choose between logos or addresses in the header, where they would like their legal information displayed, and even how totals are displayed to customers.

6. Conclusion

Even though I wasn’t able to see the entire project to its public version I was very pleased to work with the development team from GTS Services. Thanks to our team, the project is well on its way to being a fully supported platform well before its launch date!


Tags: