SkyTab AI Website Builder
Role
UX/UI Lead Product Designer (solo)
Team
2 Project Managers
4 Engineers
3 QAs
1 Product Director
1 Head of Product
1 VP of Design
Tools
Figma, Notion, Loom, User-guiding, Agile, React
Overview
A bold move by Shift4 into the AI space—SkyTab Website Builder was designed to empower busy restaurant owners to launch fully functional, professional websites in under 3 minutes. As the sole designer, I was responsible for defining, designing, and delivering the entire product experience—balancing technical constraints, AI innovation, and extreme usability.
The Problem
Restaurant owners—especially independents and small chains—struggle with launching and maintaining a digital presence. Time-strapped and often tech-averse, most either avoid having a website or rely on outdated tools and third-party services. They needed something fast, intuitive, and automated.
The Opportunity
In early 2023, as AI tools surged in popularity, Shift4 identified an opportunity to expand its POS ecosystem by creating an AI-powered website builder, embedded within the SkyTab ecosystem, optimized specifically for restaurants.
My Role & Team
As the lead and solo designer, I worked across the full lifecycle:
• Product strategy
• User research
• UX architecture
• UI design
• Prototyping
• Handoff and implementation QA
Worked closely with PMs, engineers, QA, and executive leadership.
Research & Discovery
Over 20 interviews with restaurant owners helped validate assumptions and build empathy.
Common themes:
• 78% wanted a “done-for-me” experience.
• Most used outdated tools or no website at all.
• Visual design mattered, but speed and simplicity were critical.
• Pain points with platforms like Wix and Squarespace included too much complexity and time.
Key insight: “I want a website where everything is done for me and I just hit publish.”
Product Strategy
We defined a few non-negotiables for MVP:
• End-to-end setup in < 3 minutes
• AI-generated site from a simple prompt
• Fully responsive, accessible templates
• Seamless integration into SkyTab POS
• Easy styling with zero design skills required
To reduce user effort, we leveraged internal POS data to pre-fill key info (type of cuisine, address, hours, etc.)—cutting down steps and friction.
Onboarding & AI Integration
This was the core UX challenge. We iterated on multiple onboarding flows:
• Tested different prompt formats
• Prioritized speed and clarity
• Integrated AI to generate layout, copy, and images from a single user input
Outcome: A 1-step onboarding flow where the user enters a short description, and the AI selects a matching template and fills in content.
Initial designs for onboarding experience
Final design - Onboarding Experience
Designing for Two Users
The Merchant:
• Template library with built-in accessibility
• One-click color theme options (pre-tested for contrast)
• Quick edits: text, logo, menu, hours
• Admin flows: app install, domain connect, DNS, version history, and rollback
The Customer (site visitor):
• Fully responsive design
• ADA-compliant templates
• Optimized for reservations, menus, online orders
Key Design Principles
• Reduce friction: Less input, more output
• Default to smart AI choices: Pre-filled content from POS data
• Fast feedback: Live preview of changes
• Scalable architecture: Templates + modular blocks
• Accessible by default: WCAG-compliant color and typography
Templates - Each template is available in 6 different color styles
Customer Experience
Merchant Experience - Editor UX , Dashboard, settings, etc.
To view the Figma file with all of the screens, components and design systems, contact me!
Reflections & Next Steps
What went well:
-
Clear alignment with user needs and business goals
-
Successfully created a true “set-it-and-forget-it” experience through thoughtful AI integration
-
Reduced onboarding time by leveraging internal data—eliminating friction from the start
-
Designed with accessibility and scalability at the core
What I’d improve or expand:
-
Introduce deeper testing with multilingual restaurants
-
Add smart logic for niche segments (e.g., food trucks, late-night spots)
-
Expand personalization controls without increasing complexity
🚧 Preparing for Version 2.0
Before I was laid off, I had already begun leading the design vision for SkyTab Website Builder 2.0—aiming to elevate the product from “auto-generated” to a competitive, intuitive editing experience.
-
Designed a new click-to-edit interface, offering users more control while maintaining simplicity
-
Prototyped a system where users could edit sections in real-time with inline controls (no need to dig into settings panels)
-
Leveraged AI to auto-suggest design changes, content improvements, and layout adjustments
-
Built a working prototype to validate this experience with internal stakeholders and accelerate engineering buy-in
This 2.0 direction would bring SkyTab Website Builder into stronger competition with platforms like Wix and Squarespace, while still offering the unique advantage of AI + POS ecosystem integration.
🧪 AI-Powered Prototype (Built with Vercel V0)
To support the future vision for SkyTab Website Builder 2.0, I designed and built an AI-powered working prototypeusing Vercel V0. This prototype showcased the click-to-edit interface and AI-assisted suggestions in action, allowing stakeholders to experience the new vision in real time.
Purpose:
Accelerate alignment between design and engineering
Support an agile methodology by validating functionality early
Streamline decision-making with a tangible product preview
Reduce development time through real code scaffolding
View Prototype : https://kzmp0nlanlbapke0xgff.lite.vusercontent.net/
