Modern Video Call App UI
Budget: ₹600 – ₹1,500 INR
Project Brief – Customer App (Video Calling Social App)
I’m looking to design a clean, professional, and distraction-free mobile app UI in Figma for a social video-calling application (Customer App).
The goal is to create a smooth, intuitive user experience where the interface supports communication without overwhelming the user. The design should avoid flashy gradients and instead use neutral tones, subtle accents, and clean layouts.
Design Direction
-> Light theme
-> Neutral color palette
-> Minimal, modern, and professional look
-> Focus on clarity, spacing, and usability
-> UI should never distract from the core experience (chat & calling)
App Flow (Simple & Fast)
-> Splash Screen
-> Welcome Screen
-> Login (Phone / Email / Google)
-> OTP Verification
-> Direct entry to Home (no complex onboarding)
Navigation Structure
-> Bottom navigation (3 tabs only):
-> Home
-> Chat
-> Profile
-> Wallet should be visible on top of Home screen (not as a separate tab)
Core User Journeys
1. Video Calling Flow
-> User selects a profile → views details → initiates audio/video call
-> Pre-call screen shows call rate + wallet balance
-> Active call screen with minimal UI (focus on video)
-> Call ends with summary (duration + coins used)
2. Chat Flow
-> Chat list (recent conversations)
-> One-to-one chat screen
-> Real-time messaging experience
-> Free chat indication (for limited time users)
Screens Required
1. Splash Screen
-> Centered logo
-> Clean light background
2. Welcome Screen
-> Minimal illustration
-> Title + subtitle
-> “Get Started” CTA
3. Login Screen
-> Phone number input (primary)
-> Email login
-> Google login
-> Clean and simple layout
4. OTP Verification
-> OTP input fields
-> Resend timer
-> Verify button
5. Home Screen (Primary Screen)
Top Section:
-> Wallet balance (₹ + coins)
-> Small “Recharge” button
Content Sections:
-> Popular
-> New
-> For You
User Cards:
-> Profile image
-> Name + Age
-> User ID
-> Status (Online / Busy / Offline)
-> Optional: Call rate badge
Actions:
-> Tap → Profile
-> Quick Chat / Call icons
6. Profile Screen
-> Image gallery / slider
-> Name, Age, User ID
-> Bio / short description
Call Info:
-> Call rate
-> Status indicator
Actions:
-> Chat
-> Audio Call
-> Video Call
7. Chat Screen
Chat List:
-> Recent chats
Chat Detail:
-> Message bubbles
-> Input field
UI Indicators:
-> “Free chat for 7 days” banner
-> Prompt when chat limit ends
8. Call Screens
Pre-Call Screen:
-> Profile info
-> Call rate
-> Wallet balance
Active Call Screen:
-> Clean video interface
-> Minimal controls:
-> Mute
-> End call
-> Switch camera
Call End Screen:
-> Duration
-> Coins used
-> Recharge CTA
9. Profile Tab (Settings)
-> User information
Options:
-> Edit profile
-> Support
-> Logout
-> Delete account
Special UX Considerations
-> New users:
-> Free chat (7 days)
-> Free call trial (60 seconds)
-> Wallet visibility:
-> Always accessible from Home
-> Monetization:
-> Call rate clearly visible before call
-> Recharge prompts when needed
Deliverables
-> Complete Figma file (well-structured pages and frames)
-> Component-based design system (buttons, cards, inputs, navigation)
-> Auto-layout used for scalability
-> Style guide including:
-> Colors (neutral palette)
-> Typography
-> Iconography
-> Clickable prototypes for:
-> Video call flow
-> Chat flow
Acceptance Criteria
All screens follow a consistent, clean, and professional visual language
Components and auto-layout are properly structured for easy iteration
Prototype flows are smooth with no broken links
UI remains minimal and distraction-free, focused on communication
Final Goal
Create a sleek, modern interface where:
-> Users can quickly start chatting or calling
-> The experience feels effortless
-> The design supports engagement without feeling cluttered
https://docs.google.com/document/d/12SnmQwVzFOMbTVff6Tjzc8YFx6Kh-ikt-1baBMKCl_k/edit?usp=sharing
I’m looking to design a clean, professional, and distraction-free mobile app UI in Figma for a social video-calling application (Customer App).
The goal is to create a smooth, intuitive user experience where the interface supports communication without overwhelming the user. The design should avoid flashy gradients and instead use neutral tones, subtle accents, and clean layouts.
Design Direction
-> Light theme
-> Neutral color palette
-> Minimal, modern, and professional look
-> Focus on clarity, spacing, and usability
-> UI should never distract from the core experience (chat & calling)
App Flow (Simple & Fast)
-> Splash Screen
-> Welcome Screen
-> Login (Phone / Email / Google)
-> OTP Verification
-> Direct entry to Home (no complex onboarding)
Navigation Structure
-> Bottom navigation (3 tabs only):
-> Home
-> Chat
-> Profile
-> Wallet should be visible on top of Home screen (not as a separate tab)
Core User Journeys
1. Video Calling Flow
-> User selects a profile → views details → initiates audio/video call
-> Pre-call screen shows call rate + wallet balance
-> Active call screen with minimal UI (focus on video)
-> Call ends with summary (duration + coins used)
2. Chat Flow
-> Chat list (recent conversations)
-> One-to-one chat screen
-> Real-time messaging experience
-> Free chat indication (for limited time users)
Screens Required
1. Splash Screen
-> Centered logo
-> Clean light background
2. Welcome Screen
-> Minimal illustration
-> Title + subtitle
-> “Get Started” CTA
3. Login Screen
-> Phone number input (primary)
-> Email login
-> Google login
-> Clean and simple layout
4. OTP Verification
-> OTP input fields
-> Resend timer
-> Verify button
5. Home Screen (Primary Screen)
Top Section:
-> Wallet balance (₹ + coins)
-> Small “Recharge” button
Content Sections:
-> Popular
-> New
-> For You
User Cards:
-> Profile image
-> Name + Age
-> User ID
-> Status (Online / Busy / Offline)
-> Optional: Call rate badge
Actions:
-> Tap → Profile
-> Quick Chat / Call icons
6. Profile Screen
-> Image gallery / slider
-> Name, Age, User ID
-> Bio / short description
Call Info:
-> Call rate
-> Status indicator
Actions:
-> Chat
-> Audio Call
-> Video Call
7. Chat Screen
Chat List:
-> Recent chats
Chat Detail:
-> Message bubbles
-> Input field
UI Indicators:
-> “Free chat for 7 days” banner
-> Prompt when chat limit ends
8. Call Screens
Pre-Call Screen:
-> Profile info
-> Call rate
-> Wallet balance
Active Call Screen:
-> Clean video interface
-> Minimal controls:
-> Mute
-> End call
-> Switch camera
Call End Screen:
-> Duration
-> Coins used
-> Recharge CTA
9. Profile Tab (Settings)
-> User information
Options:
-> Edit profile
-> Support
-> Logout
-> Delete account
Special UX Considerations
-> New users:
-> Free chat (7 days)
-> Free call trial (60 seconds)
-> Wallet visibility:
-> Always accessible from Home
-> Monetization:
-> Call rate clearly visible before call
-> Recharge prompts when needed
Deliverables
-> Complete Figma file (well-structured pages and frames)
-> Component-based design system (buttons, cards, inputs, navigation)
-> Auto-layout used for scalability
-> Style guide including:
-> Colors (neutral palette)
-> Typography
-> Iconography
-> Clickable prototypes for:
-> Video call flow
-> Chat flow
Acceptance Criteria
All screens follow a consistent, clean, and professional visual language
Components and auto-layout are properly structured for easy iteration
Prototype flows are smooth with no broken links
UI remains minimal and distraction-free, focused on communication
Final Goal
Create a sleek, modern interface where:
-> Users can quickly start chatting or calling
-> The experience feels effortless
-> The design supports engagement without feeling cluttered
https://docs.google.com/document/d/12SnmQwVzFOMbTVff6Tjzc8YFx6Kh-ikt-1baBMKCl_k/edit?usp=sharing