До / после:

Цели и как были достигнуты

✦ Снизить затраты банка на смс – путём продвижения альтернативных способов подписания.
→ Достигнут стабильно растущий прирост числа подписаний новыми способами

✦ Снизить негативную обратную связь, обусловленную преимущественно проблемами с доставкой оператором связи смс-кодов: так же, за счёт предложения подписать другим способом. Как в момент возникновения проблемы, так и предиктивно
А также за счёт упрощения процесса подключения новых способов
→ По некоторым пунктам обращения практически прекратились

✦ Освежить UI – для того, чтобы реализовать финальную идею, потребовалось получить разрешение руководства на использование кастомных компонентов. По дефолту это запрещено, но путём быстрых коммуникаций удалось получить согласие на идею с геймификацией и кастомным компонентом
→ Выполнено

✦ Убрать место отвала пользователей: для подключения/смены/выбора способа необходимо заходить в настройки. Я предложил вытащить эти возможности в тот шаг клиентского пути, в котором есть наибольшая проходимость
→ Гипотеза подтвердилась: пользователи стали чаще выбирать другие способы, при этом посещаемость настроек практически не изменилась

✦ Быстро ввести изменения на прод
→ Выполнено

✦ ↑ информированность пользователей о различных способах

✦ ↑ использование различных способов

✦ ↑ количество успешных завершений сценариев (конверсия)

✦ Вложенность ↓

✦ Абсолютно обычная и неинтересна модалка в начале

✦ Более смелые версии руководство мотивировало сделать ещё более смелыми

✦ Эскиз стал основой графической идеи

✦ Удалось ускорить разработку благодаря спроектированному универсальному дизайну для десктопа и планшета (компактный и практически идентичный: кроме hover-анимации)

✦ Спроектирована подходящая по стилю и удобная мобильная версия

✦ Спроектирован концепт следующей версии (запланированная под соответствующие изменения механик на фронте). Ещё более, компактная, геймифицированная

✦ Анализ VOC (Voice of Clients) – систематизированная качественная обратная связь. Несёт инсайты о конкретных болях, сгруппированные по темам. Ранжировал по частоте упоминания и вникал в суть проблем для понимания болей

✦ Анализ метрик – количественные данные о действиях юзеров. Выбрал релевантные воронке и дополнительные, косвенно характеризующие привычки пользователей

✦ Анализ воронки – дал представление о ключевых проблемах процесса и идеи его перестроения

✦ Я описал процесс подписания единообразно, разбив его на фазы, присутствующие в каждом способе подписания. Это сделало работу удобнее и прозрачнее благодаря тому,

✦ Сопоставление данных дало важные инсайты о поведении пользователей на каждом этапе воронки. Для болей выдвигались гипотезы решений. Решения оценивались с точки зрения:

• Юридеческой правомерности

• Технической возможности

• Стоимости разработки

• Пользы для бизнеса

• Пользы для юзеров

✦ Для того, чтобы уместить в компактном виджете всю значимую информацию, совместно c UX-редакцией провели множество итераций в поисках удачных формулировок, объединяющих:
• Ракурс подачи фактов с учётом бизнес-целей

• Важные для пользователя нюансы

• Ключевые преимущества

• Достоверность

• Тон голоса

• Краткость

Эта непростая цель была достигнута благодаря очень профессиональной UX-редакции и моим хорошим речевым навыкам, развитым со школьных сочинений и усиленным трудами Максима Ильяхова и его вдохновительницы Норы Галь

✦ Раньше выглядело вот так:

• Ни преимуществ с деталями

• Ни возможности подключить другие

• Утилитарный UI и скучный UX

✦ В таком исполнении ключевая метрика с большим количеством вариантов также красивым способом не могла быть достигнута

✦ Так выглядел виджет при использовании стандартных паттернов дизайн-системы
Руководство дало добро на более решительный редизайн

✦ Я провёл совместную сессию с двумя лидами, и в результате показали руководству такую версию. Нестандартный паттерн, яркий необычный вид

✦ На встрече получили наброски. "Всё круто, но надо переделать" (с)
Сделать компактнее и ещё проще

✦ Пришёл с вот такой концепцией. Повернул, как просили, вынес зону управления и сделал компактно.
Постепенными итерациями удалось выгнать весь воздух и оставить оптимальное количество, благодаря чему удалось сделать одинаковые версии в планшете и десктопе, существенно сэкономив ресурс команды (profit)

✦ Удалось реализовать все требования и собрать единообразный компактный виджет
для планшета и десктопа

✦ В мобильной версии так было сделать нельзя.
Поэтому визуально сохранив единообразие, сделал другую версию

✦ Кнопки всегда в нижней половине экрана для удобной досягаемости пальцами

✦ Приоритезация элементов управления для более удобного расположения на экране

Было / стало в мобильной версии

Скорость сканирования информации увеличена за счёт:

✦ Визуальной группировки абзацев по темам с выделением типографикой

✦ Трансформации текста в иконки для передачи смысла

✦ Начала строк вдоль левого края

Также:

✦ Визуальная преемственность с десктопной версией

