## UI/UX Designer needed for B2B SaaS mobile app

Yablio is a WhatsApp Business SaaS for small businesses — a shared inbox that lets teams manage WhatsApp conversations from a single number. Think Intercom or Front, but for WhatsApp, built for non-technical users in Italy and Spain. We're pre-launch, backend is being built now. We need a designer to define the visual language before frontend development starts. What we need A complete Figma file covering: Design system (mandatory) Color palette, typography (Inter), spacing, border radius Core components: buttons, inputs, badges, avatars, cards, tags, toasts, modals, bottom sheets, navigation bar Priority 1 screens — mobile (iPhone 14 Pro frame) Inbox — conversation list with agent assignment, unread badges, tags, filters Open conversation — chat bubbles, internal notes, quick replies, contact info panel Onboarding step — WhatsApp connection screen (must feel simple and reassuring) Priority 2 screens Contacts list + contact detail Analytics dashboard (KPI cards + simple chart) Workspace settings Checkout page with Apple Pay / Google Pay + card form (must follow official brand guidelines) Priority 3 — only if time allows Full onboarding flow (5 steps) Login / register screens Empty states Visual direction Clean, professional, accessible. Not enterprise-heavy, not startup-flashy. Target users are small business owners — a hairdresser or real estate agent should look at it and think "I get this." References: Linear (typography, layout), (inbox structure), Crisp (simplicity), Intercom (conversation detail). Primary accent: WhatsApp green #25D366 used sparingly. Font: Inter. Icons: Lucide Icons (already in our tech stack — please use these). Tech stack (for handoff) Expo React Native (iOS + Android) + Next.js web dashboard. Please use Figma Auto Layout on all components for clean developer handoff. Timeline 5–7 working days. Day 1–2: moodboard + design system draft for approval Day 3–5: Priority 1 screens for review Day 6–7: revisions + Priority 2 delivery Max 2 revision rounds included. Budget Fixed €1,000. No hourly billing. Who we're looking for Portfolio showing SaaS or B2B mobile app UI (required) Figma proficiency with Auto Layout and component systems Attention to platform guidelines (especially Apple Pay / Google Pay button specs) Please include 2–3 relevant portfolio examples with your proposal. Applications without portfolio will not be considered. To apply Send your proposal with: portfolio links, your approach to this project, and your availability to start. The Product Yablio is a mobile app (iOS + Android) + web dashboard that allows small business teams to manage WhatsApp Business professionally. Multiple agents can reply to customer messages from a single business WhatsApp number — like a shared inbox, but built on top of WhatsApp. Target user: Owners and employees of small Italian businesses with no technical background — retail shops, beauty salons, real estate agencies, private medical practices, restaurants. They are not developers. They are not used to complex tools. They want absolute simplicity. Visual tone: Professional but approachable. Not enterprise, not startup hype. Something a hairdresser in Milan or a real estate agent in Rome looks at and thinks: "I get this. I can use this." Visual References (please study before starting) ProductWhat to take from itLinear.appStrong typography, clean layout, minimal use of colorFront.appConversation inbox structure — almost identical to our use caseCrisp.chatVisual accessibility, simplicity, approachable for small businessesIntercomConversation detail layout, contact info panel on the right We do NOT want: dark mode as primary style, gaming/crypto aesthetics, excessive decorative elements, overly vibrant color palette. Design System to Deliver Color Palette Primary accent: WhatsApp green #25D366 — use sparingly for CTAs and badges only, NOT as a dominant color Background: white #FFFFFF and light gray #F9FAFB Text: dark gray #111827 (headings) and #6B7280 (secondary) Danger/Alert: red #EF4444 Success: green #10B981 Border: #E5E7EB Typography Font: Inter (Google Fonts — free, excellent mobile readability) Scale: define H1 / H2 / H3 / Body / Caption / Label with sizes and weights Base Components to Include in the Design System Buttons: primary, secondary, ghost, destructive (all with hover/disabled states) Input fields: default, focus, error, disabled Badges: conversation status (open / in progress / closed), unread message counter Avatars: with initials and with photo, with online/offline indicator Conversation card (inbox list item component) Colored tags/chips (for conversation categories) Toast/notification Modal / bottom sheet Mobile navigation bar (bottom tab bar) Screen header Screens to Design Priority 1 — Required (the core of the product) Inbox — conversation list Header with workspace name and logged-in user avatar Search bar Quick filters: All / Mine / Unassigned / Closed Conversation list items showing: contact avatar, name, last message preview, timestamp, unread message badge, assigned agent chip, colored tags FAB (floating action button) for new conversation Bottom navigation bar: Inbox / Contacts / Dashboard / Settings Open conversation — chat detail Header: contact name, phone number, info button, assign agent button Message area: inbound bubbles (gray, left) and outbound bubbles (light green, right), timestamps, read indicators Internal notes (visually distinct — e.g. pale yellow background with lock icon, visible to agents only) Input bar: text field, attachment button, quick replies button, send button Collapsible contact info panel on the right (web) or as bottom sheet (mobile): name, phone, email, tags, notes, conversation history Onboarding — WhatsApp connection step This is the most critical step: the user needs to connect their WhatsApp Business number Layout: progress bar at top (step 2 of 5), simple illustration, clear explanatory text, QR code placeholder, primary CTA Must feel simple and reassuring — zero technical anxiety Priority 2 — Important 4. Contacts screen Contact list with search and tag filter Contact card: avatar, name, phone number, last contact date, tags Contact detail screen: info + conversation history Analytics dashboard KPI cards: conversations today, average response time, messages handled Simple bar chart showing conversations per day (last 7 days) Agent performance list Workspace settings Section list: Company Profile / Team / Quick Replies / Notifications / Subscription Team management screen: agent list with role and invite button Checkout / plan selection page This is the most conversion-critical page — design it carefully. Layout from top to bottom: Header: Yablio logo + "Start your free trial" Selected plan summary: plan name, price, 3 key features, "14 days free" badge Apple Pay button (placeholder: black rectangle, white "Apple Pay" text, Apple logo — Stripe replaces it with the native component on Safari/iOS) Google Pay button (placeholder: white rectangle with gray border, "Google Pay" text, G logo on left — Stripe replaces it on Chrome/Android) Horizontal divider with "or pay with card" text Credit card form: card number, expiry, CVV, cardholder name (Stripe Elements style) Primary CTA: "Start free trial — no charge today" Legal note below CTA: "No charge for 14 days. Cancel anytime." Lock icon + "Secure payment powered by Stripe" Important note for the designer: Apple Pay and Google Pay buttons are native components — you MUST follow the official brand guidelines from Apple and Google. Binding requirements: Apple Pay: black button on light backgrounds, white button on dark backgrounds. Never change color, shape, or proportions. Apple logo must always be visible. Reference: Apple Pay Human Interface Guidelines Google Pay: white button with #DADCE0 gray border on light backgrounds. "Google Pay" text in black, G logo on the left. Never modify colors or layout. Reference: Google Pay Brand Guidelines Visual hierarchy must place Apple Pay / Google Pay ABOVE the card form — users who have these methods available will use them immediately without seeing the card form, which significantly increases conversion. Design them as faithful placeholders — Stripe will automatically replace them with the real native components in production. Priority 3 — Nice to have (only if budget allows) 8. Complete onboarding flow (all 5 steps) 9. Login / registration screen 10. Empty states (empty inbox, no contacts, etc.) Technical Specifications Deliverable format: Figma file with separate pages for: Design System / Mobile Screens / Web Dashboard Mobile frame: iPhone 14 Pro (390×844) as primary reference Web frame: 1440px desktop Auto Layout: use Figma Auto Layout on all components to facilitate developer handoff Naming: clear naming system for layers and components (e.g. Button/Primary/Default, Card/Conversation/Unread) Export: all design system components exportable as PNG/SVG What is NOT Included in This Brief Copywriting (all text is placeholder — we handle copy ourselves) Interactive prototype (not required) Animations and micro-interactions (out of scope for this phase) Dark mode (out of scope) Custom illustrations (use icons from Lucide Icons — open source, already integrated in our tech stack) Working Process Days 1–2: Designer shares moodboard + design system draft for approval before proceeding to screens Days 3–5: Priority 1 screens delivered for review Days 6–7: Revisions (max 2 rounds) + final delivery of Priority 2 screens Communication: feedback via Figma comments or email. Maximum 2 revision rounds included in the budget. FAQ for the Designer "Can I use an existing UI kit as a base?" Yes, as long as the final result looks custom and not like a generic template. Untitled UI or Material 3 as a base are fine. "Is the web version required too?" For Priority 1 screens (Inbox and Conversation) yes — adapted layout at 1440px desktop. For all other screens, mobile only is sufficient. "Which icon library should I use?" Lucide Icons () — open source, already integrated in our tech stack. "What is the app called?" The app is called Yablio. Please use this name in all mockups and placeholder text where relevant.