UX Standardization
The Opportunity: Streamlining the Design-to-Production Pipeline
In a compact team of product designers handling rapid enterprise deployments, creating bespoke, one-off screens for each client rollout accumulated acute design debt. Engineering handoffs lacked standardized interface conventions, QA cycles were prolonged by visual discrepancies, and the business development team lacked unified UI toolkits for enterprise pitches.Standardization was the highest-leverage lever to accelerate delivery across the company. Working under the founder’s initiative, I led the creation of an operational design foundation that established a single source of truth across the UX/UI pipeline:
Tokenized UI Architecture:Built a modular component library in Figma utilizing design tokens, auto-layout standards, and global variables for rapid white-label re-theming across diverse client brand identities.
Internationalization & Localization Ready:Structured flexible typography scales and container padding to support seamless multi-language switching (deploying Thai and English during initial rollouts) without layout breakage, a crucial requirement for enterprise clients in high-density tourist and commercial hubs such as Bangkok and Chiang Mai.
In a compact team of product designers handling rapid enterprise deployments, creating bespoke, one-off screens for each client rollout accumulated acute design debt. Engineering handoffs lacked standardized interface conventions, QA cycles were prolonged by visual discrepancies, and the business development team lacked unified UI toolkits for enterprise pitches.Standardization was the highest-leverage lever to accelerate delivery across the company. Working under the founder’s initiative, I led the creation of an operational design foundation that established a single source of truth across the UX/UI pipeline:
Tokenized UI Architecture:Built a modular component library in Figma utilizing design tokens, auto-layout standards, and global variables for rapid white-label re-theming across diverse client brand identities.
Internationalization & Localization Ready:Structured flexible typography scales and container padding to support seamless multi-language switching (deploying Thai and English during initial rollouts) without layout breakage, a crucial requirement for enterprise clients in high-density tourist and commercial hubs such as Bangkok and Chiang Mai.
Cross-Functional Documentation:Authored comprehensive design handoff specifications, edge-case states (network dropouts, stockouts, multi-device concurrency), and QA acceptance checklists tied directly to design system components.
Sales & Client Enablement:Packaged modular, interactive client-onboarding kits and clickable UX flow prototypes, allowing sales and business development teams to demo live white-label capabilities to enterprise decision-makers in real time.
Sales & Client Enablement:Packaged modular, interactive client-onboarding kits and clickable UX flow prototypes, allowing sales and business development teams to demo live white-label capabilities to enterprise decision-makers in real time.
CRM 2.0 UX Design
Unifying Customer Loyalty Across Dine-In & Delivery
While Hato Hub maintained an established CRM platform, legacy loyalty mechanics were fragmented across disconnected touchpoints, largely functioning as digital replicas of physical stamp cards, printed vouchers, and basic discount codes. CRM 2.0 focused on closing the loop between dine-in visits and direct delivery through an embedded digital membership experience.
While Hato Hub maintained an established CRM platform, legacy loyalty mechanics were fragmented across disconnected touchpoints, largely functioning as digital replicas of physical stamp cards, printed vouchers, and basic discount codes. CRM 2.0 focused on closing the loop between dine-in visits and direct delivery through an embedded digital membership experience.
1. Transparent Member Value Visibility
Rather than burying perks inside nested account profile tabs, member benefits were integrated directly into high-intent surfaces across both the in-store ordering cart and the LINE OA delivery flow:
Dynamic Member Pricing & Perks:Surfaced direct price comparisons between member rates and standard menu packages, alongside prominent callouts for tier-exclusive benefits.
Tier Progress Indicators: Visual status bars showing diners exactly how many points or qualifying visits were needed to unlock the next reward tier prior to submitting an order.
Rather than burying perks inside nested account profile tabs, member benefits were integrated directly into high-intent surfaces across both the in-store ordering cart and the LINE OA delivery flow:
Dynamic Member Pricing & Perks:Surfaced direct price comparisons between member rates and standard menu packages, alongside prominent callouts for tier-exclusive benefits.
Tier Progress Indicators: Visual status bars showing diners exactly how many points or qualifying visits were needed to unlock the next reward tier prior to submitting an order.
2. Simplification: "Earned Points" as Direct Currency
Legacy restaurant CRM platforms frequently burden diners with opaque redemption rules, expiring vouchers, and complex exclusions that floor staff struggle to explain. Alongside the product manager, I restructured the loyalty model around immediate, tangible utility:
Points-to-Perks Redemption:Replaced disconnected, multi-step reward portals with an intuitive in-flow mechanic, allowing diners to convert earned points directly into discount vouchers and promotional offers right within the ordering experience.
Upfront Voucher & Promo Discovery:Positioned dynamic promotion matching directly at the start of the ordering journey within a dedicated vouchers and promotions surface. Diners can immediately see which deals they are eligible for before building their order, with transparent conditional rules (e.g., minimum spend thresholds or item qualifiers) surfaced upfront rather than hidden at checkout.
Legacy restaurant CRM platforms frequently burden diners with opaque redemption rules, expiring vouchers, and complex exclusions that floor staff struggle to explain. Alongside the product manager, I restructured the loyalty model around immediate, tangible utility:
Points-to-Perks Redemption:Replaced disconnected, multi-step reward portals with an intuitive in-flow mechanic, allowing diners to convert earned points directly into discount vouchers and promotional offers right within the ordering experience.
Upfront Voucher & Promo Discovery:Positioned dynamic promotion matching directly at the start of the ordering journey within a dedicated vouchers and promotions surface. Diners can immediately see which deals they are eligible for before building their order, with transparent conditional rules (e.g., minimum spend thresholds or item qualifiers) surfaced upfront rather than hidden at checkout.
Operational UX Research
A digital menu designed exclusively in an office environment quickly breaks down during the rush of a crowded, noisy dining room. To understand real-world physical constraints, our team partnered with Bar B Q Plaza to conduct contextual inquiries and on-site observations.Observing real diners, service staff, and floor managers revealed three critical operational friction points that reshaped our table-ordering UX:
1. The "Eat Before Pay" Operational Model
Most digital ordering platforms demand upfront payment for every submission. In high-velocity dining concepts like Bar B Q Plaza, where tables continuously reorder meat platters, sides, and beverages throughout a 90-minute meal, requiring payment on each round created severe friction and disrupted social conversation:
Continuous Multi-Round Ordering:Diners submit orders continuously with minimal friction. Items route straight to Kitchen Display Systems (KDS) without gating the order behind a checkout screen.
Single Bill Settlement:Diners track their cumulative running tab at any point during the meal and initiate a single payment (via QR PromptPay or credit card) only when finished, eliminating the wait for physical bill presentation
Most digital ordering platforms demand upfront payment for every submission. In high-velocity dining concepts like Bar B Q Plaza, where tables continuously reorder meat platters, sides, and beverages throughout a 90-minute meal, requiring payment on each round created severe friction and disrupted social conversation:
Continuous Multi-Round Ordering:Diners submit orders continuously with minimal friction. Items route straight to Kitchen Display Systems (KDS) without gating the order behind a checkout screen.
Single Bill Settlement:Diners track their cumulative running tab at any point during the meal and initiate a single payment (via QR PromptPay or credit card) only when finished, eliminating the wait for physical bill presentation
2. Contextual Item Recommendations
Upselling items verbally places heavy cognitive strain on busy waitstaff. We transformed the digital cart into an automated recommendation surface that elevated the dining experience without creating intrusive friction:
Pairing Heuristics:The system surfaces relevant add-ons based on current basket contents (e.g., suggesting dipping sauce refills, garlic rice, or extra sides when raw meats are added).
High-AOV Visual Cards:Compact, non-blocking horizontal carousels positioned directly above the primary order submission button, driving one-tap additions that raised Average Order Value (AOV).
Upselling items verbally places heavy cognitive strain on busy waitstaff. We transformed the digital cart into an automated recommendation surface that elevated the dining experience without creating intrusive friction:
Pairing Heuristics:The system surfaces relevant add-ons based on current basket contents (e.g., suggesting dipping sauce refills, garlic rice, or extra sides when raw meats are added).
High-AOV Visual Cards:Compact, non-blocking horizontal carousels positioned directly above the primary order submission button, driving one-tap additions that raised Average Order Value (AOV).
3. "Points to Cash" Collaborative Table Settlement
Group dining in Southeast Asia presents a distinct social pattern: one individual often pays the table's total bill, while fellow dining companions hold unspent loyalty perks on their own personal devices.Hato Hub already featured real-time group ordering, allowing guests at the same table to join the digital cart and review each other’s items. However, managing discounts remained siloed to a single device. We solved this by designing a shared perk-pooling interaction:
Multi-User Loyalty Perks Pooling:Non-paying dining companions at the table can authorize a portion of their personal loyalty points or eligible vouchers from their own phones to contribute toward the collective bill.
Real-Time Running Tab Sync:The primary bill recalculates dynamically on the payer’s phone, deducting pooled points and displaying the adjusted balance prior to final transaction execution.
Group dining in Southeast Asia presents a distinct social pattern: one individual often pays the table's total bill, while fellow dining companions hold unspent loyalty perks on their own personal devices.Hato Hub already featured real-time group ordering, allowing guests at the same table to join the digital cart and review each other’s items. However, managing discounts remained siloed to a single device. We solved this by designing a shared perk-pooling interaction:
Multi-User Loyalty Perks Pooling:Non-paying dining companions at the table can authorize a portion of their personal loyalty points or eligible vouchers from their own phones to contribute toward the collective bill.
Real-Time Running Tab Sync:The primary bill recalculates dynamically on the payer’s phone, deducting pooled points and displaying the adjusted balance prior to final transaction execution.
AI Research for predictive retention
Enterprise restaurant groups process massive volumes of transactional data, yet CMOs and franchise owners often lack actionable insights to counter the steep commissions charged by third-party aggregators. Collaborating with the in-house UX research team, I participated in qualitative discovery sessions and stakeholder interviews with enterprise leadership (brand owners, CMOs, and operations heads) to explore how predictive analytics could convert static CRM databases into proactive revenue drivers:
1. Predictive RFM Segmentation:Explored data-visualization frameworks translating raw Recency, Frequency, and Monetary (RFM) metrics into actionable operational cohorts: Champions, At-Risk Regulars, and Lapsed First-Timers.
2. Automated Campaign Triggers (Lo-Fi Exploration):Partnered with engineering to map system capabilities for automated re-engagement workflows, such as automatically dispatching personalized LINE notifications with custom incentives when a regular customer exceeded their typical visit interval.
3. Menu Engineering Heuristics:Designed analytical dashboard views showing the direct correlation between specific menu items and long-term customer retention, helping marketing and culinary teams optimize high-margin combo sets.