When I arrived at Case Commons, there were multiple approaches to similar UI problems, numerous accessibility concerns, and very little consistency across the application.

The application was built on a fixed grid, with hard coded (often inline!) css widths and font sizes. Visual regressions were a never-ending headache. With a mandate to work more quickly and consistently, meet Section 508 compliance requirements, and make the application mobile-friendly, we faced a major challenge.

Our response was Undercase, a live style guide and interaction pattern library now used to drive the entire Casebook product suite.

Undercase is a UI framework containing all repeatable visual design elements and interaction patterns throughout the Casebook Hotline, Investigation, Case, Licensing and Eligibility products. New design patterns are added first to the library, then to the applications, ensuring both that all designs are current and that updates can be made once and automatically applied across all products.

I led the strategy for eliminating pixel-based sizing and making all patterns and applications responsive. All Undercase patterns are also 508-compliant and include both visual design styles and relevant interaction behaviors. Nested pattern sets are used for a variety of standardized user workflows throughout the product suite.

In addition to addressing all of the problems outlined above, Undercase has also allowed us to nearly eliminate the need for wireframes and flat mockups, enabling the rapid creation of live prototypes (using Heroku) instead. User testing has become faster and more effective, and designer intentions and specifications are clear to developers, speeding up both the coding and acceptance processes.

Undercase Grid & Spacing Patterns

Because the out-of-the box grid and responsive styles were closest  to our needs, we chose to build Undercase on top of the open-source Groundwork framework. This page is particularly useful for helping new developers get to know our basic templates and responsive breakpoints.

Undercase Colors

When I arrived at Case Commons, Casebook contained nearly three times any many colors, including more than 15 shades each of gray and blue. Like the pixel widths, many were hard coded inline for singular application elements. We worked very hard to consolidate both the visual design and code so that the color palette would be consistent, accessible and manageable moving forward.

Undercase Modal & Popup Patterns

For maximum flexibility, all nested components are broken down into their smallest sub-patterns within Undercase. Interactions and animations can be previewed for ease of use and accuracy.

< Previous  |  Next >