African + Eastern: Architecting a Premium B2B E-Commerce UI/UX Experience

Objective

African + Eastern (A+E) is the premier importer, distributor, and retailer of alcohol brands in the Middle East, boasting a legacy of over 100 years. Serving leading hospitality venues, including luxury hotels, restaurants, and lounges across the UAE, A+E required a specialised, closed-network digital design solution to manage their vast corporate client base. GTECH spearheaded the strategic UX/UI design of a bespoke, highly secure B2B e-commerce portal aimed at streamlining bulk ordering, account management, and corporate fulfilment.

Challenge

Unlike a standard consumer-facing retail site, A+E’s B2B portal needed to handle complex, multi-tiered corporate account structures. For example, a single user (like an F&B Director) might need to manage orders for multiple distinct venues (e.g., Habtoor Grand Resort and Habtoor – Accentive Investment LLC) under different account IDs. The design required a sophisticated approach to manage specialised trade deals, variable permit statuses, and bulk inventory allocations, all while providing a frictionless, premium frontend experience for busy corporate buyers.

Solution

Strategic UX Remapping & Wireframing:

Based on the Figma design strategy, GTECH architected the visual and functional blueprint for a mobile-first B2B e-commerce platform that balances premium branding with complex enterprise utility:

• Strategic B2B UX & Account Management: GTECH designed an intuitive, closed-portal landing experience. The “Welcome” dashboard allows corporate users to instantly identify and toggle between their various venue accounts via large, distinct interactive cards, complete with specific account IDs and registered addresses. This design logic eliminates the friction of managing multi-property logistics.
• Premium E-Commerce Interface: The portal’s UI reflects A+E’s premium brand status. Utilising their signature deep red and clean white colour palette, the interface features high-quality product photography. The product cards are custom-designed for B2B needs, prominently displaying essential corporate purchasing data such as “UOM” (Unit of Measure), precise stock availability (e.g., “Limited Stock”, “On Allocation”), and dynamic “Trade Deals” pricing layouts.
• Comprehensive Corporate Dashboard Design:
  GTECH envisioned a robust “Account Overview” section. This acts as a centralised visual command centre where clients can track their specific “Permit Status” (including expiry warnings), upload necessary legal documents, view recent order histories, and manage complex approvals.
• Optimised Mobile Experience:
  Recognising that F&B managers are constantly on the move, the entire design system-from the “Submit Request” onboarding forms to the “Shopping Cart” checkout process-is heavily optimised for tablet and mobile use, featuring large tap targets, sticky bottom navigations, and clean input fields.

Results

Conclusion