Yablio: Designing a Zero-Learning-Curve Mobile Inbox for SMB

The Selection: Out of 60+ candidates, I was selected to define the visual language and core UI architecture for Yablio, a WhatsApp Business SaaS built for non-technical SMB owners (retailers, salons, real estate agents) in Italy and Spain.

The objective was to take the high-utility features of a shared team inbox and compress them into a mobile-first experience that feels as familiar as a standard WhatsApp chat. I had a strict 7-day sprint to deliver a production-ready Design System and the Priority 1 & 2 screen suites.

Role: Lead Product UI Designer

Platform: Mobile App (iPhone 14 Pro Reference)

Visual DNA: "Clean, Professional, Accessible" drawing inspiration from Linear's typography and Front’s utility.

Before designing a single screen, I architected a comprehensive Design System to ensure long-term scalability and pixel-perfect consistency.

Atomic Components: Engineered a library of buttons, inputs, badges, and avatars using 100% Figma Auto Layout. Every component was built to mirror Flexbox logic, ensuring the development team could translate the UI to React Native without guesswork.

Functional Color: Reserved "WhatsApp Green" (#25D366) exclusively for high-priority CTAs and unread indicators to maintain a professional, de-cluttered aesthetic.

Inter Typography: Leveraged a rigorous type scale for Inter, optimized for sub-second readability on mobile devices.

The core UI needed to manage high-density data without overwhelming a non-technical user.

The Shared Inbox: Designed a streamlined conversation list featuring agent assignment chips, colored category tags, and real-time unread badges.

Hybrid Chat Bubbles: Created a distinct visual language for the chat detail separating Inbound/Outbound customer messages from Internal Agent-only notes (using a locked, amber-tinted state) to facilitate team collaboration in-thread.

Onboarding Flow: Designed a 5-step connection sequence with high-clarity progress markers to reduce "technical anxiety" during the WhatsApp API pairing process.

I architected the checkout UI to maximize mobile conversion rates by strictly adhering to Apple Pay and Google Pay Human Interface Guidelines.

Express Checkout Hierarchy: Positioned native payment components as the primary action points, placed above the manual card form to capture one-tap payments.

Trust Architecture: Integrated Stripe-compliant security badges and clear "14-Day Free Trial" logic to ensure a frictionless transition from lead to subscriber.

Pixel-Perfect Execution: Every screen was delivered with organized layer naming and responsive constraints.

Technical Alignment: By using Lucide Icons and standard Next.js/Expo spacing scales, the final UI package was ready for immediate frontend integration.