Dynamic User Interface

On the fly web data entry forms

Business Problem

Silo user interfaces for common systems

Multiple custom user interfaces

A series of legacy Justice systems with a common messaging system each had their own custom user interface.

Same field in multiple systems using different validations

Many fields that were exactly the same, had different interfaces and validations across the various systems. This led to inconsistencies in how data was submitted, accepted, and processed.

Reams of paper used to lookup code values

The Justice systems revolve around a series of common codes and values. Common codes are used for criminal offense identifiers, law enforcement agency identifiers, etc. The legacy system did not provide a means for users to "look up" values, which resulted in reams and reams of paper printed and stacked for reference. This was wasteful, and also inefficient because the data changed often - resulting in more printing and more stacks.

Solution

Dynamic user interface driven by a central data dictionary

CloverLeaf developed a solution that dynamically generates the user interface using the central data dictionary for the common systems. This approach means that any changes to labels, fields, validations, lookup tables, etc. only occur in one place.

Leveraged existing user interface framework

CloverLeaf leveraged the user interface framework it developed for the JADE project.

User Experience

CloverLeaf conducted User Experience workshops to gather requirements from a variety of user personas. The users ranged from those with many years of experience with the legacy user interface, to new staff that were not yet familiar with the legacy interface but were accustomed to contemporary web interfaces.

Personas

These personas were used to create a solution that maintained the legacy interface behaviors, while providing contemporary web conveniences such as:

  • Copy/Cut/Paste
  • Function Keys
  • Find (Ctrl-F)
  • Print

On-line Lookups

CloverLeaf's solution provided an on-line lookup feature that was always current, extremely useful to the users, and eliminated the need for paper printouts.

Services Oriented Architecture

The dynamic user interface consumes a series of web services provided by the central data dictionary. The XML data received is transformed into data entry forms using XSLT.

Progressive Enhancement

The data entry forms are generated to meet ADA compliance standards. For clients with javascript enabled, jQuery is used to enhance the user experience by providing data via AJAX, pop-up calendars, etc.

CloverLeaf Added Value

Several features were added initially to aid development. The intent was to remove them before deployment. However, the staff responsible for user acceptance testing found the features to be very useful, so they were left in.

Benefits

  • Does not change the data entry paradigm for existing users — less training.
  • Provides contemporary features for those who are more accustomed to web applications — better efficiency.
  • Leverages common data dictionary for data entry forms, validations and lookup tables — not hard-coded.

Project Name

Redesigned ACHS User Interface

Project Scope

Project Management

  • Planning & Design
  • Scheduling
  • Execution
  • Change Management
  • Resource Tracking

Software Development

  • Business Process Analysis
  • Requirements Gathering
  • Analysis
  • Design
  • Build
  • Unit Testing
  • Deployment
  • Maintenance

Systems Integration

  • Web Services
  • Cross-Platform
  • Legacy Migration

User Experience

  • Usability
  • Prototyping
  • Progressive Enhancement
  • Graphic Design

Technologies

  • Web Services
  • JSP
  • AJAX
  • jQuery
  • Struts
  • XML/XSL
  • Oracle
  • Jetty Application Server
  • Unix

CloverLeaf's CLETS Gateway is used for queries and updates to various Criminal Justice Information System (CJIS) applications.