
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.

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.


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.



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.


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.

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.


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.


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.
