Сообщество

Оживил статичный городской ресурс

Спроектировал платформу историй Москвы и вывел её в прод: stories.mos.ru

За два года в городе закрылись лайфстайл-медиа, и вовлекать жителей стало нечем. Собрал продукт с пользовательским контентом и модерацией: с нуля до MVP за девять месяцев. Первые три месяца — 169,4 тыс. просмотров, Bounce 26,25%, CSI 78,9%.

Product/UX-дизайн
IA
Дизайн-система
Прототип
Вывод MVP

Город терял площадку для голоса жителей

За два года закрылись многие лайфстайл и городские медиа. В инфополе остались политика и экономика. У Москвы не осталось места, где житель не просто читает, а участвует: делится историей, комментирует, спорит.

Я взял задачу не «нарисовать сайт», а поднять вовлечённость. Сложность в том, что контент идёт из двух источников сразу, от редакции и от пользователей, и всё это проходит модерацию.

Что делал я и с кем договаривался

Мой вклад

Исследование и архитектура: разобрал несколько сервисов-конкурентов, собрал портрет пользователя, выстроил структуру разделов и логику поведения.

UX/UI и прототип всей платформы.

Дизайн-система с нуля: типографика, цвет, компоненты.

Довёл продукт до MVP и вывода в прод.

Работа с командой

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

Редакция и модерация: спроектировал один поток публикации на два источника — материалы редакции и истории жителей идут через общую очередь модерации со статусами и причинами отклонения. Этот контур позже вырос в отдельный кейс «Кабинет модератора».

Разработка: дизайн-система с состояниями компонентов появилась отдельно от уже применяемой в Mos.ru дизайн-системы. Макеты сдавал поэтапно под релизы, а дорогие идеи вроде мультитач-поиска и подкастов честно уехали в бэклог развития — поэтому MVP вышел за более короткий срок.

Доска исследования: цели, конкуренты, справочная информация, эвристический анализ и фидбек

Доска исследования: цели, конкуренты, эвристика, фидбек.

Ключевые решения и почему они сработали

3.1Единая логика действий

Что нашёл: У конкурентов подписка и отписка живут на разных экранах, и пользователь путается.
Что сделал: Свёл действие в один предсказуемый паттерн по всей платформе.
Эффект: Меньше ошибок при вовлечении: на юзабилити-прогонах подписку и отписку выполняли с первого раза девять участников из десяти.

Таблица сравнения функций пяти конкурентов: посты, уведомления, комментарии, подписка — Несколько главных конкурентов, одиннадцать функций. Зелёные галочки показали, что для людей база, а красным — где у рынка точки для роста.

3.2Ставка на посты и комментарии

Что нашёл: Возможность написать пост и обсудить его в комментариях — базовый драйвер взаимодействия в таких сервисах.
Что сделал: Сделал это ядром интерфейса, а не второстепенной функцией.
Эффект: Первые истории жителей пришли уже в 1-ю неделю запуска; за три месяца модерацию прошли 250+ пользовательских историй, под материалами — около трёх тысяч комментариев.

Профиль пользователя с формой «Расскажите свою историю» — Форма «Расскажите свою историю»: заголовок, текст, до десяти изображений — и история уходит на модерацию.

3.3Забота о старшей аудитории (24–35 и 55+)

Что нашёл: Часть людей плохо справляется со сложными фильтрами и перегруженным интерфейсом.
Что сделал: Минимализм, подсказки и поп-апы, простой язык, привычные жесты.
Эффект: Удержал внимание обеих возрастных групп: в опросе удовлетворённости (CSI 78,9%) старшая аудитория оценила простоту навигации не ниже молодой.

User persona: Олег, 30 лет — боли, потребности, активность в соцсетях — Олег, 30 лет: устал от инфошума, хочет навигацию попроще. Таких, как Олег, в исследовании оказалось большинство.

3.4Дизайн-система под текстовый городской продукт

Golos Text сделан для экранов: читается в мелком кегле, спокойная контрастность не утомляет на длинных текстах, воспринимается нейтрально и уместно для госпроекта.
Чёрный даёт доверие и меньше нагружает на длинных лонгридах.
Акцентный нежный розовый (#FFECF9) добавляет лёгкости и ощущение заботы.

ЭффектСпокойный и консистентный интерфейс, в котором комфортно долго читать. Отсюда низкий Bounce и высокий CSI.

Типографическая шкала Golos Text: заголовки и параграфы для десктопа и мобильных — Типографическая шкала под лонгриды: от hero-заголовка до подписей.

Палитра дизайн-системы: оттенки чёрного, серые состояния и розовый акцент #FFECF9 — Палитра: спокойный чёрный, рабочие серые и один розовый акцент.

Первые три месяца после MVP

169,4 тыс. Просмотров С нуля, для нового городского продукта.

26,25% Bounce Rate Низкий: люди остаются и читают.

78,9% CSI Пользователи довольны.

24–35 и 55+ Аудитория Попал в обе целевые группы.

Время на сайте: в среднем 3 мин 20 с на визит — за сессию читают один-два материала целиком, а не пролистывают заголовки.

Вовлечённость: 250+ историй жителей и ~3 тыс. комментариев за три месяца; примерно каждый четвёртый читатель возвращается в течение недели — под цель «не просто читает, а участвует».

Показатели не критичные, есть ещё куда расти и улучшать сервис.

Это планы, а не результат, поэтому коротко

Концепт раздела подкастов: сетка обложек с кнопками «Слушать»

Подкасты

Другой способ потреблять контент, в дороге или за делами. Голос добавляет эмоции, а расшифровки дают трафик из поиска.

Концепт поиска со связями: граф статей вокруг запроса «Таганка»

Поиск со связями

Житель ищет «ремонт дорог» и видит не только новости, но и обсуждения соседей, планы администрации и инструкцию, как подать заявку.

Концепт профиля: карма, рейтинг, подписки, группы и события

Профиль с геймификацией

Активность, бейджи, рейтинги. Даёт ощущение своего места на сайте и возвращает людей чаще.

Система наград: бейджи «Перфекционист», «Мастер пера», «Душа компании» и другие

Система наград: от «Перфекциониста» за оформление профиля до «Гуру контента» за десять историй.