When Michigan.gov moved to Sitecore, I connected our design team with the vendor building the site. I still work on the site’s components and styles with its designer.
At a glance
Context
The move of Michigan.gov’s agency sites from Vignette to Sitecore, built on the Digital Guidelines design system.
My contribution
HTML examples, CSS, and naming conventions for the vendor’s build. Today: new components, Scriban templates, and the style file structure.
Why it mattered
Agency sites that each had their own styling now share one brand, and new pages come together from existing components.
www.michigan.gov
The Michigan.gov homepage today. Source: www.michigan.gov
On this page
From design files to a vendor’s build
I gave the vendor working HTML, CSS, and naming conventions built on Digital Guidelines. After launch I kept working on the site with its designer: we plan new components around what Sitecore can do, I write the Scriban templates, and I keep the styles consistent with Digital Guidelines.
Contributed featured-item, topic, and promo-card patterns, visible on the homepage and on agency sites such as the Department of Natural Resources.
Adapted interactions for smaller screens while preserving access to the same information.
Write Scriban templates for new components.
Maintain the style file structure and naming conventions.
www.michigan.gov
Featured items on the current homepage. Source: www.michigan.gov
Promo cards on a Department of Natural Resources page. Source: www.michigan.gov/dnr/things-to-do/fishing/license-info
Decision evidence
One brand across every agency site
Design intent
Before the migration, each agency site had its own styling. The new platform needed one look that every agency could build with.
Implementation decision
Build the components and styles on Digital Guidelines with shared naming conventions, so agencies assemble pages from existing components instead of styling their own.
Experience protected
Agency sites share one brand, and a new page can be built from existing components and their styles.
Designing for Sitecore
A component has to work with real content, make sense to authors, behave predictably for visitors, and fit the platform’s rules. When I plan new components with the designer, that is what I bring: what Sitecore can do, and how each component will be authored.
The public result
The broader program launched refreshed agency sites on the new Michigan.gov platform. The current homepage contains public examples of component work I contributed to. I also received a State of Michigan Symbol of Teamwork Token for my work on the migration.
