Web
Mobile
Chat Page and Calls
Project
Adult AI-chat project
About
The user can choose from a list of ready-made AI models or create their own. A unique, boundary-free service for AI-powered conversations.
Task
Make a mobile and desktop design for chats and calls
Role
Lead Product Designer
Team
3 designers
About Flow
After completing all the prototypes, we moved on to the design phase. We started with mobile layouts and then transitioned to desktop. To keep the case concise, I’ll present both mobile and desktop versions side by side.
Below, you'll find two images displaying all parts of the user flow.
The sections highlighted with a bright border correspond to what’s described on this page.
Mobile Flow
We started the design work with mobile layouts. In this longread, I’ll cover all the sections related to chat functionality, specifically:
Chat list
Detailed chat states
Detailed model profile
Calls
Full Card
Chatting
Calling
Desktop Flow
Full Card
Chatting
Calling
Chat list
Mobile version
The chat list has three main states:
No chats
Several active chats
Search in progress
On the chat list screen, we also accounted for various individual chat states: read, unread, sent messages, and received images. During search, relevant results are highlighted for clarity.
Desktop
In the desktop version of the chat screen, we made sure the persistent sidebar can collapse to save space.
By default, no chat is selected — a conversation only opens when the user clicks on a specific dialog with a model.
Detailed Chat
Mobile version
On the detailed chat screen, the user sees:
Universal Header & In-Chat Navigation
Persistent header with a burger menu for quick access to all sections. Inside the chat, users can return to the chat list, view the model’s name, initiate a call, open the model’s profile, and see a live “typing” status.
Message Features
Each message includes a timestamp, with options to listen to the message or request an AI-generated photo based on it.Photo Presets
Presets above the message input let users instantly generate photos from the model. This encourages coin top-ups, as visual content costs more than text.Smart Reply Tool
The message field includes a “Generate My Answer” feature to boost user engagement and increase coin usage.Progressive Image Rendering
Photos requested from the model are generated gradually — similar to Midjourney — adding anticipation and visual appeal.Seamless Coin Top-Up
When a user tries to send a message without enough coins, no extra alert appears — the top-up screen opens automatically, keeping the flow smooth and interruption-free.
When the user taps the icon next to the play button, the service automatically generates a photo based on the model’s message.
For example, if the model says she had a great time on vacation, the system will visualize what that moment might have looked like.
If the user wants to generate their own response, tapping the “Generate my idea...” button prompts the service to analyze the conversation and present several reply options that best fit the context.
Desktop
The mobile and desktop versions share identical functionality, so to keep the case concise, I’ll simply showcase the key screens without going into detailed breakdowns.
Model Profile
Mobile version
Desktop
Share Alexa
sweetchat.io/model/1353532
or
Calls
Mobile version
Desktop
