Brands.com
About
Brands.com is a modular web platform that powers 30+ Kraft Heinz brand websites, each with a unique identity while maintaining a consistent design framework. At its core, the system provides flexible templates, reusable UI components, and scalable workflows, enabling teams to launch new brand sites quickly and efficiently.
Alongside these brand-specific sites, we created a central Brands hub at kraftheinz.com/brands—a single destination where users can explore and navigate the full portfolio. Together, the modular system and hub create a scalable, cohesive ecosystem that showcases each brand’s personality while reinforcing the corporate identity.
Challenge
Kraft Heinz needed to bring 30+ distinct brands online, each with its own identity, while maintaining consistency, scalability, and efficiency. A central hub was also required on kraftheinz.com to organize and connect all the brand sites.
Focus
The project centered on creating a scalable, modular system to efficiently support 30+ brand websites, while maintaining flexible designs that allowed each brand to express its unique identity. Key priorities included streamlining workflows for faster production and smoother collaboration, and ensuring cohesive discovery through the central Brands hub (kraftheinz.com/brands).
Insights
Through the project, we discovered that despite each brand’s unique identity, many shared common content needs—such as product information, brand stories, and sustainability messaging—which informed our modular template approach. Fragmented workflows across teams highlighted the importance of scalable systems, clear handoffs, and structured planning, especially when producing multiple sites per week. With no brand books for most brands, quickly understanding a brand’s visual essence by analyzing existing websites was critical for informed design decisions. Limited or missing assets also required creative solutions, leveraging Photoshop and AI tools to maintain visual quality. Overall, efficient collaboration, rapid brand understanding, and adaptable systems were key to delivering a cohesive, scalable portfolio.
Outcome
Launched a modular system powering 30+ brand websites with unique identities, streamlining design and development workflows.
Created a central Brands hub (
kraftheinz.com/brands) that provides a cohesive, intuitive way to explore the full portfolio.Established a scalable design framework that supports future brand launches and ensures visual consistency across all sites.
Improved team collaboration and efficiency, enabling faster production and smoother handoffs between design, development, and content teams.
What I Learned
Designing for scale requires systems thinking and governance—not just aesthetics.
Developing a quick understanding of a brand’s visual essence is crucial—pulling cues from existing websites helps guide redesigns when no brand books are available.
Early and frequent collaboration with developers and content teams ensures smoother handoffs and adoption.
Clear communication and daily syncs are essential for managing high-volume work; raising concerns early prevents bottlenecks (e.g., when a brand had no assets, we discussed solutions as a team).
Weekly planning and role assignment helped manage workload efficiently—critical when producing ~7 websites per week.
Leveraging AI tools like MidJourney and Photoshop AI accelerated asset creation and editing, especially when no assets existed.
Team
Dominique Suraya — Product Designer
Diego Goncalves — Product Designer
Lulu Kang — UI Designer
Michelle Zyserman — Product Designer