MAFIA — Кейс | Савченко Дмитрий

Overview

X-CITY Mafia — веб-сервис для проведения онлайн-игр в мафию. Проект создавался как альтернатива Zoom и существующим mafia-online платформам, которые не давали нужной атмосферы, гибкости и инструментов для организаторов.

Цель — создать интерфейс, который сохраняет дух настольной мафии, упрощает организацию игр и снижает операционные затраты клуба.

Проблема

Существующие решения не подходили для регулярных игр:

игрокам сложно быстро войти в игру и погрузиться в атмосферу
организаторы вручную распределяют роли и управляют процессом
Zoom и аналоги не поддерживают игровые механики и модерацию
высокая стоимость и временные затраты на организацию игр

Моя роль

Product Designer — аудит, исследование, UX-архитектура, UX/UI дизайн, прототипирование, тестирование, hand-off.

Задача

Спроектировать онлайн-версию «Мафии» с интуитивным интерфейсом для игроков, инструментами управления для организаторов и атмосферным UI, отличающимся от решений вроде Zoom, с поддержкой desktop и PWA.

Задизайненый интерфейс Финал, доработали интерфейс на основе фидбека

Первый драфт Первый прототип, отражающий желания заказчика

Решение — ключевые элементы

Интерфейс видеосозвона для игры

Круговая компоновка создаёт эффект «стола», а элементы управления встроены в игровую логику. Интерфейс поддерживает до 12 игроков и ведущего без перегрузки.

Атмосферный UI · Нуар / Арт-Деко

Чтобы было лучше погружение решено было отойти нейтрального Zoom и добавить немного атмосферы и стилизовать элементы интерфейса — тёмная палитра, контрастные акценты и стилизация 30-х годов, усиливающая погружение.

Атмосферный UI — стилистика нуар и арт-деко

Смена фаз игры

День, ночь и ход мафии визуально различаются цветом и состояниями интерфейса, что делает механику интуитивной.

Камеры, роли и индикаторы

Понятные индикаторы ролей, статусов и голосов позволяют быстро считывать ситуацию без лишнего текста.

В интерфейсе предусмотрено два варианта отображения камер. В стандартном режиме рядом с камерой находятся основные действия: проголосовать за игрока, увеличить камеру и настроить громкость. Это позволяет быстро взаимодействовать с участниками без открытия дополнительных меню.

Роли отображаются через иконки и карточки рядом с камерой игрока, что позволяет быстро понять игровую ситуацию и сохранить атмосферу мафии.

Статусы игроков обозначаются цветами: жёлтый — активный игрок, красный — голосование против игрока (подозрение на мафию), чёрный — игрок выбыл или отключён. Цвета помогают быстро считывать ситуацию в игре.

Оформление информации

Ключевые события игры оформлены как газетные заголовки в стиле нуар. Вместо стандартных системных сообщений игроки видят стилизованные «новости ночи», что усиливает атмосферу и делает игровые события эмоционально заметнее.