Gerry Gonzalez

UX Engineer

Requirements, design, accessibility, and implementation in one practice.

Selected work

MEDC · Component library

A component library built for handoff.

For the Michigan Economic Development Corporation (MEDC) website update, I worked with the designer to build a component library. I wrote it so the Episerver team could split it into working components.

At a glance

Context
Michigan Business, MEDC’s public website, running on Episerver and updated continuously.
My contribution
Built the HTML, CSS, and JavaScript component library with the designer, and keep updating it from new Figma designs.
Why it mattered
With the library in place, new components and pages turn around quickly.
Michigan Business homepage: a video hero of a lighthouse on Lake Michigan with a bold headline, a Who We Are button, and blue call-to-action cards below.
The Michigan Business homepage, with its video hero and call-to-action cards. Source: www.michiganbusiness.org
On this page

How the library works

Components live in an HTML, CSS, and JavaScript library, written so the Episerver team can split each one into a working CMS component. The designers have changed over the years, and I’ve stayed on to update components and build new ones from their Figma designs.

Decision evidence

A megamenu that fits any number of items

Design intent
Give visitors one navigation pattern that works whether a section has a few links or many.
Implementation decision
Iterate on the megamenu through many versions until the layout held up for any number of items.
Experience protected
Sections can add or remove links without the menu needing a new design.

Maintaining the library

Over time I’ve proposed new components, built a Mapbox map component for the Success Stories campaign, created the homepage video hero and call-to-action variants, and kept the front end current.

Same content on phones

Some components use a different pattern on mobile because the space and context are different. The content stays the same: everyone can reach the same information and do the same things.

Michigan Business homepage at phone width: the same lighthouse video hero with the headline stacked, the Who We Are button, and the first call-to-action card below.
The same homepage at phone width. Source: www.michiganbusiness.org

The public result

The current Michigan Business homepage includes public examples of my work, including the video hero and call-to-action treatments. The broader redesign and implementation received a 2019 Michigan Information Systems Association IT Excellence Award; that recognition belongs to the project team.

Visit Michigan Business (opens in a new tab)About MEDC (opens in a new tab)
Back to top