RBI Template

I worked on this project during my time as a Product Designer at RBI (Restaurants Brand International). I developed a Webflow template for the company's three main brands: Burger King, Popeyes, and Firehouse Subs. In this project, I developed the entire template using Webflow, incorporating JavaScript for specific functionalities. Additionally, I designed new components and adjusted user flows to enhance the experience within this context. I also created and documented the CMS collections, strategically designing them for optimal use by operators who would manage the sites.

Webflow
Design System
UI/UX Design

Multi-Brand Template

RBI International needed a scalable website template for expanding into new markets. The template had to work for three brands (Burger King, Popeyes, Firehouse Subs) and allow local teams to easily manage content through a CMS without technical knowledge.
Requirements:
  • Single template supporting three distinct brands
  • Non-technical content management for franchisees
  • Core sections: Menu, Offers, Restaurants
  • Easy deployment for new markets
Solution
Built a comprehensive Webflow template using Variables for brand theming and structured CMS collections. Created detailed documentation to ensure franchisees could manage content independently.

Site Structure

The template follows a strategic four-page architecture designed specifically for quick market entry and franchise scalability. Each page serves a distinct purpose in the customer journey while maintaining consistent brand identity across all three RBI brands.
The Homepage acts as the conversion hub with hero banners and marketing cards. The Menu is the core revenue driver, structured with category selection, product listings, and detailed item pages. The Offers page manages promotional content with QR code functionality, while the Restaurants page provides location management with filtering and store details.

CMS Collections

The template uses structured CMS collections to manage all dynamic content efficiently. Menu Categories and Menu Items form the core product catalog with pricing, descriptions, and nutritional information. Heroes control homepage banners with customizable backgrounds and CTAs. Marketing Cards handle promotional content with rich text support and flexible linking options. Offers manage campaigns with QR code integration and redemption functionality. Restaurants store location data including hours, contact info, and ordering methods. Background Colors provide centralized color management for consistent brand theming, while Social Media manages footer links with show/hide controls for each platform.

Template Variations

The design system development began in Figma, where a comprehensive variables framework was established that would later translate seamlessly to Webflow. This foundational work in Figma ensured proper tokenization across colors, typography, spacing, and component styles, creating a scalable system that could serve all three brands effectively.
The Variables system enables instant switching between three distinct brand experiences. Colors, fonts, button styles, and visual elements automatically adapt across all pages and components, ensuring brand consistency while eliminating the need for separate templates. This approach allows one template to serve three major brands seamlessly.

Home

Menu Categories

Product Detail

Offers

Restaurants

Results

The project successfully achieved its objectives, delivering a scalable template solution that enables rapid market deployment across RBI's three major brands. The template has already been implemented and is currently being used by Firehouse Subs Brazil, demonstrating its real-world effectiveness in supporting the company's expansion strategy.