B2B Sample Portal
Sampling platform for food service vendors to browse, sample, and order bakery products
Role
UX Designer
Timeline
July 2025 - Now
Tools
Swift, Figma, Xcode
Overview
Designed and developed a high-fidelity iOS application for FGF Brands, creating a streamlined B2B sample-requesting portal for bakery vendors. The app combines minimalist design with powerful functionality to simplify the product sampling process.
The Challenge
B2B vendors needed an efficient way to browse FGF's extensive bakery catalog, request product samples, and manage orders on-the-go. The existing web-based system was clunky on mobile devices and didn't provide the quick, intuitive experience vendors needed.
The Solution
Built a native iOS app using Swift with a food-focused, minimalist design aesthetic. Implemented smooth interactions including slide-over product details, a persistent floating sample cart, and one-tap checkout to create a seamless mobile-first experience.
Understanding the Users
The primary users are B2B food service vendors (supermarkets, restaurants, cafes, hotels) who need to discover and sample FGF's bakery products before placing bulk orders. These users value efficiency, visual product presentation, and quick ordering workflows.
Food Service Buyers
Decision-makers evaluating products for their establishments
- • Need quick access to product catalog while on-the-go
- • Want to see high-quality product images and nutritional info
- • Require easy sample ordering with minimal friction
Procurement Managers
Manage multiple vendor relationships and product evaluations
- • Track sample orders across multiple product categories
- • Need organized view of past orders and preferences
- • Value quick filtering by dietary needs and categories
Design & Development Approach
Developed using Swift with a focus on native iOS patterns and smooth animations. The design aesthetic prioritizes food photography with a clean, professional interface using Playfair Display for headings and Inter for UI elements.
Food-Focused Aesthetic
Large, appetizing product cards with high-res imagery take center stage. Generous white space and rounded corners create a sophisticated, modern feel that puts the bakery products front and center.
Mobile-First Interactions
Implemented native iOS patterns like slide-over sheets for product details and bottom-sheet filters. Every interaction is optimized for one-handed mobile use with easy tap targets and smooth gestures.
Swift Performance
Built natively in Swift for optimal performance, smooth scrolling, and instant responsiveness. Leveraged iOS frameworks for seamless animations and fluid transitions throughout the app.
Key Features
Vertical Product Feed
Large, scrollable product cards showcase appetizing bakery items with instant "+" buttons to add samples. Each card displays product name, sample size badge (2-pack, individual slice), and pricing information at a glance.
Smart Filtering System
Bottom-sheet filter overlay allows quick filtering by category (Flatbreads, Artisan Breads, Laminated Dough, Sweet Goods) and dietary needs (Vegan, Non-GMO). Helps vendors find exactly what they need instantly.
Product Slide-Over Details
Instead of full-page navigation, product details appear in an elegant slide-over panel with high-res imagery, nutritional PDF links, flavor options, and a prominent "Add to Sample Cart" button that dynamically updates to show quantity controls.
Floating Sample Cart
Persistent floating button displays sample count and provides instant access to cart. Always visible but unobtrusive, making it easy to track selections without interrupting the browsing flow.
One-Scroll Checkout
Streamlined checkout on a single screen with vendor name input, delivery date picker, and toggle for default warehouse address. Minimizes friction and gets vendors to order confirmation in seconds.
Success State
Celebratory confirmation screen shows order success with estimated arrival date, creating a positive final impression and clear expectations for vendors.
Iterative Build
Generated Swift/SwiftUI scaffolding with AI, then reviewed, refined, and connected styling manually, combining AI speed with human design judgment.
Results & Reflection
Combining AI assistance with manual coding accelerates development while maintaining code quality and design standards
Native iOS patterns like slide-overs and bottom sheets create intuitive mobile experiences that users already understand
Food-focused design with high-quality imagery and generous white space creates an appetizing, professional B2B experience
Minimizing checkout friction with smart defaults and single-screen flows dramatically improves conversion rates