UI/UX Design for a mobile application
Budget: ₹5,001 – ₹10,001 INR
App Concept:
We are building a mobile app focused on real‑time voice and video conversations between users and hosts (similar to social talk / random friend apps).
The app will have two types of users: Callers and Hosts.
Callers can directly call any available host without sending a friend request or matching profiles. Calls are made using coins, which callers purchase with real money.
Hosts receive incoming calls and earn coins for the time they spend on calls. These earned coins can be converted into real money and withdrawn directly to the host’s bank account.
We are looking for an experienced UI/UX designer who can design clean, modern, dark‑theme screens only ( no light theme required).
The goal is to create a premium, trust‑focused, youth‑friendly interface that feels smooth, simple, and engaging for long conversations.
⸻
Reference Apps (Concept & Flow)
Please review these apps to understand the exact concept and UX style:
• Vibely : https://play.google.com/store/apps/details?id=in.mohalla.friends&hl=en
• FRND : https://play.google.com/store/apps/details?id=com.dating.for.all&hl=en
These links are for reference only, not for copying designs.
We want a fresh, original UI with a similar flow & functionality.
⸻
App Concept (Simple Explanation – Caller Side)
Callers can browse a list of available hosts
Each host item in the list of hosts displays:
Name and age
Online / offline status
Languages spoken (e.g. HI | EN or others)
Callers can instantly start:
Audio calls
Video calls
No friend requests, matching, or profile approvals are required
A “Find Random Friend” option allows callers to connect instantly with any available host
Calls are charged on a coin-per-minute basis
Coins are purchased using real money
The UI should feel safe, transparent, and easy to understand, especially around pricing and call duration
This app is not a dating app. It is strictly conversation‑first and focused on real-time social interaction.
⸻
App Concept (Simple Explanation – Host Side)
Hosts receive incoming calls from callers
Hosts can choose to:
Accept or reject audio calls
Accept or reject video calls
Each host has a profile that includes:
Name and age
Languages they can speak (e.g. HI | EN or others)
Online / offline availability status
Hosts earn coins based on call duration (coin‑per‑minute model)
Coins earned by hosts can be:
Converted into real money
Withdrawn directly to their bank account
Hosts can toggle their online/offline status at any time
The host dashboard shows:
Current balance
Earnings summary
Call history
The host experience should feel simple, transparent, and trustworthy, with a strong focus on earnings visibility and call control.
This app is not dating‑focused. It is built for real‑time, conversation‑first interactions.
⸻
Design Requirements
• Dark theme ONLY (no light mode)
• Premium, modern, smooth UI
• Minimal clutter, easy to understand
• Strong focus on:
• Trust
• Readability
• Long usage comfort (low eye strain)
• Mobile‑first design (Android priority)
⸻
Screens – Caller + Host (Combined)
1. Splash Screen
2. Login / Signup (Phone Number)
3. OTP Verification
4. Registration (Name, DOB, Gender) (Common)
5. Language Selection (Common)
Caller Side (MVP)
6. Caller Home
7. Host List
8. Audio Call Screen
9. Video Call Screen
10. Wallet / Coins
11. Call History
12. Settings
Host Side (MVP)
13. Profile Setup
14. Host Home / Dashboard
15. Incoming Call Screen
16. Audio Call Screen
17. Video Call Screen
18. Earnings / Wallet
19. Withdrawal Screen
20. Call History
21. Settings
(We will start with core screens first.)
Note: Actual number of screens may be more or less. It depends on designer how they use their creativity.
Tools & Deliverables
Preferred:
• Figma (mandatory)
• Proper component system
• Clean auto‑layout
• Developer‑friendly handoff
Deliverables:
• Figma file
• Style guide (colors, typography)
• Icons & UI components
Who Should Apply
• Proven mobile UI/UX experience
• Experience with chat / social / calling apps is a big plus
• Strong understanding of dark‑theme usability
• Can think from real user psychology, not just visuals
⸻
How to Apply (Important)
Please share.
1. Your best mobile UI work (Figma or live apps)
2. Any chat / social / calling app you have designed before
3. Your approach to dark theme UX
Design a premium dark‑theme voice & video chat app UI, similar in concept to FRND and Vibely, but with an original, clean, modern experience.
⸻⸻
Attachments:
Logo – Shared only for inspiration. This is not the final logo and should be redesigned.
Host-side mockup – This is a ChatGPT-generated image, shared only to communicate our expectations and overall direction. It is not a final mockup or design.
The color codes shared below are derived from the attached mockup image and are provided only as a reference. The designer is free to refine, adjust, or redefine the color palette as needed, while maintaining a dark-theme aesthetic.
FrankLi — MATERIAL THEME (FINAL)
Design Intent
• VS Code Dark mode vibe (dark gray, not black)
• Material 3 compliant
• No pink buttons
• Brand colors = accents only
• Accessibility-safe contrast
⸻
DARK THEME (PRIMARY)
Backgrounds (VS Code–style)
Token Hex Notes
background #1E1E1E VS Code editor bg
surface #252526 Cards, sheets
surfaceVariant #2D2D30 Elevated surfaces
outline #3C3C3C Dividers / borders
No pure black
No gradients in background
⸻
Text (Material roles)
Role Hex
onBackground #E6E6E6
onSurface #E6E6E6
onSurfaceVariant #BDBDBD
disabled #7A7A7A
Readable for long sessions.
⸻
Buttons (Material, NOT pink)
Primary (FilledButton)
Property Hex
container #E6E6E6
onContainer #1E1E1E
pressed #D0D0D0
disabled #3C3C3C
Secondary (OutlinedButton)
Property Hex
border #E6E6E6
text #E6E6E6
bg transparent
⸻
Status Colors
Use Hex
Online #2ECC71
Offline #8A8A8A
Error #CF6679
Warning #F2A365
⸻
LIGHT THEME (MATERIAL)
Backgrounds
Token Hex
background #FFFFFF
surface #F7F7F8
surfaceVariant #EFEFF1
outline #E0E0E0
Text
Role Hex
onBackground #1E1E1E
onSurface #1E1E1E
onSurfaceVariant #5F6368
disabled #9E9E9E
Buttons (Light)
Type Container Text
Primary #1E1E1E #FFFFFF
Secondary transparent #1E1E1E
⸻
BRAND COLORS (ACCENT ONLY)
Never use for body text or default buttons
Token Hex
brandPink #E94B6A
brandPurple #7B5CFF
Use ONLY for:
• Logo
• Small badges
• Active indicators (very subtle)
⸻
TYPOGRAPHY (MATERIAL 3)
Recommended Font
Inter (best)
Fallback: Roboto
⸻
Type Scale (Mobile)
Style Size Weight
Display Small 36 SemiBold
Headline Medium 24 SemiBold
Title Large 20 Medium
Title Medium 16 Medium
Body Large 16 Regular
Body Medium 14 Regular
Label Large 14 Medium
Label Small 12 Medium
Line height: 1.4–1.5×
⸻
AVATAR & ICON ASSETS
Avatars
• Flat illustration
• Neutral colors
• Circular mask
• Background colors (dark theme):
• #3A3D41
• #4A4E54
• #3F4A5A
Icons
• Material Symbols (Outlined)
• Color:
• Active: #E6E6E6
• Inactive: #9A9A9A
⸻
MATERIAL THEME BUILDER SETUP (FIGMA)
Create these styles:
Color / Dark / Background
Color / Dark / Surface
Color / Dark / PrimaryButton
Color / Dark / TextPrimary
Color / Light / Background
Color / Light / Surface
Color / Light / PrimaryButton
Color / Light / TextPrimary
This prevents accidental black/pink misuse.
⸻
FINAL LOCKED RULES
• Background = dark gray, not black
• Buttons = black/white only
• Pink/Purple = branding accents(designer may change branding color)
• Typography = Material scale
• Layout unchanged
⸻⸻
Note: The references shared are only for inspiration and quick mockups, so you can clearly understand our expectations. These are not final designs. If they were final, we would have directly handed them over to our developer. Please use your own creativity, experience, and design judgment to create the final UI/UX.
We are building a mobile app focused on real‑time voice and video conversations between users and hosts (similar to social talk / random friend apps).
The app will have two types of users: Callers and Hosts.
Callers can directly call any available host without sending a friend request or matching profiles. Calls are made using coins, which callers purchase with real money.
Hosts receive incoming calls and earn coins for the time they spend on calls. These earned coins can be converted into real money and withdrawn directly to the host’s bank account.
We are looking for an experienced UI/UX designer who can design clean, modern, dark‑theme screens only ( no light theme required).
The goal is to create a premium, trust‑focused, youth‑friendly interface that feels smooth, simple, and engaging for long conversations.
⸻
Reference Apps (Concept & Flow)
Please review these apps to understand the exact concept and UX style:
• Vibely : https://play.google.com/store/apps/details?id=in.mohalla.friends&hl=en
• FRND : https://play.google.com/store/apps/details?id=com.dating.for.all&hl=en
These links are for reference only, not for copying designs.
We want a fresh, original UI with a similar flow & functionality.
⸻
App Concept (Simple Explanation – Caller Side)
Callers can browse a list of available hosts
Each host item in the list of hosts displays:
Name and age
Online / offline status
Languages spoken (e.g. HI | EN or others)
Callers can instantly start:
Audio calls
Video calls
No friend requests, matching, or profile approvals are required
A “Find Random Friend” option allows callers to connect instantly with any available host
Calls are charged on a coin-per-minute basis
Coins are purchased using real money
The UI should feel safe, transparent, and easy to understand, especially around pricing and call duration
This app is not a dating app. It is strictly conversation‑first and focused on real-time social interaction.
⸻
App Concept (Simple Explanation – Host Side)
Hosts receive incoming calls from callers
Hosts can choose to:
Accept or reject audio calls
Accept or reject video calls
Each host has a profile that includes:
Name and age
Languages they can speak (e.g. HI | EN or others)
Online / offline availability status
Hosts earn coins based on call duration (coin‑per‑minute model)
Coins earned by hosts can be:
Converted into real money
Withdrawn directly to their bank account
Hosts can toggle their online/offline status at any time
The host dashboard shows:
Current balance
Earnings summary
Call history
The host experience should feel simple, transparent, and trustworthy, with a strong focus on earnings visibility and call control.
This app is not dating‑focused. It is built for real‑time, conversation‑first interactions.
⸻
Design Requirements
• Dark theme ONLY (no light mode)
• Premium, modern, smooth UI
• Minimal clutter, easy to understand
• Strong focus on:
• Trust
• Readability
• Long usage comfort (low eye strain)
• Mobile‑first design (Android priority)
⸻
Screens – Caller + Host (Combined)
1. Splash Screen
2. Login / Signup (Phone Number)
3. OTP Verification
4. Registration (Name, DOB, Gender) (Common)
5. Language Selection (Common)
Caller Side (MVP)
6. Caller Home
7. Host List
8. Audio Call Screen
9. Video Call Screen
10. Wallet / Coins
11. Call History
12. Settings
Host Side (MVP)
13. Profile Setup
14. Host Home / Dashboard
15. Incoming Call Screen
16. Audio Call Screen
17. Video Call Screen
18. Earnings / Wallet
19. Withdrawal Screen
20. Call History
21. Settings
(We will start with core screens first.)
Note: Actual number of screens may be more or less. It depends on designer how they use their creativity.
Tools & Deliverables
Preferred:
• Figma (mandatory)
• Proper component system
• Clean auto‑layout
• Developer‑friendly handoff
Deliverables:
• Figma file
• Style guide (colors, typography)
• Icons & UI components
Who Should Apply
• Proven mobile UI/UX experience
• Experience with chat / social / calling apps is a big plus
• Strong understanding of dark‑theme usability
• Can think from real user psychology, not just visuals
⸻
How to Apply (Important)
Please share.
1. Your best mobile UI work (Figma or live apps)
2. Any chat / social / calling app you have designed before
3. Your approach to dark theme UX
Design a premium dark‑theme voice & video chat app UI, similar in concept to FRND and Vibely, but with an original, clean, modern experience.
⸻⸻
Attachments:
Logo – Shared only for inspiration. This is not the final logo and should be redesigned.
Host-side mockup – This is a ChatGPT-generated image, shared only to communicate our expectations and overall direction. It is not a final mockup or design.
The color codes shared below are derived from the attached mockup image and are provided only as a reference. The designer is free to refine, adjust, or redefine the color palette as needed, while maintaining a dark-theme aesthetic.
FrankLi — MATERIAL THEME (FINAL)
Design Intent
• VS Code Dark mode vibe (dark gray, not black)
• Material 3 compliant
• No pink buttons
• Brand colors = accents only
• Accessibility-safe contrast
⸻
DARK THEME (PRIMARY)
Backgrounds (VS Code–style)
Token Hex Notes
background #1E1E1E VS Code editor bg
surface #252526 Cards, sheets
surfaceVariant #2D2D30 Elevated surfaces
outline #3C3C3C Dividers / borders
No pure black
No gradients in background
⸻
Text (Material roles)
Role Hex
onBackground #E6E6E6
onSurface #E6E6E6
onSurfaceVariant #BDBDBD
disabled #7A7A7A
Readable for long sessions.
⸻
Buttons (Material, NOT pink)
Primary (FilledButton)
Property Hex
container #E6E6E6
onContainer #1E1E1E
pressed #D0D0D0
disabled #3C3C3C
Secondary (OutlinedButton)
Property Hex
border #E6E6E6
text #E6E6E6
bg transparent
⸻
Status Colors
Use Hex
Online #2ECC71
Offline #8A8A8A
Error #CF6679
Warning #F2A365
⸻
LIGHT THEME (MATERIAL)
Backgrounds
Token Hex
background #FFFFFF
surface #F7F7F8
surfaceVariant #EFEFF1
outline #E0E0E0
Text
Role Hex
onBackground #1E1E1E
onSurface #1E1E1E
onSurfaceVariant #5F6368
disabled #9E9E9E
Buttons (Light)
Type Container Text
Primary #1E1E1E #FFFFFF
Secondary transparent #1E1E1E
⸻
BRAND COLORS (ACCENT ONLY)
Never use for body text or default buttons
Token Hex
brandPink #E94B6A
brandPurple #7B5CFF
Use ONLY for:
• Logo
• Small badges
• Active indicators (very subtle)
⸻
TYPOGRAPHY (MATERIAL 3)
Recommended Font
Inter (best)
Fallback: Roboto
⸻
Type Scale (Mobile)
Style Size Weight
Display Small 36 SemiBold
Headline Medium 24 SemiBold
Title Large 20 Medium
Title Medium 16 Medium
Body Large 16 Regular
Body Medium 14 Regular
Label Large 14 Medium
Label Small 12 Medium
Line height: 1.4–1.5×
⸻
AVATAR & ICON ASSETS
Avatars
• Flat illustration
• Neutral colors
• Circular mask
• Background colors (dark theme):
• #3A3D41
• #4A4E54
• #3F4A5A
Icons
• Material Symbols (Outlined)
• Color:
• Active: #E6E6E6
• Inactive: #9A9A9A
⸻
MATERIAL THEME BUILDER SETUP (FIGMA)
Create these styles:
Color / Dark / Background
Color / Dark / Surface
Color / Dark / PrimaryButton
Color / Dark / TextPrimary
Color / Light / Background
Color / Light / Surface
Color / Light / PrimaryButton
Color / Light / TextPrimary
This prevents accidental black/pink misuse.
⸻
FINAL LOCKED RULES
• Background = dark gray, not black
• Buttons = black/white only
• Pink/Purple = branding accents(designer may change branding color)
• Typography = Material scale
• Layout unchanged
⸻⸻
Note: The references shared are only for inspiration and quick mockups, so you can clearly understand our expectations. These are not final designs. If they were final, we would have directly handed them over to our developer. Please use your own creativity, experience, and design judgment to create the final UI/UX.