✦ Кнопка визуально "держит" макет

✦ Крестик убран, чтобы случайно не прервать по ошибке процесс

✦ Следующей итерацией декстопной версии стала ещё более миниаютюрная

✦ По задумке, пользователи должны будут привык к прошлой версии: что всё важное происходит внутри квадрата

✦ После чего мы смело оставляем один квадрат: всё помещаем туда, и благополучно сохраняем наработки текстов и иллюстраций

✦ В той же логике, ещё компактнее и проще

✦ Размер пейджы в Фигме по этой задаче: краткое описание и ~200 макетов для десктопа и адаптива, соединённые во флоу с аннотациями

✦ Это была одна из самых сложных отдельных задач в моей жизни)))
Первоначальная идея РО по достижению квартальных целей в процессе работы дополнялась новыми вводными, изменялась, разрасталась без возможности сдвинуть сроки, и в итоге разделилась на две, которые пришлось делать в параллель %)

✦ РО пришёл с главной квартальной задачей, и я был уже отлично погружен в продукт, я прочитал условия, мы провели созвон и на следующий день я прислал готовые спагетти mid-fi детализации всех требуемых сценариев + 1 запасной на всякий случай, т.к. уже понимал, что это может потребоваться на встрече с руководством

✦ Вечером получил подтветрдждение своей гипотезы и благодарность за проактивность и список правок с требованием добавления ещё одного сценария)))

✦ В итоге, на протяжении трёх недель я проводил встречи с двумя РО, начальницей управления, начальником департамента, лидами разных уровней, маркетингом, редакцией и дизайн-системой, постоянно внося правки и расширяя количество сценариев

✦ Для контроля работы с метриками, я придумал, как эти сценарии привести к общей структуре, наметив в них три фазы, характерные для каждого сценария. И добавить положительным и отрицательным исходами. И различными состояниями (доступно для подключения, поключено, готово к использованию)

✦ Эта структура и система нейминга позволила синкануть мыслительный процесс различных участников за счёт единого смыслового пространства. Благодаря чему повысилась скорость согласования (вместо встреч достаточно было скрина и коммента в чате, и люди понимали контекст)

✦ Было бесчисленное количество согласований, потому что руководство требовало концепт, дизайн-система концепты запрещала, разрешение надо было получить у лида, лиду изложить контекст и обосновать необходимость

✦ На одном из этапов я решил для ускорения провести брейншторм, куда позволил себе дерзость позвать 2 РО и 2 лидов, включая дизайн-лида всего Альфа-Бизнес, где я был модератором 2 часа, и нам удалось придти к двум графическим идеям, на которых я мог строить все варианты сценариев, не боясь, что РО или лиды забреют решение на одном из этапов

✦ Так я сэкономил время команды и получил благодарность от РО за оригинальность мысли при выборе способа решения задачи

✦ Также, удалось сэкономить время за счёт того, что планшетная версия была почти точной копией десктопной (без ховеров только), что сократило время разработки

✦ Концепт мобильной версии я придумал сам, валидируя об других дизайнеров, ДС и лида

✦ В итоге, решение насчитывает около 200 экранов на 3х устройствах за 3 рабочих недели в очень напряжённых условиях и с бесчисленными встречами

✦ Получившееся решение соответствует всем требованиям:

+ Возможность быстрой разработки без масштабных изменений логики на фронте, только UI

+ Устранение известных болей из обратной связи

+ Достижение целей бизнеса

+ Соблюдение сроков

+ Превращение сложного процесса в ясный и понятный

+ Разработка концепта вне дизайн-системы для большой аудитории пользователей

+ Реализация всех пожеланий руководства относительно UI

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

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

Получившееся решение соответствует всем требованиям:

✦ Возможность быстрой разработки без масштабных изменений логики на фронте, только UI

✦ Устранение известных болей из обратной связи

✦ Достижение целей бизнеса

✦ Соблюдение сроков

✦ Превращение сложного процесса в ясный и понятный

✦ Разработка концепта вне дизайн-системы для большой аудитории пользователей

✦ Реализация всех пожеланий руководства относительно UI

Что можно отметить

✦ Мне удалось этого достичь, благодаря быстрой коммуникации, быстрому внесению правок, умению погружать новых людей быстро в контекст, сообщая им только нужную им инфу на понятном им языке и с точными вопросами, благодаря чему за 1 небольшой диалог получал согласование и мог двигаться дальше, передавая результат всем заинтересованным сторонам

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

✦ Умению отдыхать и не выгорать даже в самые трудные периоды

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

✦ Умение добиваться целей в разговоре с вышестоящими людьми без споров, а за счёт диалога, аргументов и внимательной работе с обратной связью, спокойно и последовательно, что было не раз отмечено руководителями

Апрель 2025

✦ Слева: пример работы с иконками в 1 из 2 созданных стилистически абсолютно разных наборах иконок

✦ Сверху: пример передачи макетов в разработку в виде User Flow для улучшения восприятия

