Ongoing Work

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

The Design 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 a human-centered design focus to development teams, as well as other stakeholders, in an agile environment.


Storyboarding allows the team to align to a common goal, with the outcome frequently becoming user stories that support the feature, which is then slated for future development.

We start with a discovery session with stakeholders where we begin to define several potential user tasks for a particular feature. From this list, we have the stakeholders rate their top tasks. In the following example, the top task is User management: security officer privileges. Add, changes, and deletions.

I extrapolated on that idea with a written scenario.

(Click to enlarge)

From this, I quickly storyboarded the concept to add context to the task.

(Click to enlarge)

These storyboards will then be used to gain feedback from stakeholders to further the conversation and make sure we are aligning to their needs.

User Flows

One of the main design concepts I introduced to this project is user flows. These are text-based user journeys that also act as feature requirements for components such as input fields.

(Click to enlarge)


Another visual artifact I experimented with while working on the EQRS application is micro-wireframes. These somewhere between a page level and layout level wireframes help to bring life to otherwise ordinary text-based flows, helping to quickly discover holes in the thought process.

(Click to enlarge)

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 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.

No detail is too small. For input field labels I designed an interaction that saved vertical space while also keeping the user informed of what that particular field is after clicking into it.