Visual styling

This project uses the CMS Design System

Initially, the prototype site was built with a custom-styled flavor of the US Web Design System styles. In December 2018, the team learned that CMS has its own Design System. The CMS Design System is based heavily on the US Web Design System, but has a robust library of React components, a slightly different suite of interaction components, and uses Open Sans universally instead of Source Sans Pro.

• 🔐 Notes from conversation with product manager at CMS, and member of contractor team maintaining the system

In February 2019, the team began replacing the prototype styles with the new CMS Design System styles and components. We did this in an agile way by starting with the CMS grid, and redesigning isolated components, then sections of the app.

Visual/UI design research

• Audit of interface components and styles present in the prototyping site (pre-2019)
• GitHub issue evaluating the audit and planning improvements for UI consistency

Visual styling

The eAPD product is in the Medicaid and CHIP Program (MACPro) Program, and ultimately should be associated with it in some way. However, MACPro doesn't have a strong, established visual identity which we could use to inform styling decisions.

You can see the visual styling of the MACPro tool in these YouTube training videos:

• MACPro Training Pt 2: Creating State Profile
• MACPro Training Pt 3: Creating an Official Simple Submission Package

Current visual design strategy

Since the MACPro system doesn't use the CMS Design System yet, the eAPD tool will be a few steps ahead, and can demonstrate what a strong use of the default styles can look like. We have an opportunity to show how much you can accomplish using the "vanilla" CMS Design System. If the team feels it's appropriate to add further customization later, it could inform both this app, and the MACPro tool. Successful visual design choices would not add to the already busy environment of CMS sub-brands and interpretations of the Design System.

What's different

So far we've found that there are two areas where our app has more complexity than the stock components from the CMS Design System:

• Tables: The CMS Design system has basic tables built for textual information, formatted with generous white space. The eAPD has requires complex, dense tabular data tables, so we've kept our custom styling for now. There's lots of opportunity for optimizing the eAPD table styles, which hasn't been approached yet.

• Help text: The eAPD site provides users with helpful hints throughout the form experience. These serve a different function than Alerts, so we've retained our custom styling.

• Modals: The eAPD site provides users with alerts and useful information however any use of modals we've retained our custom styling.

Design files

The team has built on top of the CMS Design System UI Kit Sketch file, and uses it as a library to power our styled page mockups / before they move to production. The 18F designers will have the latest version of the Sketch file.

(Update) Team has moved to Figma and will be able to supply URL for location of newest design file.