Project Goals & Considerations

The original objective for this project was to introduce filter options to the Resend 834 function in the Back Office portal. The filters would help users narrow the associated accounts results and improve usability for a very data-dense page. In addition to these initial goals, the design team was also given the go-ahead to implement additional design changes that would improve legibility and accessibility standards to the 834 page.

Once we began ironing out a list of design improvements for 834, we realized that these adjustments could be also be applied to other parts of the Back Office system to provide some much-needed structure and design standards. After some upper management back-and-forth, the 834 scope was significantly expanded to address these additional problems.

Proposed Design Updates

As we were sketching out and figuring out the initial 834 design updates, we were given some extreme technical parameters to operate under:

• Can not add any new colors, fonts (this includes additional weights or families), UI elements to the existing B.O. design language
• Design’s front-end must be built in the not-really-responsive JS/CSS NYSOH base made back in 2012
• Can not make any adjustments to existing table styles or DataTables jQuery barriers
• Adjustments to B.O.’s existing front-end need to be vetted by GDIT’s developers as well as the internal NYS and DOH developers

Given all of these restrictions, the larger umbrella adjustments we put our foot down on have already seen very positive user feedback from B.O. users:

• Minimum base font size adjusted from 10px to 14px with line height(s) altered accordingly
• Padding and margin amounts of 3px and 5px have been pumped up across the board to 10px and 20px
• Ensure color pairings (all within NYSOH design language) meet at least a 4.5/AA contrast ratio

Back Office Design System & UI Kit

As we have been continuing to research and refine the B.O. pages with these continuous design updates, we have been building a design system and UI kit to go along with them. With a lot of these components, we have imported older B.O. Illustrator and Photoshop files into XD to rip various elements, and adjust them to be added to the responsive component library.

Since these updates have been piecemeal within the Back Office system, the design system and UI kit have also been built out at the same pace. This part of the project is also still in development.