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

По горизонтали охват: кому видна запись, от соседей по дому до всего города. По вертикали привязка к карте: есть ли у записи место и срок
Анимация показывает, из чего состоит метка события на карте. Издалека метка видна точкой, цвет которой говорит о типе: зелёный у вещей и услуг, индиго у находок и пропаж, оранжевый у встреч. Ближе точка становится кружком, и в нём появляется значок типа. У идущей встречи вокруг метки расходится волна. При ещё большем приближении видна подпись с названием, второй строкой «Идёт сейчас» и тегом «моё», который показывает роль человека. У пропажи вокруг выбранной метки появляется круг, где искать, у вещи и услуги пунктирный круг с надписью «примерный адрес»
02.
Три типа событий
На встречу проще решиться, когда видно, кто уже идёт, поэтому отклики на неё видят все участники. Под постами «отдам даром» соседи соревнуются в комментариях за первенство, поэтому отклик на вещь видит только автор. Пропажу ищут вместе, поэтому у неё общий чат поиска
Встречи, вещи и услуги, находки и пропажи — бытовые дела и досуг соседей уложились в три типа событий. Типы отличаются не цветом метки, а правилами: кто видит отклики, где событие стоит на карте, сколько оно живёт и кого оповещают. У находок и пропаж правила разные, поэтому карточек четыре
Из чего состоит метка события на карте и как она меняется при приближении
03.
Создать событие за три шага
Автор выбирает место на карте, потом указывает условия и пишет описание. Пока он заполняет поля, метка будущего события уже стоит на карте и принимает цвет и значок выбранного типа. В итоге получается карточка, где всё нужное собрано на одном экране
Сразу после публикации «Район» предлагает поделиться событием. Людей в сервисе поначалу мало, и соседи чаще узнают о событиях из чатов, чем с карты
Создание события в три шага, от выбора места на карте до предложения поделиться
Анимация показывает один и тот же сценарий «Района» на трёх ширинах экрана. На телефоне шириной 390 px события лежат в шторке снизу: она раскрывается в список, а выбранное событие открывается карточкой. Начиная с 821 px шторка становится колонкой слева, карта остаётся справа. На широком экране от 1440 px список и карточка стоят рядом двумя колонками. Состояния не заменяют друг друга: шторка превращается в панель, соседние панели сдвигаются. Список событий показывает то, что видно на карте, и обновляется, когда карту двигают.
04.
Один набор панелей на все экраны
Список собирается из того, что видно на карте. Карта показывает, где событие и какого оно типа, а список добавляет остальное: что это, когда и у какой станции. Чтобы увидеть больше событий, карту отдаляют, и список растёт вместе с ней. Чтобы сузить выбор, например до одних встреч, включают фильтр рядом с поиском, и он меняет сразу и карту, и список
Панели одни и те же на всех экранах, меняется только их место. Когда в продукте появляется новый экран, его не нужно отдельно продумывать для телефона и ноутбука, он сразу встаёт в ту же шторку или колонку
05.
Онбординг
Состоит из двух экранов: сначала человек знакомится с тремя типами событий и сразу видит их примеры на карте, потом называет своё имя и выбирает станцию рядом с домом. После этого карта открывается у дома, и вокруг уже есть события соседей. Дальше помогают подсказки по месту: они появляются, когда человек впервые до чего-то дошёл
Я отказался от сторис и тура по экранам. Сторис рассказывают о механиках раньше, чем человек их видит, а тур закрывает собой тот самый интерфейс, который объясняет. Подсказок всего три: на карте, в карточке события и при создании. Если подсказку снимает само действие, кнопки «Ок» у неё нет
Два экрана онбординга со знакомством с типами событий и выбором станции у дома
06.
Что вошло в первую версию
Для первой версии я отбирал функции по главному сценарию, когда два соседа находят друг друга и встречаются. Всё, без чего этот сценарий не работает, попало в ядро. То, что делает встречу надёжнее, стало вторым приоритетом. Остальное я отложил или отбросил, и у каждого такого решения есть причина
07.
Как сделано
Прототип я делал кодом вместе с Claude Code, а не в макетах. Карту, клавиатуру, жесты и анимации между состояниями макет не покажет, а работающий прототип показывает. Код и тесты пишет Claude, а решения о продукте и проверка остаются за мной
Открытый репозиторий на GitHub
Хостинг на Яндексе без VPN
Дизайн-система из самого прототипа
Тёмная тема
Контраст по AA
1. Постановка задачи
Ограничения:
браузерный desktop
Аудитория:
администраторы, инженеры и архитекторы сети
Цели бизнеса:
создание бюджетного и масштабируемого сервиса
Цели пользователя:
быстрое выполнение задач внутри сервиса
Проанализировать интерфейс, выделить проблемы, влияющие на скорость и удобство выполнения пользовательских задач.
Предложить улучшения, которые наиболее существенно повлияют на пользовательский опыт и помогут устранить существующие проблемы, описать это влияние.
Анализ интерфейса, поиск проблем
3.
Проблемы: сложно упорядочивать информацию, высокая когнитивная нагрузка на пользователя, расположение элементов на экране плохо организовано для быстрого выполнения задач
  • таблица и параметры находятся на разных страницах
  • фильтрация таблицы крайне ограничена
  • пустые места в стойках Rackspace занимают полезное пространство
  • некоторые действия для компонентов трудно найти
  • информация организована для низкого разрешения, на современных мониторах выглядит пусто
При подготовке к решению задачи изучил существующий интерфейс и пришел к следующим выводам:
Как проверять
1.
На людях прототип ещё не проверяли, поэтому расскажу, что я бы проверял после запуска, чем мерил и как влиял бы на результат. Главное здесь — плотность: сервис полезен только там, где рядом достаточно людей. В небольшом городе тысяча пользователей может дать живую карту, а в Москве, если они разбросаны по десяткам районов, не даст ни одного живого района. Начинать стоит с мест, где соседи и так связаны, например с нового жилого комплекса или небольшого посёлка: активные жители есть там с первого дня, и на них можно проверить весь цикл. Дальше «Район» можно постепенно расширять, а успех мерить числом живых районов, где событий и соседей хватает, чтобы карта не пустовала.
6. Результаты
Довёл продуктовую идею до прототипа, который открывается на любом устройстве. Работа с ИИ не превращает дизайнера в разработчика, но решение теперь можно проверить в работе раньше, чем к нему подключится команда, и самому увидеть, где у технологий ограничения.
Открыть прототип → raion-prototype.website.yandexcloud.net
Дизайн-система → raion-prototype.website.yandexcloud.net/raion-ds.html
Гипотезы
4.
Для достижения целей бизнеса имеет смысл взять OpenSource дизайн-систему, например GravityUI
Основные идеи по улучшению:
  1. Объединить таблицу компонентов с их параметрами в одну страницу
  2. Расширить инструменты фильтрации и сортировки
  3. Добавить режим отображения заполненных ячеек в Rackspace
  4. Вынести стандартные действия с компонентами и параметрами на экран
  5. Адаптировать информацию под любое разрешение экрана
Исходя из найденных проблем в пользовательском опыте, предлагаю сфокусировать влияние на:
сокращение когнитивной нагрузки
ускорение выполнения основных сценариев
легкий поиск информации и действий над ней
Проектирование
5.