Custom Gift Card Creator
Project Overview
Summary
Shift4 needed a way for restaurants using Lighthouse Business Manager to sell gift cards, both physical and digital, without leaving the platform. I designed the end-to-end feature from scratch: storefront setup, card customization, and an ongoing management dashboard.
Working closely with product and engineering I mapped user flows, sketched early concepts, and built detailed Figma designs and a clickable prototype, all while designing around significant technical constraints from a third-party card customization component.
Problem to Solve
During the COVID-19 pandemic, restaurant operators needed new ways to generate revenue when in-person dining was restricted or shut down entirely. Gift cards were an obvious channel, but LBM had no way to sell them. Operators had to use third-party tools outside the platform, creating fragmented workflows and missed revenue opportunities.
Shift4 needed a native gift card feature that was simple enough for non-technical restaurant operators to set up independently, flexible enough to support both physical and digital cards, and integrated into LBM’s existing platform without requiring operators to manage a separate system.
Process
Discovery
The discovery phase focused on understanding LBM’s existing design patterns and technical boundaries rather than uncovering user workflows. The problem was well-defined and the constraints were the real design challenge.
Two constraints shaped the entire design. First, Shift4 relied on a third-party component for card customization, which limited what users could do when designing their own cards. The feature needed to feel flexible within a constrained system. Second, the technical architecture required users to create an online store as part of setup, even if they only intended to sell cards in person. The design needed to make this requirement feel logical rather than arbitrary, and give users an easy way to disable the storefront later if they didn’t want it.
Design: Pencil Sketches
I began sketching before requirements were fully defined, grounding the early concepts in what was already known: the data needed to create a gift card, the card types to support, and the key decision points in the flow.
These sketches established the foundation for the user flows and helped identify the key interactions before moving into Figma.
Design
With the flows established I adapted the designs within LBM’s existing design library, pushing its components as far as they could go while staying within the system. I introduced new form field styles, error modules, and success modals where the existing library fell short.
The full feature was built in Figma with a clickable prototype alongside, giving product and engineering a clear, navigable reference for how the flow worked end to end.
The feature covered three phases: guided storefront setup, card design and customization, and an ongoing management dashboard for running the program after launch.
Outcomes
The feature delivered a complete end-to-end gift card program for restaurant operators, from initial setup through ongoing card management. Key deliverables included a step-by-step setup wizard covering storefront creation and card type selection, a constrained but flexible card design tool built around a third-party component, and a centralized management dashboard letting operators control their entire gift card program from one screen.
The clickable prototype covered the full flow and served as the primary handoff reference for engineering.
Business Impact
The gift card feature gave restaurants a new revenue stream at a moment when they needed it most. Launched during the COVID-19 pandemic when in-person dining was restricted, it provided operators with an accessible sales channel they could set up and manage independently without leaving LBM or relying on a third-party tool. The feature generated incremental revenue for Shift4 on every card sold while directly supporting the restaurants that depended on the platform.
Client
Shift 4 Payments
Services
- Information Architecture
- User Flows
- User Experience Design
- User Interface Design
- Visual Design
Tools
- Figma
Design Elements
Designs
Entry Point for Gift Card Creation
New features in LBM are introduced through a dedicated landing page that explains the value and sets expectations, particularly important when a feature carries an additional cost. The entry point frames the gift card program as a revenue opportunity before asking operators to commit to setup.
Choose Your Card Type
The first setup decision is card type: digital, physical, or both. Surfacing this choice early lets operators configure the experience around their business model and keeps the subsequent flow focused on what they actually need.
Name & URL
Operators name their storefront and choose a custom URL, with real-time validation confirming availability. Validating the URL immediately prevents errors later in the flow and gives operators confidence their storefront is ready to launch before they’ve finished setup.
Design Your Own Card
Operators can design custom gift cards by starting with a template, uploading their own images and logos, and adding personalized text. Elements can be layered between foreground and background, giving creative control while keeping the tool approachable within the constraints of the third-party component.
Gift Card Dashboard
The Gift Card Dashboard is the ongoing management hub for the program. From a single screen operators can enable or disable card types, select active designs, order additional physical cards, set customer pricing, and preview their storefront. Centralizing all program controls here means operators never have to re-enter the setup flow to make routine changes.