Сервис, где соседи находят друг друга на карте. Спроектировал его с помощью ИИ и довёл до рабочего прототипа, который можно попробовать справа. Для этого нажмите «Познакомиться»
Приложение «Район»
Платформа: веб
телефон и десктоп, iOS и Android
Срок: 7 недель
около 90 версий прототипа
Роль: продуктовый дизайнер
сценарии, интерфейс, прототипирование с микроанимациями, дизайн-система, адаптив и проверка на устройствах
В его основе — карта, на которой соседи видят вещи, пропажи, встречи, и чат, где можно договориться. С помощью ИИ спроектировал концепцию сервиса — от сценариев до прототипа, работающего на телефоне и на компьютере
Приложение «Район»
Платформа: веб
телефон и десктоп, iOS и Android
Срок: 7 недель
около 90 версий прототипа
Роль: продуктовый дизайнер
сценарии, интерфейс, прототипирование с микроанимациями, дизайн-система, адаптив и проверка на устройствах
01.
Какую задачу решает «Район»
Помогает людям, живущим рядом, закрывать бытовые потребности: отдать ненужное, получить помощь, рассказать о пропаже, найти досуг. С повседневными заботами соседи могут помочь друг другу. Территориальная близость экономит время, ведь всё происходит в паре кварталов от дома, а заодно появляются полезные знакомства
Сейчас подобные потребности закрывают в домовых чатах и пабликах района. Однако сообщения оттуда быстро тонут в ленте, они не привязаны к карте и их видит ограниченное число людей. «Район» поможет это исправить
Сервисы для соседских дел по охвату и привязке к карте

