Advin
Дизайн интерфейсов производственного маркетплейса.
Спроектировал интерфейс
Мой вклад — дизайн представленных экранов и сценариев.
Задача
Спроектировать понятный интерфейс поиска услуг и работы с заказами.
Экраны отражают мой вклад в проект. Другие части действующего продукта могли быть созданы командой.
Разбор основан на исходных схемах, версиях макетов и UI kit из проекта. Каждый материал можно увеличить. Порядок разделов объясняет связь решений; отдельные этапы интервью и тестирования не приписываются проекту без исходных материалов.
Три роли проходят один заказ разными путями
Заказчик формирует запрос и выбирает предложение. Дизайнер работает с брифом, концепциями и файлами. Исполнитель переводит согласованный макет в производство и доставку. Эти задачи отражены в отдельных схемах и интерфейсах, связанных общим заказом.
Заказчик
Найти услугу → задать параметры → сравнить предложения
Дизайнер
Выбрать бриф → предложить концепцию → передать файлы
Исполнитель
Откликнуться → произвести → подтвердить результат
Сначала — структура разделов и связей
В файле сохранены две карты структуры заказчика: current и new. Они позволяют увидеть, как распределены каталог, заказы, сообщения и профиль, и сравнить версии до просмотра отдельных экранов. Это оригинальные схемы проекта.
Не набор страниц, а связанные сценарии
Схемы фиксируют последовательность действий и развилки для каждой роли. Заказчик проходит создание и сопровождение заказа; дизайнер — выбор брифа и согласование; исполнитель — отклик, производство и завершение. Раскрой каждую схему для подробного просмотра.
Путь заказчика↗
Путь дизайнера↗
Путь исполнителя↗
Сравнение вариантов в исходном файле
Один из вариантов главной находится на отдельной странице файла; итоговая десктопная версия — на странице «Дизайн». Сравнение показывает разные способы распределить каталог, примеры работ и навигацию. Это версии интерфейса, а не заявленный результат A/B-теста.
Дизайн-система целиком, по разделам
В исходном UI kit Advin заданы роли через цвет, шкала Golos Text, варианты кнопок и полей, карточки, бейджи и навигация. Показаны реальные доски и 20 исходных SVG-иконок. Компоненты помогают связать три разных рабочих интерфейса.
Выбери раздел. Нажми на доску, чтобы открыть её в полном размере.
Цвета трёх ролей
Golos Text и шкала текста
Кнопки и состояния
Поля и валидация
Чипы и теги
Бейджи и статусы
Карточки разных сущностей
Навигация
Прогресс, сообщения и состояния
Исходные SVG-иконки / 20 примеров
От выбора услуги до отслеживания заказа
В начале — поиск услуги и параметры изделия. Затем выбор способа подготовки макета, проверка ТЗ и сравнение предложений. После выбора исполнителя появляются переписка и состояния заказа. Одна логика продолжается через все экраны.
Бриф, концепции и передача результата
Дизайнер видит ленту брифов и подробности задачи. Концепции имеют разные состояния согласования, а передача файлов оформлена отдельным этапом с требованиями к комплекту. Это показывает работу над процессом согласования, а не только над лентой заказов.
4 экрана · Нажми на превью для полного просмотра. На телефоне листай в сторону →
Производство тоже имеет интерфейс
Исполнитель отвечает на заказ, ведёт производство, подтверждает результат фотографиями и оформляет доставку. На каждом этапе меняется содержимое, но сохраняются контекст заказа и роль пользователя.
4 экрана · Нажми на превью для полного просмотра. На телефоне листай в сторону →
Те же задачи на большом экране
Десктопные макеты показывают не растянутую мобильную страницу, а другое распределение пространства: постоянная навигация, рабочая область и дополнительные данные. Ниже — главная заказчика, концепции дизайнера и производство исполнителя.
Ответ, отказ, прогресс и завершение
В проекте есть не только успешные экраны: отклонённый отклик, комплект передаваемых файлов, рабочий и завершённый заказ. В UI kit эти различия поддерживаются бейджами, сообщениями, индикаторами и вариантами контролов.
Характер проекта
Что получилось
Мобильные экраны, навигация и сценарии взаимодействия. Мой вклад — дизайн экранов в представленном Figma-файле.