Hy-Vee cover image

Metadata

Sector

  • Food
  • Retail

Scope

  • UI/UX Design
  • Development

Hy-Vee

Hy-Vee, a Midwest supermarket chain, partnered with Monogram to design and develop 3 websites: Hy-Vee RedMedia, the Hy-Vee OpportUNITY Summit, and Hy-Vee KidsFit. Monogram owned UI/UX design and development on all three, building each on Next.js and React, styling with Tailwind CSS, and deploying on Vercel, with Sanity as the content management system on KidsFit. The work was completed in 2023, and each property carries Hy-Vee's brand while serving a different audience.

Hy-Vee runs a retail media network, a business development summit series, and a children's health program, and each needed a site of its own. RedMedia speaks to advertisers, OpportUNITY speaks to local business owners applying to a competition, and KidsFit speaks to families looking for resources. The shared requirement was Hy-Vee's brand; everything else differed.

Visit Website
Hy-Vee RedMedia homepage on a tablet with the headline Make more meaningful impressions.
RedMedia homepage on a tablet. Hy-Vee RedMedia, design and development by Monogram, 2023.

RedMedia: Brand Familiarity at Speed

Monogram designed RedMedia around vibrant abstract imagery and responsive content, so a visitor finds what they need on the platform they arrive on. The result balances the familiarity of the Hy-Vee brand against a modern presentation.

Letter P composed of red arcs, brick texture, and photos of people cooking.
Brand exploration for RedMedia, a letterform built from radio-wave arcs, brick texture, and photography. Hy-Vee RedMedia, UI design by Monogram, 2023.
Two RedMedia page mockups overlapping, the homepage and the Marketing, managed page.
RedMedia homepage and the Marketing, managed page. Hy-Vee RedMedia, design and development by Monogram, 2023.

One Stack Across All Three Sites

Monogram built each site on Next.js with Tailwind CSS and deployed on Vercel, which let the three properties share engineering practice without sharing a template. The design work ran through several iterations per property so Hy-Vee's branding sat correctly on each one, familiar to a Hy-Vee customer and current in its own category.

Performance in the Constraints

Performance sat in the design constraints from the start. Next.js and Tailwind CSS carry RedMedia's loading behavior, and the layout holds its function at every size, so the site loads quickly and works the same on a phone as on a desk.

Diagram connecting the RedMedia logo to Next.js and Tailwind CSS.
RedMedia runs on Next.js and Tailwind CSS. Hy-Vee RedMedia, development by Monogram, 2023.
Empty auditorium with the Hy-Vee OpportUNITY Inclusive Business Summit logo.
The OpportUNITY Inclusive Business Summit. Hy-Vee OpportUNITY Summit, design and development by Monogram, 2023.
Laptop showing the OpportUNITY Summit homepage with register and apply buttons.
OpportUNITY homepage with register and apply actions. Hy-Vee OpportUNITY Summit, design and development by Monogram, 2023.

OpportUNITY: Applications, Registrations, and a Moving Calendar

The OpportUNITY Summit is a series of Midwest events supporting local minority and women-owned businesses, with a pitch competition carrying cash prizes, networking with Hy-Vee, and a free full day of professional development. Monogram has worked with Hy-Vee across Summits in Madison, Minneapolis, Kansas City, and Cedar Rapids.

Designed for Local Business Owners

Monogram designed the OpportUNITY site to engage local business owners while staying faithful to the Hy-Vee brand. The design blends aesthetics with function, so an applicant finds the event information they need without hunting for it.

Auditorium screen showing Summit panelists speaking on stage.
Panelists on stage at an OpportUNITY Summit. Hy-Vee OpportUNITY Summit, 2023.
Diagram connecting the OpportUNITY logo to Next.js, Vercel, and Tailwind CSS.
OpportUNITY runs on Next.js, Vercel, and Tailwind CSS. Hy-Vee OpportUNITY Summit, development by Monogram, 2023.

Content Changes That Keep Pace With the Events

Monogram built the OpportUNITY site to handle applications and registrations reliably and to keep Hy-Vee's team and attendees synchronized through each event cycle. The site was built for reuse, so content changes land quickly as the Summit moves between cities and as each event's requirements change.

Laptop on grass showing the KidsFit homepage with Parent, Teacher, and Kid tabs.
KidsFit homepage with Parent, Teacher, and Kid entry points. Hy-Vee KidsFit, design and development by Monogram, 2023.

KidsFit: A Redesign for Families

Hy-Vee KidsFit is a health and wellness program encouraging children and families toward active habits, and Hy-Vee asked for a redesign and redevelopment as its audience's needs changed. The goal was a better experience, more useful resources, and habits that last past the first visit.

Two KidsFit homepage mockups with illustrated 3D characters on a starfield.
KidsFit homepage mockups with the 3D characters. Hy-Vee KidsFit, UI design by Monogram, 2023.
KidsFit UI sheet with a 3D illustrated boy, colored label buttons, and Eat, Learn, Play, and Challenge icons.
KidsFit resource labels and category icons, Eat, Learn, Play, and Challenge, in light and dark. Hy-Vee KidsFit, UI design by Monogram, 2023.

Resources Reorganized

Monogram carried elements of the previous design forward and reorganized how resources are categorized, giving families more control over what they see and a more personal path through the KidsFit content.

KidsFit: GROQ Filters and the YouTube API

On the build, Monogram used Sanity as the content management system, Next.js for the application, Tailwind CSS for styling, and Vercel for deployment. Sanity's GROQ query language powers dynamic resource filters, and Monogram integrated the YouTube API so an editor pastes a video URL into Sanity and the system pulls the thumbnail, title, and description automatically. That removes a manual step for editors and keeps video metadata consistent between the site and the channel.

Diagram of the KidsFit stack: Sanity, GROQ, Next.js, Tailwind CSS, Vercel, and YouTube.
KidsFit runs on Sanity with GROQ, Next.js, Tailwind CSS, Vercel, and the YouTube API. Hy-Vee KidsFit, development by Monogram, 2023.
Desktop monitor showing the KidsFit 404 page with the Vercel Comments toolbar floating in front.
The Vercel Comments toolbar over the KidsFit 404 page. Hy-Vee KidsFit, review through Vercel Comments by Monogram, 2023.

Vercel Comments in the Review Loop

As the projects approached completion, Monogram used Vercel Comments as the feedback channel between the two teams. Feedback arrives attached to the element it describes, carrying screen size, browser, and operating system with it, so debugging starts with the context already in hand instead of a reproduction request.

Hy-Vee wordmark over a produce shelf.
Hy-Vee. Hy-Vee RedMedia, OpportUNITY Summit, and KidsFit, design and development by Monogram, 2023.