ПОРТФОЛИО / STICKERDROID
Droid2026
StickerDroid
8ЭКРАНОВ СЦЕНАРИЯ
4ШАГА ДО СТИКЕРА
StickerDroid

Интерфейс для интерактивного терминала, который делает фото, применяет AI-стилизацию и печатает результат в виде стикера. Особенность задачи — это не мобильный и не десктопный интерфейс, а киоск в публичном пространстве с высоким трафиком (ТЦ, аэропорты), где пользователь взаимодействует с экраном «на ходу», без инструкции.

РОЛЬUX/UI Designer
СРОК4 дня
ИНСТРУМЕНТЫFigma, AI, Variables, Text/Color Styles
StickerDroid
8ЭКРАНОВ СЦЕНАРИЯ
4ШАГА ДО СТИКЕРА
ЭТАП01
Задача и ограничения
Вайрфреймы
UX-логика сценария
UI-дизайн и UI-кит
Разработка AI-фильтров
Отправка и печать стикера
Что получилось в итоге

Задача и ограничения

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

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

Ключевое ограничение, которое определило все дальнейшие решения — разовое взаимодействие в людном месте: рядом очередь, человек торопится, никто не будет читать инструкцию

ЭТАП02
Задача и ограничения
Вайрфреймы
UX-логика сценария
UI-дизайн и UI-кит
Разработка AI-фильтров
Отправка и печать стикера
Что получилось в итоге

Вайрфреймы

Собрала скелет флоу из 8 экранов: заставка, съемка, подтверждение, выбор фильтра, печать, готово — с учетом состояний ожидания и повторного захода.

Уже на этом этапе заложила загрузочный экран-заставку, который реагирует на приближение человека — по принципу, похожему на Face ID: камера считывает, что кто-то подошел, и открывает основной экран. Это решает сразу две задачи — объясняет пользователю, что делает устройство, и привлекает внимание проходящих мимо

FigmaWireframes
ЭТАП03
Задача и ограничения
Вайрфреймы
UX-логика сценария
UI-дизайн и UI-кит
Разработка AI-фильтров
Отправка и печать стикера
Что получилось в итоге

UX-логика сценария

Построила сценарий максимально линейно: сделать фото → выбрать стиль → подтвердить результат → получить результат (печать / отправка). Линейность здесь не ограничение, а осознанное решение — она снижает когнитивную нагрузку и ускоряет прохождение сценария в условиях, где у пользователя нет времени разбираться.

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

ЭТАП04
Задача и ограничения
Вайрфреймы
UX-логика сценария
UI-дизайн и UI-кит
Разработка AI-фильтров
Отправка и печать стикера
Что получилось в итоге

UI-дизайн и UI-кит

Разработала дизайн-систему с нуля под формат киоска: кнопки, карточки фильтров, состояния default/active, элементы управления камерой — чтобы интерфейс оставался консистентным на всех 8 экранах и его было проще передать в разработку.

Темную цветовую схему выбрала по трём причинам: она снижает блики при ярком освещении торгового центра или аэропорта, улучшает восприятие фотографий на экране и создает ощущение технологичного продукта. Акцентный цвет использую строго для выделения ключевых действий, шрифт — нейтральный гротеск (Inter) для читаемости на расстоянии, тексты сокращены до коротких формулировок

ЭТАП05
Задача и ограничения
Вайрфреймы
UX-логика сценария
UI-дизайн и UI-кит
Разработка AI-фильтров
Отправка и печать стикера
Что получилось в итоге

Разработка AI-фильтров

Набор фильтров — не случайный список «для красоты», а два разных сценария использования в одном интерфейсе. «Без фильтров» и «Убрать фон» закрывают утилитарную задачу: чистый однотонный фон нужен, чтобы стикер хорошо смотрелся при печати и вырезке. «Обводка» — промежуточный вариант для тех, кто хочет минимальную обработку, но не готов к сильной стилизации. «Киберпанк», «Аниме», «GTA», «Поп-ап», «3D» — это уже про эмоцию и виральность: такой стикер хочется отправить в чат или сторис, а значит устройство получает бесплатное продвижение через шеринг.

Восемь вариантов — не случайное число. Оно опирается на ту же логику, что и остальной сценарий: пользователь принимает решение за секунды в очереди, а не листает бесконечный каталог стилей. Слишком длинный список фильтров увеличивает время у экрана и создает очередь позади — то есть напрямую противоречит задаче быстрого одноразового взаимодействия. Чтобы не резать выбор совсем, но и не растягивать сценарий, добавила стрелку прокрутки карусели — так на экране одновременно видно 4 карточки, а остальные доступны свайпом, без визуального шума из восьми плиток сразу.

Стилизацию под каждый фильтр сгенерировала на реальном референсном фото через Gemini (NanoBanana) и ChatGPT — это позволило показать в макете правдоподобный результат («вот как будет выглядеть аниме-стикер именно с этим фото»), а не абстрактную иконку стиля. Для презентации концепции инвестору/заказчику это критично: результат стилизации считывается сразу, без необходимости объяснять словами, что имелось в виду под «Поп-ап» или «GTA».

Gemini/NanoBananaChatGPTContent Strategy
ЭТАП06
Задача и ограничения
Вайрфреймы
UX-логика сценария
UI-дизайн и UI-кит
Разработка AI-фильтров
Отправка и печать стикера
Что получилось в итоге

Отправка и печать стикера

Отправку реализовала через QR-код, который открывает ссылку для передачи изображения в Telegram или WhatsApp — без необходимости вводить номер телефона или логиниться на чужом устройстве в очереди.

Во время печати стикера (около 20 секунд) пользователю предлагается отсканировать QR заранее — так время ожидания не тратится впустую. После завершения печати предложение отправить фото повторяется — на случай, если человек не успел или забыл сделать это в первый раз

ЭТАП07
Задача и ограничения
Вайрфреймы
UX-логика сценария
UI-дизайн и UI-кит
Разработка AI-фильтров
Отправка и печать стикера
Что получилось в итоге

Что  получилось  в итоге

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

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

Два момента, которые я бы вынесла на такую проверку в первую очередь:

01
Размер кнопок и элементовУвеличила их сильнее, чем в десктопном интерфейсе, ориентируясь на габариты устройства, но точную эргономику стоит подтвердить на физическом прототипе
02
Поведение затемнения на экране камерыСветлый текст на полупрозрачном фоне должен хорошо читаться, но как это повлияет на восприятие самого фото при разном освещении, лучше увидеть вживую
03

Вернуться на главную страницу?

← назад