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
Case study image 0

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.

Case study image 1
Case study image 0

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.

Case study image 1
Case study image 0
Case study image 0

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.

Case study image 1
Case study image 0

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.

Case study image 0

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.

Case study image 1
Case study image 0

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.

Case study image 1
Case study image 0

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.

Case study image 0