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

На проекте

1. Собрал схему связи сервисов между собой и согласовал её с аналитиками.
2. Продумал навигационную модель интерфейса, взяв за основу линейно-параллельную навигацию каталога.
3. Вместе с Backend-разработчиком унифицировали визуальное отображение окна, чем упростили создание его вариаций в админке и ускорили отрисовку моделей в приложении.
4. Инициировал внедрение брендированных иллюстраций, чтобы усилить визуальную идентичность продукта и упростить передачу состояний интерфейса.
5. Обсуждал реализацию интерфейса с разработчиками и находил альтернативу спорным решениям.

Клиент

VEKA Rus — дочерняя компания концерна VEKA AG — мирового лидера в производстве оконных конструкций с годовым оборотом 1,5 млрд. €.

Задача

Бизнес решил объединить приложения «Каталог VEKA», «Замерщик окон 2.0», «VEKA Конфигуратор AR», «VEKA Калькулятор» и административную панель в единый сервис. Это должно сократить время создания, обработки и выполнения заявок от клиентов.

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

Решение

Спроектировал интерфейс с бесшовной навигацией и двусторонней связью между каталогом, калькулятором и формой заявки.

Калькулятор как самостоятельный раздел приложения

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

Поля ввода
В горизонтальной ориентации клавиатура занимает половину экрана, поэтому поля ввода планировал открывать в модально-диалоговом окне, чтобы не прокручивать форму:

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

Модальное окно
Расположил модальное окно с выбором ламинации в правой части экрана, чтобы палец после нажатия на поле мог сразу взаимодействовать с ним без дополнительного движения к центру экрана:

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

Оптимизировали визуальное отображение окна
Раньше дизайнер под каждую комбинацию створок рисовал отдельную 3D-модель, а админ вручную назначал нужную картинку для каждого набора условий.

Проблемы:

1. Тяжёлые картинки долго рендерились.
2. Нагружалось хранилище сервера.
3. Админ мог ошибиться при выборе нужной картинки из множества вариантов.

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

Основы конструкций:

Створки:

Красивые модели окон остались в каталоге. В калькуляторе важнее быстро различать конструкцию окна, поэтому визуально упростил модели.

Вместо сотни картинок получился конструктор из лёгких джепегов которые быстро рендерятся в приложении.

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

А ещё лучше — подумал, как превратить калькулятор в интерактивный лендинг, который совмещает рассказ о продукте с его настройкой.

Связь созданного окна в калькуляторе с формой заявки

Шаг 1 — контактные данные
После нажатия на кнопку «Рассчитать стоимость» открывается форма заявки. Если пользователь авторизован, контактные данные заполняются автоматически:

Шаг 2 — окна для расчёта
Отображается окно, которое пользователь только что создал в калькуляторе. Можно скорректировать размеры, профиль и цвет фурнитуры, добавить москитные сетки и монтаж:

Шаг 3 — уточнения

Брендированные иллюстрации
На страницах брендбука нашёл форменные «наряды» сотрудников. Появилась идея создать иллюстрации, которые передают ценности бренда, усиливают идентичность продукта и помогают объяснять состояния системы на человеческом языке.

Подготовил презентацию для клиента о том, зачем бренду и интерфейсу нужны иллюстрации, и отрисовал концепты:

Составил задание, а иллюстратор превратила концепты в готовые к релизу иллюстрации:

Иллюстратор спросила, делать персонажей в полный рост или по пояс. Я выбрал второе, потому что действие на иллюстрациях происходит в верхней части тела. Смысловая часть увеличилась в размере и стала быстрее распознаваться:

С каждой страницы продукта в каталоге можно перейти в калькулятор с предзаполненными параметрами окна

Например, профилем и его ламинацией:

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

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

Или перескочить в другой раздел каталога. Например, выбрать дверь после просмотра окон:

С каждой страницы продукта в каталоге можно оформить заявку на расчёт стоимости и изготовление

На втором шаге заявки можно выбрать окна для расчёта, которые были созданы в калькуляторе:

Или создать новое окно:

Вывод

Удалось ли спроектировать интерфейс, который свяжет сервисы между собой на функциональном и навигационном уровнях?

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

Что было самым сложным

Сохранить паттерны навигации, которые сложились в существующих сервисах.

Как я с этим справился
Разобрался, как устроены существующие сервисы и как они будут связаны между собой. После этого придерживался правила: навигация должна быть последовательной и обратимой.

Что сейчас происходит с продуктом

Приложение выпущено в 2023 году. После выпуска я завершил участие в проекте.

Дизайн сделал в середине 2022 и поддерживал его в ходе разработки в 2022—23.

Евгений Смирнов
Дизайнер

Евгений Гребенщиков
Арт-директор

IceRock Development
Команда разработки

Электропочта • Телеграм