Craft is the first web design system created for State of Minnesota Department of Human Services, and is also the state government’s first design system. The design system’s name came from its five guiding principles: consistent, reusable, accessible, familiar, and trustworthy.

Example of components included in the design system

Motivations

Typography
Typography

Since many of the state’s fundamental web applications were built upon legacy platforms that were scheduled to be sunseted, there was an urgent need to migrate these enterprise applications under modern frameworks.

  • Tricky design handoff. The team’s initial design workflow was quite straightforward. Starting with the summary of user interviews, we moved from low fidelity prototypes to design mockups in Sketch and Axure. The final step was leaving the files in Zeplin - we thought it was that simple.

  • Maximum freedom, minimum consistency. I spent more time than I should on resolving issues on the front-end. There isn’t a standard front-end framework for web projects, and developers have a great freedom picking whatever framework they liked. The result is a lack of consistency for both visual and functional parts, requiring extra optimization work devoted to each individual framework.

Brand identity

Color palette
Color palette

Each component in the library can function differently, but they also work as a whole to establish a consistent visual identity. Without this visual expression, it's difficult for users recognize the State's identity, relate to them as residents, and ultimately trust the applications they're working with.

The system's visual design is based on the State Brand Guide that's already in place. By carefully making some changes to its choice of typography and color palette, we are able to make the components more optimized for web readability and accessibility.

A reference for everyone

Design assets paired with React.js code
Design assets paired with React.js code

With a set of universal components and detailed documentation, a single design can be easily ready for any application. As we described when bringing our project teams up to speed: it’s like a box of Lego.

But our design system isn’t just created for a certain group of people, or a specific stage in the development lifecycle. Everyone of a project team should be able to find something useful and apply to their work.

Modular Design

Atomic design
Atomic design
Reusable modules—that’s a lot less code!
Reusable modules—that’s a lot less code!

Styles and functionalities of each component is taken care of in one JSX file, making the component library a breeze to maintain. With these pre-packaged components and patterns, our developers are getting rid of dozens of lines of repeated code (and confusion).

Considering the currently limited adoption of UI libraries like React.js, the team also provided SASS + jQuery as a fallback option. Developers should be able to include the same components by linking to a set of stylesheets and scripts.

My roles

I performed visual design for the design system, produced front-end prototypes with HTML/CSS and React.js, and conducted usability testing with stakeholders and end users.