Yablio: SaaS Shared Inbox for WhatsAppEngineering Radical Simplicity
A high fidelity WhatsApp Businessecosystem designed for European SMBs within a seven day high velocity
sprint.
A few Components from the Design
The Challenge
Small business owners across Europe needed a way to manage customer conversations professionally without the complexity of enterprise software. Yablio required a mobile first shared inbox that felt as simple as a standard chat app but carried the power of a full SaaS platform. Jemirae was selected from a global pool of over 60 candidates to define this visual language. Our task was to create a zero learning curve interface for non technical users like retail shop owners and real estate agents.
The Solution
We delivered a complete UI architecture and a production ready design system in record time. Our team focused on radical simplicity to ensure that every feature felt intuitive from the first click. We designed the core inbox, the team collaboration tools, and the entire onboarding flow to reduce technical anxiety. By aligning our design logic with the actual code structures used by developers, we ensured the project moved from design to engineering without any friction.
The High Level Flowchart
Few Screens From The Registration Flow
The Team Powered Inbox
The heart of the application is a shared inbox designed for high density data. We created a streamlined conversation list featuring agent assignment chips and real time unread badges so teams can work together without overlapping. We also engineered a hybrid chat logic. This creates a distinct visual language to separate customer messages from internal agent notes. Team members can collaborate and speak to each other directly within a customer thread. This facilitates real time teamwork without the customer ever seeing the internal discussion.
Core Screens Of The System
Conversion and Trust Architecture
To drive growth, we focused on a high clarity onboarding and checkout system. We designed a five step connection sequence with progress markers to reduce stress during the WhatsApp API pairing process. For the checkout experience, we followed Apple and Google Human Interface Guidelines to the letter. We positioned native payment components as primary actions to capture one tap payments. By integrating security badges and clear free trial logic, we bridged the trust gap for new users and maximized conversion rates.
The Foundation: Technical Design System
We architected a comprehensive style guide and component library to serve as the single source of truth for the product. This system was built for long term scalability and technical precision. We defined a strict visual language using the Inter font for maximum readability on mobile screens and a functional color palette that reserves WhatsApp Green exclusively for high priority actions.
Our team engineered a library of atomic components including buttons, input fields, badges, avatars, and bottom sheets. Every element was built using Figma Auto Layout to mirror Flexbox logic. This technical depth ensured that the development team could translate our designs into React Native and Next.js with total precision.
Visual Language & Tokens
The visual identity is engineered for radical simplicity and accessibility. We used a clean geometric type scale with the Inter font to ensure high readability for non technical users on mobile devices.
The color palette utilizes WhatsApp Green as a high priority accent while keeping the overall interface clean and professional. Our iconography uses the Lucide library to maintain consistency with the technical stack used by the development team.
Built for High-Speed Development
By defining every UI component with absolute precision in Figma, we ensured a seamless transition to the engineering phase.
- Interactive Modules We engineered chat bubbles, navigation bars, and input fields using 100 percent Auto Layout to mirror the logic of React Native and Next.js.
- Data Visualization Our team developed specialized KPI cards and simple charts designed to help small business owners track their performance without any technical confusion.
Effective Developer Handoff
Documentation was a critical part of our delivery. We provided clear specifications for spacing, border radius, and interactive states for every component. By using Lucide Icons and standard technical scales, we eliminated the communication gap between design and engineering. This allowed the Yablio team to begin frontend development immediately after our seven day sprint with a production ready asset package that required zero design corrections.
UX Research
2 days
We established the moodboard and design system architecture to ensure the product would be approachable for hairdressers and real estate agents.
UI Design & Testing
4 days
We focused on the core inbox and onboarding flows to ensure the WhatsApp connection process was simple and reassuring.
Documentation & HandOff
1 day
We finalized the design system and delivery package to allow the frontend team to start building immediately.
Results
60+
Global candidates we were selected from to lead this design.
7 Days
Total sprint time from the first research session to final delivery.
100 %
Technical alignment with the engineering team for a zero friction handoff.
Results
60+
Global candidates we were selected from to lead this design.
7 Days
Total sprint time from the first research session to final delivery.
100 %
Technical alignment with the engineering team for a zero friction handoff.