Web
Mobile
Страница чата и звонки
Проект
Adult AI-chat project
О компании
Пользователь выбирает модель из списка уже готовых или создаёт собственную. Уникальный сервис для AI-общения
совершенно без границ.
Задача
Сделать Мобильный и Десктопный дизайн для чатов и звонков
Роль на проекте
Lead Product Designer
Команда
3 дизайнера
Про флоу
После того, как были завершены все прототипы, мы перешли к этапу дизайна. Стартовали с мобилок и затем перешли к десктопам. Чтобы не затягивать кейс,
буду показывать мобилки и десктопы сразу.
Ниже разместил 2 картинки, в которых отображены все кусочки флоу.
В яркой рамке будут те, которые описаны в текущей страницы
Мобильный флоу
Работу по дизайну начинали с мобилок. В этом лонгриде расскажу про все разделы, которые связаны с чатом, а именно:
Список чатов;
Детальное состояние чатов;
Детальная карточка модели
Звонки
Full Card
Chatting
Calling
Десктопный флоу
На десктопном флоу также отмечены куски флоу, которые будут в этом лонгриде
Full Card
Chatting
Calling
Chat list
Мобильная версия
В списке чатов глобально есть 3 состояния:
Чатов нет
Есть несколько чатов
Процесс поиска
На экране списка чатов предусмотрели разные состояния конкретного чата. Прочитанные, непрочитанные, отправленные, полученные изображения.
Во время поиска, релевантные результаты подсвечиваются
Десктоп
В десктопной версии на экране чатов мы предусмотрели, что сквозной сайдбар будет сворачиваться с целью экономии пространства.
Также, по умолчанию никакой чат выбран не будет, только если пользователь захочет нажать на конкретный диалог с моделью.
Detailed Chat
Мобильная версия
На детальном экране чата, пользователь видит:
Сквозной header с burger menu, чтобы пользователь мог быстро
перейти в любой раздел
Навигация внутри раздела “чаты”, где есть возможность вернуться к списку, а также отображается имя, кнопка звонка и точка входа в профиль модели.
Также, в этом разделе показывается статус “typing”, когда собеседеник печатает
что-либо в ответ пользователю/
В каждом сообщении есть есть время отправки, а также возможность прослушать это сообщение или попросить сгенерировать фотографию на основе этого запроса
Над полем ввода сообщения расположены пресеты, с помощью которых
можно быстро сгенерировать любое фото от модели. Пресеты позволят увеличить пополнение монеток, потому что действия с фотографиями стоят дороже, чем обычное сообщение
Внутри поля ввода также расположена дополнительная функция “generate
my answer”, что также потенциально должно повлиять на вовлечённость пользователя в диалог, а также на количество монеток, которые он будет тратить.
Каждая фотография, запрошенная от модели, генерируется постепенно. Примерно так, как это реализовано в Миджорни.
Пользователь не получает дополнительного уведомления, когда его монеты закончились. Вместо этого, в момент отправки сообщения, если на счету недостаоточно средств, сразу открывается “пополнялка”
Когда пользователь нажимает на иконку рядом с кнопкой плей, то сервис
автоматически генерирует фотографию на основе сообщения от модели.
Например, модель говорит о том, как классно провела время на отдыхе и система покажет, как это выглядело.
Если пользователь захочет сгенерировать свой ответ, то после нажатия на кнопку “Generate my idea..”, сервис проанализирует диалог и пользователь увидит перед собой несколько вариантов ответа, которые наиболее точно подойдут под контекст.
Десктоп
Функции мобильной и декстопной версии абсолютно идентичны, поэтому не буду удлинять кейс деталями, а просто покажу основные экраны.
Model Profile
Мобильная версия
Этот раздел совсем небольшой и представляет собой лишь 2 экрана:
Описание модели, где расположились её основные интересы и описание;
Возможность поделиться профилем.
Десктоп
Share Alexa
sweetchat.io/model/1353532
or
Calls
Мобильная версия
У сервиса есть киллер-фича. Можно позвонить модели и провести милую беседу.
Мы даём пользователю совершить звонок, даже если недостаточно средств. Модель отвечает, говорит “Hello” и в этот момент всплывает пополнялка баланса.
В остальном это классическая звонилка с возможностью выключать микрофон, включать громкую связь и сбрасывать звонок.
Проведена полная имитация звонка и проработаны все состояния.
Calling, please wait
Connecting
Длительность звонка
Десктоп
Этих экранов должно быть достаточно, чтобы понять основной принцип работы чатов и звонков