По горизонтали охват: кому видна запись, от соседей по дому до всего города. По вертикали привязка к карте: есть ли у записи место и срок
Анимация показывает, из чего состоит метка события на карте. Издалека метка видна точкой, цвет которой говорит о типе: зелёный у вещей и услуг, индиго у находок и пропаж, оранжевый у встреч. Ближе точка становится кружком, и в нём появляется значок типа. У идущей встречи вокруг метки расходится волна. При ещё большем приближении видна подпись с названием, второй строкой «Идёт сейчас» и тегом «моё», который показывает роль человека. У пропажи вокруг выбранной метки появляется круг, где искать, у вещи и услуги пунктирный круг с надписью «примерный адрес»
02.
Три типа событий
На встречу проще решиться, когда видно, кто уже идёт, поэтому отклики на неё видят все участники. Под постами «отдам даром» соседи соревнуются в комментариях за первенство, поэтому отклик на вещь видит только автор. Пропажу ищут вместе, поэтому у неё общий чат поиска
Встречи, вещи и услуги, находки и пропажи — бытовые дела и досуг соседей уложились в три типа событий. Типы отличаются не цветом метки, а правилами: кто видит отклики, где событие стоит на карте, сколько оно живёт и кого оповещают. У находок и пропаж правила разные, поэтому карточек четыре
Из чего состоит метка события на карте и как она меняется при приближении
03.
Создать событие за три шага
Автор выбирает место на карте, потом указывает условия и пишет описание. Пока он заполняет поля, метка будущего события уже стоит на карте и принимает цвет и значок выбранного типа. В итоге получается карточка, где всё нужное собрано на одном экране
Сразу после публикации «Район» предлагает поделиться событием. Людей в сервисе поначалу мало, и соседи чаще узнают о событиях из чатов, чем с карты
Создание события в три шага, от выбора места на карте до предложения поделиться
Анимация показывает один и тот же сценарий «Района» на трёх ширинах экрана. На телефоне шириной 390 px события лежат в шторке снизу: она раскрывается в список, а выбранное событие открывается карточкой. Начиная с 821 px шторка становится колонкой слева, карта остаётся справа. На широком экране от 1440 px список и карточка стоят рядом двумя колонками. Состояния не заменяют друг друга: шторка превращается в панель, соседние панели сдвигаются. Список событий показывает то, что видно на карте, и обновляется, когда карту двигают.
04.
Один набор панелей на все экраны
Список собирается из того, что видно на карте. Карта показывает, где событие и какого оно типа, а список добавляет остальное: что это, когда и у какой станции. Чтобы увидеть больше событий, карту отдаляют, и список растёт вместе с ней. Чтобы сузить выбор, например до одних встреч, включают фильтр рядом с поиском, и он меняет сразу и карту, и список
Панели одни и те же на всех экранах, меняется только их место. Когда в продукте появляется новый экран, его не нужно отдельно продумывать для телефона и ноутбука, он сразу встаёт в ту же шторку или колонку
05.
Онбординг
Состоит из двух экранов: сначала человек знакомится с тремя типами событий и сразу видит их примеры на карте, потом называет своё имя и выбирает станцию рядом с домом. После этого карта открывается у дома, и вокруг уже есть события соседей. Дальше помогают подсказки по месту: они появляются, когда человек впервые до чего-то дошёл
Я отказался от сторис и тура по экранам. Сторис рассказывают о механиках раньше, чем человек их видит, а тур закрывает собой тот самый интерфейс, который объясняет. Подсказок всего три: на карте, в карточке события и при создании. Если подсказку снимает само действие, кнопки «Ок» у неё нет
Два экрана онбординга со знакомством с типами событий и выбором станции у дома
06.
Что вошло в первую версию
Для первой версии я отбирал функции по главному сценарию, когда два соседа находят друг друга и встречаются. Всё, без чего этот сценарий не работает, попало в ядро. То, что делает встречу надёжнее, стало вторым приоритетом. Остальное я отложил или отбросил, и у каждого такого решения есть причина
07.
Как это сделано
Прототип я делал кодом вместе с Claude Code, а не в макетах. Карту, клавиатуру, жесты и анимации между состояниями макет не покажет, а работающий прототип показывает. Код и тесты пишет Claude, а решения о продукте и проверка остаются за мной
Живое демо
Демо-данные считаются от текущего момента, поэтому прототип не стареет, и «завтра» в нём всегда завтра
Скорость
Пока грузится карта, человек видит заставку, а фотографии тем временем подгружаются. Пустых экранов при загрузке нет
Мобильный браузер
Интерфейс учитывает клавиатуру телефона и привычные жесты, например системное «Назад» и сворачивание шторки свайпом
Открытая карта
Карта собрана на MapLibre и открытых данных OpenFreeMap, а стиль подложки свой. Цвет на ней есть только у воды и зелени, и он бледнее цветов меток, чтобы самыми яркими на карте оставались события
В цифрах
7 недель · около 90 версий · 24 правила продукта
Процесс с ИИ
Каждая версия проходит один круг. Я описываю, что поменять, Claude вносит правки точечно или целым списком, я проверяю их на телефонах и компьютере, и новая версия выкладывается по живой ссылке. Договорённости о продукте записаны в правила, чтобы не терялись от правки к правке
Открытый репозиторий на GitHub
Хостинг на Яндексе без VPN
Дизайн-система из самого прототипа
Тёмная тема
Контраст по AA
Режим без анимаций
Как приложение на телефоне
08.
Как проверять
На людях прототип ещё не проверяли, поэтому расскажу, что я бы проверял после запуска, чем мерил и как влиял бы на результат. Главное здесь — плотность: сервис полезен только там, где рядом достаточно людей. В небольшом городе тысяча пользователей может дать живую карту, а в Москве, если они разбросаны по десяткам районов, не даст ни одного живого района. Начинать стоит с мест, где соседи и так связаны, например с нового жилого комплекса или небольшого посёлка: активные жители есть там с первого дня, и на них можно проверить весь цикл. Дальше «Район» можно постепенно расширять, а успех мерить числом живых районов, где событий и соседей хватает, чтобы карта не пустовала
09.
Результат
Довёл продуктовую идею до прототипа, который открывается на любом устройстве. Работа с ИИ не превращает дизайнера в разработчика, но решение теперь можно проверить в работе раньше, чем к нему подключится команда, и самому увидеть, где у технологий ограничения. На схеме все экраны прототипа и переходы между ними