Продукт ценен тем, что позволяет сразу обращать внимание на первостепенное, объективно сравнивать все данные, наглядно приземлять инфу в контекст города и старается дарить позитивные эмоции пользователям, оставаясь экспертным

Ключевые метрики:

✦ Процент автоматически добавляемых материалов (Это скриншоты с камер видеонаблюдения, тексты жалоб, описания ДТП, скрины графиков, скрины резонансных материалов в СМИ и другие)

✦ Время работы над одним предложением (есть возможность выработать норматив и улучшать его благодаря чек-листам, помогающим также быстрее онбордить и подтягивать новичков до уровня опытных)

✦ Процент принятых предложений

✦ Процент предложений, оказавшихся полезными

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

✦ Создал уникальную иконку (не видел в других приложениях), которая символизирует улучшение. Она встречает при входе в приложение и на скринсейвере, живёт на кнопке создания предложения и появляется, когда предложение создано, чтобы усилить удовольствие от выполненной задачи и потом напоминать об этом при встрече (скринсейвер и логин) и при новых начинаниях (создание предложения начинается с кнопки с этим символом). По аналогии с символом для ИИ в интерфейсе, я подумал: "А почему бы не сделать свою иконку для своей функции?". Внутри этого продукта она будет понятна аудитории

✦ Скринсейвер вдохновлён красивыми градиентами московского неба. В основе лежит игра слов, что сотрудники работают над городом, создавая улучшения – эта уникальная перспектива отражена в графической идее

✦ В тёмной теме небо украшает другой яркий гость: северное сияние. Коллеги рано или поздно заметят разницу скринсейверов тёмной и светлой темы и дополнительный повод для обсуждения усилит эмоциональную связь и положительный пользовательский опыт. Люди, которые чувствуют, что о них позаботились, на мой взгляд, с большей вероятностью позаботятся о жителях города)) Считаю, что хорошие интерфейсы нужно делать так))

✦ В правом верхнем углу живёт виджет с временем и датой, образующими силуэт московских высоток или Кремля. В нём скрыт небольшой ребус – как раз будет повод поразглядывать между делом

Следуя UX-закону Фиттса, чем крупнее элемент, тем удобнее наводить курсор. Углы – самые удобные для наведения области экрана, поэтому я выбрал их для вызова меню управления

Можно открыть слева и справа (позже покажу, чем это удобно). Открытая область занимает ровно половину экрана (2 из 4 колонок), чтобы было красиво и ровненько

Можно перемещать слева-направо

✦ Скрыть можно и развёрнутое меню

✦ Зум=колесо+CTRL. Колесо = вертикальный скролл. Колесо+Shift = горизонтальный. ЛКМ (зажатая) = перемещение карты в свободном направлении. ПКМ – меню в месте клика

✦ Интуитивно понятный тактильный принцип позволяет открыть два меню и перетаскивать файлы в папки проектов

Также здесь можно увидеть:

✦ Анимацию наведения на папку (слева) и на карточки с коротким и длинным названиями (справа) и действия с карточками

✦ Представление изображений и видео в списке файлов

✦ Различные элементы управления: (слева) сортировку в дропдауне, быстрый фильтр с одним значением, фильтр с дропдауном, фильтр диапазона дат (выбран). И иконки действий при наведении курсора на карточки (справа): массовый выбор, редактирование, удаление, добавление в папку

✦ Переключение вида представления (карточки-табличный список)

✦ Сводку количества с указанием типа ("Предложения", "Все файлы")

✦ Элементы интерфейса скруглены, и радиусы вписаны один в другой ровненько (подложки, обводки, заливки)

✦ Теньки, микроанимации и необычные элементы добавлены, чтобы было приятнее )

✦ Небольшой отступ от края экрана добавляет красоты и лёгкости, сохраняет контекст и использует карту как дополнительный декоративный элемент (пользуясь уникальным случаем). При этом, я учёл опыт Figma и их UI2, когда большой отступ вызвал волну хейта, потому что отнимал слишком много пространство экрана, не добавляя никакой ценности кроме эстетики. Поэтому я сохранил эстетику и минимизировал использованное пространство

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

✦ Слева-направо функции: плей/пауза, скорость, звук, таймлайн, скриншот, коммент, закрыть

✦ Функции распределены в 2 группы по 3 элемента слева и справа от таймлайна. Причём, функции сгруппированы по смыслу: настройки воспроизведения слева, тайлмайн для наглядности, справа работа и закрытие

✦ Управление горячими клавишами:
V для управления звуком выбран потому, что имеет смысл как в русском (вкл/выкл), так и в английском (volume)
S – скриншот

✦ Есть возможность добавлять комментарии, чтобы сэкономить время коллегам и в будущем в архиве быстрее находить главное

Главный флоу

Пользователь:
→ Открывает карту
→ Выбирает место города, которое требует внимания в первую очередь
→ Собирает материалы
→ Формирует отчёт

ДОстижения

Благодаря тщательному анализу, удалось использовать интервью не только для целевой фичи, но и для других фич: часть инсайтов пригодились + удалось придумать удачные способы сочетать решения болей и запросы аудитории

Трудности

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