Ongoing Work

Modernizing outdated CMS platforms to better assist today’s users of government systems.

The Problem and My Role


Much of today’s users expect a seemless experience online, regardless of if they are shopping on Amazon or inputting data from an offline form. Government systems are notorious for being difficult to use by modern standards, and it has not gone unnoticed by stakeholders of these applications.

UX is now beginning to take center stage during application refreshes of these antiquated systems. Providing a great experience has not only proven to increase the submission of data, but also the accuracy of it.

I work among a small team of designers to provide primary UX focus to development teams, as well as other stakeholders, in an agile environment.

CSS Style Guide


Occassionally it is the job of the designer to wear the hat of front-end developer, in order to provide guidance on look and feel—in code—to ensure designs are translated as intended.

This project used multiple CCS files spanning across several libaries. In order to reduce the probability of broken styles (styles overwritting styles) and to allow greater freedom in producing custom styling, I proposed creating a universal project CSS file. This enabled us to reduce our style sheets drastically while providing an easier method for adding custom styling.

This style guide acts as both a visual style guide (colors , typography, button styling, etc) and a CSS style guide (ToC and sections for organization, variables for common properies, mixins for repetative elements, etc). All elements in this guide are fully responsive using Bootstrap.

CSS Style Guide Sample

Backup Facility Feature


(Click to enlarge)

While most UX development is a team effort we do have the chance to lead our own feature sets occassionally. One particular feature I led design on was for the inclusion of a backup facility section to an existing in-development add a facility release.

The business requirement dictated that the user be allowed to add a facility as a backup to the existing facility info in case of emergency.

Final designs allowed users to search for existing facilities via a simple lookup. Users click on a facility lookup result to send it to a staging area which is then ready to save.

Key outcomes of direct communication with developers were:

  • Separating zip code into its own field due to backend processes.
  • Limiting lookup results to five to reduce scrolling.
  • Interating on lookup results to ensure screen reader accessibility.
  • Re-using components like the tabled results to reduce development time.
  • Providing info and error messaging for edge cases such as adding a duplicate facility, and reaching maximum limits on results.

Animations


Animations can provide a simple visual cue as to a change in page content. I created the above animation using Sketch and Flinto to help ease the transition into an edit mode.

Design Specs


Design specifications are required both for development and for testing purposes. I created a template which is used throughout this release for detailing specifics about each interactive element.

(Click to enlarge)

For each interaction, such as input field validation, detailed specs are provided as to how that field works to assist in development.

(Click to view gallery)

Designing for Accessiblity


The UX and development teams work in tandem to ensure all designs meet WCAG A and AA standards for accessibility, e.g., wrapping all radio and checkbox selection groups in a fieldset and legend tag within the HTML to help with screen reader audio.