Government App Design
Much of today’s users expect a seamless 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 worked 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 allowed the team to align across a common goal, with the outcome frequently becoming user stories that supported the feature, which was then slated for future development.
We started with a discovery session with stakeholders where we began to define several potential user tasks for a particular feature. From this list, we had 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.
From this, I quickly storyboarded the concept to add context to the task.
One of the main design concepts I introduced to this project is user flows. These were text-based user journeys that also act as feature requirements for components such as input fields.
Another visual artifact I experimented with while working on the EQRS application was micro-wireframes. These somewhere between a page level and layout level wireframes helped to bring life to otherwise ordinary text-based flows, and to quickly discover holes in the thought process.
Due to the scale of the project, I was tasked with creating a visual that would emphasize the interconnectedness of all the pieces. The result was something between a system diagram and a customer experience map. This map also helped to uncover previously missed requirements through the discovery process.
Occasionally 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 libraries. In order to reduce the probability of broken styles (styles overwriting 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 acted as both a visual style guide (colors , typography, button styling, etc) and a CSS style guide (ToC and sections for organization, variables for common properties, mix-ins for repetitive elements, etc). All elements in this guide were fully responsive using Bootstrap.
While most UX development is a team effort we did have the chance to lead our own feature sets occasionally. 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:
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 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.
For each interaction, such as input field validation, detailed specs are provided as to how that field works to assist in development.
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.