Module 02
Design Builder
The Design Builder is the most technically complex module in Marketing Central — and the one with the highest current failure rate. We're replacing a Chrome-only, no-live-preview tool with a cross-browser, print-faithful editor that auto-populates office data and enforces brand standards without requiring franchisees to understand design.
"Allow franchisees to customize various marketing assets including flyers, postcards, posters, and other materials. Enable download of print-ready files."
The Core Challenge
Building a browser-based design customization tool that produces print-faithful output is genuinely hard. The current Ansira tool fails on three dimensions: it only works in Chrome, it provides no live preview of how the final print will look, and the output drifts from what the franchisee saw on screen — different fonts render, spacing shifts, elements move. Every one of these failures generates support tickets.
Chrome-only: Fails entirely in Firefox, Safari, and Edge. Franchisees working on different browsers are locked out of customization.
No live preview: Franchisees submit their customizations without being able to see how the final print will look. Mistakes aren't caught until physical materials arrive.
Font and alignment drift: The printed output doesn't match the on-screen preview. Text reflows, fonts substitute, margins shift. This is the most-cited complaint and a source of significant reprint requests.
Cross-browser: PDF.js renders the base template consistently across all modern browsers, with no browser-specific rendering behavior.
Live preview: Every change the franchisee makes is reflected in the preview in real time. What they see is what prints.
Print-faithful output: The editable layer is composited onto the original PDF structure for output, preserving the designer's original typography and layout exactly.
Our Approach: PDF.js + HTML Layering
We evaluated multiple technical approaches before committing to PDF.js with HTML layering as the foundation for the Design Builder. This decision was driven by the need to avoid building a full form engine from scratch.
Canvas-based editors (including Konva, which was evaluated) require building every interactive UI element — text inputs, dropdowns, sliders — as custom canvas-rendered widgets. There is no native form input on a canvas element. Building a form engine from scratch to support the full range of Zee-editable field types (constrained text, dropdowns, image upload, font-size sliders) would add significant complexity and maintenance burden. PDF.js renders the locked base layer as a high-fidelity visual; HTML form elements layer on top, positioned precisely over the editable regions defined in the template. The output composites both layers back to PDF. The result is a cross-browser, accessible, maintainable editor that leverages native browser form capabilities.
How the Rendering Works
When a franchisee opens a customizable product, the Design Builder renders the PDF template using PDF.js — producing a pixel-accurate representation of the designer's original file in the browser, using the embedded fonts and exact layout from the source document.
Over this rendered layer, the platform positions HTML form elements that correspond exactly to the editable regions defined in the template during authoring. These form elements are sized, positioned, and styled to align precisely with the visual placeholder in the PDF.
How the Output Is Generated
When the franchisee submits their customized design, the platform composites the filled-in field values onto the original PDF structure — using the same font, size, color, and position as specified during template authoring. The output is not a screenshot of the browser view; it is the original PDF with the editable fields populated.
This compositing step is what guarantees print-faithful output. The designer controls every typographic and layout parameter from Illustrator; the franchisee's input fills the defined slots without touching anything else.
Authoring Workflow (Admin Side)
Before a franchisee can customize a template, a Liberty marketing team member must configure it. The authoring workflow happens in the admin interface and is designed to be manageable without engineering involvement.
Import the Editable PDF
The designer exports an editable PDF from Adobe Illustrator with the locked elements (logo, brand colors, layout grid) embedded and the editable regions left as named layers or annotated fields. The admin uploads this file to Marketing Central.
Define Editable Regions
The admin marks each editable region in the authoring interface, specifying: field type (text, dropdown, image upload), allowed font sizes (min/max), font family, color constraints, character limits, and whether the field is required. Locked regions are marked as non-editable — franchisees cannot interact with them at all.
Configure Auto-Populate Rules
Fields that should auto-populate from the franchisee's office record are mapped to their data source: office phone number, street address, city/state/province, ZIP/postal code, license ID, QR code (auto-generated using the first-party QR system). Auto-populated fields can be locked (franchisee cannot override) or unlocked (franchisee can edit the pre-filled value).
Set State/Province Conditional Disclaimers
For products that require jurisdiction-specific legal text, the admin configures conditional disclaimer rules: show disclaimer X for Nevada and Oregon, show disclaimer Y for Quebec, suppress disclaimers entirely for all other jurisdictions. When a franchisee orders, the correct disclaimer is shown or hidden automatically based on their office location — no manual intervention required.
Configure the Image Library
For image-upload fields, the admin can provide a curated image library (approved photos, graphics, seasonal imagery) that franchisees select from — or allow free upload, subject to review-for-approval if enabled. The image library is per-template, ensuring franchisees only see relevant options.
Preview and Publish
The admin previews the template as a franchisee would experience it, including auto-populated sample data. After approval, the template is published to the storefront and becomes available for ordering.
Franchisee Customization Experience
For franchisees, the Design Builder is designed to require no design knowledge. The template structure and brand standards are enforced invisibly. Franchisees fill in what's theirs; the system handles everything else.
Auto-Populated Office Data
When a franchisee opens the editor, their office phone, address, and other configured fields are pre-filled from their account data. They can review and adjust (if the field is not locked), but the most common customization — putting their office information on a flyer — requires zero data entry.
Constrained Text Fields
For text fields that allow customization, franchisees see a text input with clear visual indicators of the available space. Font size can only be adjusted within the admin-defined min/max range, preventing text that overflows the field boundary or shrinks below legibility.
Linked Fields
Fields can be linked across the template so that updating one updates all instances. If a franchisee's phone number appears in three places on the template, editing it once propagates the change everywhere. No hunting for all instances manually.
QR Code Auto-Generation
Templates that include a QR code field generate the code automatically, using the platform's first-party QR generation system. The QR code is tied to the franchisee's office and tracking is captured in the marketing analytics module. No third-party QR vendor required.
Review-for-Approval Queue
Templates that include free-form text fields or image upload fields (where brand risk is higher) can be configured to require marketing review before the order proceeds. The franchisee submits their design; it enters a review queue for a Liberty marketing team member to approve, request changes, or reject. The franchisee is notified at each stage.
Save and Return
Customization sessions are saved automatically. A franchisee can start a design, close their browser, and return later to continue from exactly where they left off. In-progress designs appear in a "My Designs" area for easy access.
Output & Handoff
When a franchisee approves their design (and, if required, marketing review is complete), the platform generates the final print-ready PDF and routes it to the appropriate next step.
For Print Orders
The finalized PDF is attached to the order and transmitted to the vendor's system when the order is confirmed. The vendor receives the print-ready file along with the order details (quantity, shipping address, fund allocation). The franchisee's order record links to their design for reference.
For Digital Downloads
When a product is configured as a download-only asset (social media graphics, printable PDFs), the customized output is made available for immediate download after the session is completed. No ordering workflow is required. The download is logged against the franchisee's account.