The Challenge

Update and expand the Access Idaho application template library to work with the Bootstrap framework, as required by our Director of Development.

Create standards for elements, groups of elements, templates and pages.

Review past projects for pieces that need to be standardized, past usability studies for best practices, and upcoming projects for elements and code that would be needed in the near future.

Work closely with development staff to adjust elements so that they could be converted as smoothly as possible into Grails snippets with variables for different states. Work closely with development staff to obtain user-friendly javascript behavior in complex elements.

Applications were scheduled to move to the newest version of the library one at a time, with involvement from QA.

Tools/Techniques

Reviewing best form practice recommendations of Luke Wroblewski, NNG Group and my own notes on our past applications.

Ensure accessibility by building to WCAG specifications and reviewing the prototype with the lead trainer of the Blind Commission, listening to her feedback and implementing it.

Continue to iterate and improve the template as we learn or need new pieces.

Dates, For Example

In many of the applications Access Idaho built, the payment date is probably close to today's date. So, a date picker in a calendar layout defaulted to today's date is probably a good choice for that interaction.

A person's birthday, however, is not going to be close to today's date unless they are a newborn. For that interaction, we used a mask, similar to this date input mask in function.

Result

This library dramatically shortened our development time, is accessible, kept our products consistent, and gave us a common vocabulary when discussing applications.

The screenshot above shows a sortable, searchable, collapsible table in use as well as our alerts.