NYSOH - Back Office Updates

UI/UX, Web Design

GDIT/NYSOH

2021 - 2022

Website

3 Designers:

• 1 Lead
• 2 Seniors (inc. me)

1 project manager

Various developers

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 UI/UX 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 knew 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.

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

As we were researching and refining the B.O. pages with these continuous design updates, we started building a design system and UI kit to go along with them. With a lot of these components, we 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.

These updates were rolled out in stages within the Back Office system, with the design system and UI kit getting built out at the same pace. This part of the project is also still in development.

Since this was started towards the end of my contract with NYSOH, I would say we accomplished as much as we could on this while continuing to force the modernization and accessibility discussions internally at NYSOH. Since NYSOH recently rolled out a new web design for 2025, I gotta say- it's cool to see little pieces of this still in the new design language.