Frosted Mini Wheats website
Lead Visual Designer • Responsive web
Key contributions
Designed a cohesive website showcasing 9 Frosted Mini-Wheats varieties and campaign content.
Created reusable page templates to support consistent product experiences.
Translated the brand's visual identity into a digital experience.
Designed flexible components to accommodate new products and content.
Business context
$241M in annual U.S. sales (historical figure; year to be verified).
9 product varieties supported by the website.
Part of Kellogg's cereal portfolio, a major consumer packaged goods business.
The problem
Frosted Mini-Wheats needed a dedicated website that brought product information and campaign content into one cohesive experience. The design also needed to support nine product varieties without requiring custom layouts for every page.
The goals
🥣 For customers
Explore cereal flavors and varieties.
Compare ingredients and nutrition information.
Discover the Built for Big Days campaign.
🏢 For Kellogg's
Establish a cohesive digital experience for Frosted Mini-Wheats.
Showcase products and campaign content consistently.
Simplify content updates through reusable page templates.
My role
Visual design leadership
Brand expression
UI design
Reusable page templates
Component design
Cross-functional collaboration
Developing the visual direction
Frosted Mini-Wheats had a presence on the Kellogg’s website, but not a dedicated digital experience of its own. While UX partnered with the brand team on content requirements, I focused on defining the visual direction. I reviewed family-focused food brands to understand how they balanced bold visual expression with fast scanning and accessibility. The strongest experiences shared a few qualities: playful energy, clear content hierarchy, and intentional photography.
Inspiration
Before
Aligning structure with UX
We defined a flexible structure that could support campaign storytelling, product discovery, nutrition transparency, and future flavor launches.
I worked from a mobile-first foundation with bold but controlled brand expression, simple content hierarchy, reusable page templates, and flexible modules for future growth. Rather than designing individual pages, I built a scalable system the brand team could keep extending.
Creating the design system
With a short lead time, I moved quickly into a focused visual direction.
The final system balanced bold packaging colors with clean layouts, intentional photography, and accessible contrast. I introduced a deeper orange inspired by the packaging to preserve brand energy while improving readability across desktop and mobile. That became the foundation for every template that followed.
The final designs
Homepage
I designed the homepage to bring the Built for Big Days campaign to life without sacrificing clarity. Bold color and large imagery create energy. Short content blocks keep scanning fast. Structured hierarchy reduces clutter. Accessible contrast works across every device.
The final designs
Homepage
I designed the homepage to bring the Built for Big Days campaign to life without sacrificing clarity. Bold color and large imagery create energy. Short content blocks keep scanning fast. Structured hierarchy reduces clutter. Accessible contrast works across every device.
Product detail page
I prioritized large product imagery, highlighted nutrition values, and built a consistent content structure across every SKU. Related products encourage exploration while the template balances campaign energy with structured information design.
Nutrition page
I designed for fast comprehension using bold numeric hierarchy, clear labeling, and strong contrast for accessibility. The structured layout makes detailed nutrition information easy to scan and compare — and easy for the brand team to update.
Adjustments along the way
The brand palette included several light tones that created real readability problems.
I introduced a deeper accent color inspired by the packaging and paired it with a more structured secondary tone. It preserved the brand's energy while improving accessibility and contrast across desktop and mobile. The result was a color system that felt more Frosted Mini-Wheats than the original palette did, just more inclusive and more scalable.
Supporting development and QA
I delivered organized, developer-ready files with clearly labeled components, defined responsive behavior, a structured typography system, and reusable spacing and layout patterns. The goal was to reduce implementation friction and make sure the brand team could keep building without needing a designer in the room every time.
Team feedback
“Nancy is the most stellar leader and design partner I could have ever asked for. I have learned so much from working with her over the past year. She has such a kind and impactful way of giving feedback, and challenges me to produce the best work possible. I value her opinion and design eye more than anyone. Not only is she someone I can look up to, she also knows how to put her head down and crank out beautiful work on tight timelines. She is proactive on all of her projects, solving problems before they get too big. If a problem does arise, Nancy maintains her composure, positive attitude and calming tone with everyone.” — Leo Burnett UX Designer