LeoChat mobile and desktop messenger application
The project encompassed the complete end-to-end design lifecycle, including brand strategy, logo creation, UX architecture, and UI design across 720 mobile screens and 720 desktop screens. The design workflow began with establishing the visual identity and core logo mark, which directly informed the visual language of the design system. From this foundation, a modular component library was built in Figma, establishing strict color tokens, typography scales, and liquid glass surface properties. These scalable atomic components were then utilized to individually design and refine every state, flow, and screen across the entire application ecosystem.
Scope of Work & Process
Scope of Work & Process
The project was executed through a highly structured, system-first process designed to handle an ambitious scale of 1,440 screens—comprising 720 tailored for mobile and 720 optimized for desktop. The workflow originated with the creation of the logo and visual identity, which established the foundational aesthetic for the entire ecosystem. This identity was then translated into a robust design system, defining color palettes, typography scales, and signature liquid glass surface properties. From this system, a modular, reusable component library was engineered in Figma. Utilizing these atomic components, every individual screen across both platforms was manually built and refined, ensuring total visual consistency, deep scalability, and complete feature parity between the mobile and desktop applications.
1,440 screens
Mobile Experience Process
The mobile experience was engineered around touch-first ergonomics, fast content scanning, and effortless navigation. Special attention was dedicated to translating complex financial transactions into intuitive, single-handed workflows while maintaining visual clarity across varied lighting conditions and device sizes.
-
Liquid Glass Aesthetic: Implemented dynamic frosted-glass cards and layered navigation bars that adapt naturally to background content while preserving high contrast and readability.
-
Integrated Wallet UX: Designed seamless in-chat financial transfers, interactive digital invoice cards, and real-time transaction tracking within a clean, distraction-free layout.
-
Design System Scaling: Constructed a flexible mobile component architecture in Figma that enabled consistent implementation across all 720 mobile screens.
-
Touch-Optimized Layouts: Formulated clear visual hierarchies, precise hit targets, and intuitive gesture controls tailored for modern iOS and mobile viewports.
Desktop Experience Process
The desktop adaptation expands the mobile experience into a multi-column power tool optimized for multi-tasking, high information density, and keyboard-driven workflows. The layout leverages larger desktop display real estate to present simultaneous access to conversation threads, media management, and wallet analytics without clutter.
-
1Multi-Column Architecture: Developed a responsive split-view system that allows simultaneous viewing of contact directories, active message streams, and detail sidebars.
-
2Desktop Glassmorphism: Scaled the liquid glass visual language to larger displays, utilizing soft background blur effects and refined window borders to define distinct functional zones.
-
3Cross-Device Parity: Maintained strict visual and functional alignment with the mobile app, ensuring users experience zero friction when transitioning between platforms.
-
4Comprehensive Screen Coverage: Custom-built 720 desktop screens covering every edge case, account management tool, settings modal, and payment confirmation state.
