Web
Mobile
The Main Screens
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 whole app
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 screens and then transitioned to desktop. To keep the case concise, I’ll show both mobile and desktop versions side by side.
Below are two images showing all parts of the flow.
The ones highlighted with a bright border correspond to the sections described on this page.
Mobile Flow
We began the design work with mobile layouts. In this longread, we’ll cover the core sections of the service — they’re highlighted in pink.
Welcome Screen
Authorization
Main Screen (Catalog)
Notifications
404 Page
Sign In / Sign Up
Catalog (Main)
Notifications & 404
Welcome
Desktop Flow
In the desktop flow, the sections covered in this longread are also highlighted for clarity.
Sign In / Sign Up
Catalog (Main)
Notifications & 404
Welcome
Welcome Screen
When a user is not authorized and visits the service for the first time, we ask about their preferences:
Male
Female
Both
While this doesn’t affect anything within the service itself, it increases user engagement by creating the impression that the system is already interacting with them and will adapt to their preferences.
Sign In / Sign Up
Mobile version
We give users some free time to chat with a model without requiring authorization. This allows them to try out the service and get engaged before committing.
After a few messages without logging in, the user is shown an authorization screen — featuring the same model they were just chatting with, now inviting them to join.
Desktop
Main Screen (Catalog)
Mobile version
Regardless of authorization status, the main screen displays a list of models created by both the service and users.
The screen includes:
A primary key visual in the form of a banner
A search bar allowing queries by any parameter
An entry point to filters
A filter panel (sidebar) for refining results
An NSFW toggle
Predefined presets based on model roles or use cases
A burger menu replacing a persistent sidebar for navigation
Desktop
Notification
Mobile version
We implemented system notifications that pop up whenever something important happens within the service.
Desktop
+180 gems
credited to balance
Error
Text error. Very very long txt error.
Few strokes or more.
Info
Text info. Very very long txt info.
Few strokes or more of text info.
Success
Text success. Very very long txt info. Few strokes or more
Warning
Text warning. Very very long txt info. Few strokes or more
404
Mobile version
I believe every web service needs a fun 404 page. Here, we tell the user they didn’t find any ordinary models — but they did run into a LEGO dominatrix 😄
