< 600 экранов, 7 месяцев работ

Как мы создали новый дизайн для онлайн-конфигуратора промышленной компании

Наш клиент, международная промышленная компания PK Vesta, обратился с запросом редизайна онлайн системы WebSteel.

География продажСтраны СНГ

Дизайн онлайн-конфигуратора< 600 экранов7 месяцев работ

Как работает платформа?

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

Целевая аудитория

≈80%

Пользователей - это юридические лица, нуждающиеся в здании для коммерческих целей

10%

Инвесторы, рассматривающие здания для потенциальных инвестиций

10%

Частные лица, заказывающие здания для личного использования

Цели проекта

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

Придерживаться минималистического стиля

Учесть двуязычность сайта – русский и английский

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

Реализовать адаптивную верстку с учетом основных разрешений (8К, 5K, 4K, 2.5K и Full HD и HD), соотношений сторон (16:9,3:2 и др) и основных браузеров

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

Использовать нейтральные корпоративные цвета (светло-серый, акцентный — темно-синий, желтый)

Обновить дизайн не только самого сервиса, но и других составляющих элементов — поп-апы, формы с входом/регистрацией, личный кабинет

Этапы работы над проектом

1-ый этап

Интервью с клиентами

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

2-ой этап

Мудборд

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

3-ий этап

Прототипы

Прототип — это макет будущих страниц, который создается для того, чтобы показать, как они будут выглядеть. На основе прототипов далее разрабатывается дизайн.

4-ый этап

Дизайн

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

Весь процесс создания модели и оформления заказа разделили на 3 шага

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

Выбор гео параметров

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

Шаг помогает рассчитать стоимость доставки

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

Построение маршрута

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

Подсказки для пользователей

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

Создание здания

Здесь важно было предоставить полную информацию, необходимую для моделирования будущего сооружения. Сделали весь алгоритм создания конструкции понятныйдаже человеку без опыта проектирования зданий и сооружений. Поэтому к каждой характеристике добавили краткую справочную информацию и базу знаний “Как работает система”.

Некоторые функции платные

К примеру, можно онлайн посмотреть VR-версию будущего объекта в реальном размере на предполагаемом месте возведения.

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

Получение КП
и оформление заказа

Ключевую для пользователя информацию выделили с помощью цвета. Например, на этапе оплаты это коммерческое предложение и детали заказа — состав заказа, сроки изготовления, сумма предоплаты. Кнопка Call-to-Action также выделена, чтобы направить клиента на целевое действие — звонок для заказа.

Помощь на всех этапах

А если понадобится помощь — можно обратиться к менеджеру, нажав на кнопку “Задать вопрос”. При оформлении заказа клиент может определить удобный вариант оплаты. Чтобы помочь сделать оптимальный для него выбор, выделили чем отличаются варианты друг от друга.

Уточнение заказа

Подробно описали, что включено в заказ и акцентировали внимание на УТП компании.

Личный кабинет

Все заявки в одном месте. Можно в один клик скачать кп, добавить в избранное или поделиться моделью.

Сортировка по готовности

Сортировка позволяет легко отслеживать заказ в зависимости от его статуса: в работе, изготовлено, ранние заявки.

Возможность отслеживать % готовности заказа

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

Хронология заказа

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

Избранное

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

Сравнение

Добавили возможность сравнивать варианты по основным характеристикам (порт поставки, место производства, состояние зданий. Клиент может выбрать, что для него важнее — анализ всех характеристик или только различий.

История заказа

Просмотреть историю заказа платных функций можно тоже в личном кабинете.

Отраслевые решения

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

Акционные предложения

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

Фильтры по размерам

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

Выводы

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

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

Как это поможет компании достигать своих целей?

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

Получите дизайн, который приносит видимые результаты. Давайте обсудим ваши цели и задачи прямо сейчас!

Вверх

< 600 экранов, 7 месяцев работ

Как мы создали новый дизайн для онлайн-конфигуратора промышленной компании

Как работает платформа?

Цели проекта