Product дизайнер с архитектурным бэкграундом
09 июня 2024 г. / 5 мин на прочтение
Корпоративный сайт для компании Branch Technology
Моя роль:
Я выступала как UX/UI-дизайнер, UX-исследователь
Контекст и проблема
Branch Technology— это компания, которая занимается производством строительных панелей с использованием запатентованной технологии 3D-печати C-Fab®.
Несмотря на передовые технологии, сайт имеет ряд проблем:
– Низкая конверсия в заявки (0.8%)
– Высокий показатель оттока (Bounce Rate: 75%), особенно на мобильных устройствах (45%)
– Сложная навигация, перегруженность техническими деталями, неочевидные пути к контактам
Цели
Для бизнеса
Увеличить конверсию в заявки на 25% и сократить bounce-rate в первый месяц
Для пользователя
Дать быстрое понимание технологий, доступ к техдокументации и упростить процесс запроса сотрудничества
Задачи и метрики
- Упростить навигацию и информационную архитектуру
- Внедрить интерактивные элементы (3D-визуализации, анимации)
- Разработать адаптивные версии для мобильных и планшетов
- Добавить формы обратной связи на ключевых страницах
Метрики успеха
- Рост конверсии в заявки
- Снижение Bounce Rate
- Увеличение времени на сайте
- Рост мобильного трафика
Что было сделано
Аудит сайта
Я начала с аудита текущего сайта, где выявила топ-4 критические проблемы:
- Сложная навигация и отсутствие видимого меню
- Форма обратной связи без помощи в распознавании ошибок и подсказок
- Перегруженные и логически непоследовательные страницы продуктов
- Низкая скорость загрузки страниц (из-за тяжелых медиафайлов и 3D)
Пользовательские исследования
Провела опрос с представителями/сегментами целевой аудитории: архитекторами, девелоперами и инженерами-конструкторами.
Исследование выявило сводку ключевых инсайтов:
– Для 80% респондентов важен прямой и быстрый доступ к детальной технической документации/информации при принятии решения выбора продукта
– 60% опрошенных выразили потребность в четком отображении экономических преимуществ и выгод сотрудничества
– Всем респондентам важна предварительная визуализация панелей в контексте проекта → реализованные проекты
Анализ конкурентов
Этап анализа прямых конкурентов я оформила в таблицу сравнения, он помог мне обратить внимание на сильные стороны конкурентов:
– Четкое УТП на первом экране
– 3D и интерактивно-послойная визуализация технологий
– Гибкая форма обратной связи под сегменты ЦА
– Понятная навигация
Проектирование
На этапе проектирования была проведена полная реструктуризация информационной архитектуры. Ключевой задачей было выстроить логичную и последовательную структуру разделов. Для валидации новой структуры и точечного определения состава каждой страницы был подготовлен пакет функциональных прототипов, это позволило на ранних этапах определить полный состав блоков, выявить и согласовать полный перечень сущностей и их атрибутов, необходимых для реализации функционала.
Дизайн
Я предложила комплексный подход к проектированию:
1. Мгновенная навигация
Внедрила интуитивно понятное горизонтальное меню для пяти ключевых разделов сайта, чтобы с первого взгляда клиент увидел всю структуру и в один клик попал в нужный раздел. На мобильных устройствах меню компактно убирается в «гамбургер», освобождая место для самого важного — контента.
2. Ясность вместо сложности
Провела редизайн главной страницы, а именно, сделала акцент на УТП и выгодах технологии, ответив на вопросы: какую проблему клиента решает продукт, какую ценность транслирует компания, почему именно эта технология, этот продукт — лучший выбор. Такой последовательный связанный рассказ увеличивает вовлеченность пользователей в изучение сайта.
Как объяснить сложное BIM-проектирование просто? Я разбила информацию на уровни и превратила ее в интерактивную 3D-анимацию. Вы буквально видите, как «слой за слоем» собирается панель C-Fab®. Это наглядно, понятно и сразу отвечает на большинство технических вопросов.
Как объяснить сложное BIM-проектирование просто? Я разбила информацию на уровни и превратила ее в интерактивную 3D-анимацию. Вы буквально видите, как «слой за слоем» собирается панель C-Fab®. Это наглядно, понятно и сразу отвечает на большинство технических вопросов.
3. Гибкая форма под разный сегмент ЦА
Самый сложный интерфейс в проекте —многофункциональная форма запроса.
Этот элемент стал ключевым для конверсии и одновременно непростым. Основные сложности — это разнородные данные для разных сегментов:
– Архитекторам необходима возможность загружать файлы (чертежей и моделей)
– Девелоперы необходим подсчет по конкретному проекту стоимости/сроков
– Инженерам необходим доступ к техническим спецификациям.
Каждая страница получила стандартизированную, насыщенную визуалами структуру: главное фото продукта /релевантного проекта, краткая выжимка технических характеристик, BIM-скриншоты и схемы с ключевой информацией.
UX-тест
Финальный дизайн тестировала на 15 пользователях на платформе Pathway онлайн, провела клик-тесты, где 85% справились с заданиями, положительно ответили на вопросы
Результат
- Больше 85 % респондентов справилось с заданиями
- Время выполнения целевого действия сократилось с 15 минут до 3:45
- Сократились ошибки: - 20%
UI-kit
Разработала и внедрила модульный UI-Kit, основанный на принципах атомарного дизайна. В основе лежит система дизайн-токенов — централизованных переменных для цветов, типографики, отступов и теней. Для цветовых переменных и многих компонентов предусмотрено несколько вариантов состояний. Такой подход гарантирует визуальную согласованность на всем продукте.
3D визуализация и брендинг
Самостоятельно разработала ключевые визуальные решения (изометрические схемы, иллюстрации, 3D-модели для анимации) для сайта, применив свой архитектурный подход и и опыт создания трехпроекционных чертежей. Это обеспечило техническую точность, соответствие продукта и визуализации.
Выводы
–Я убедилась в критической важности функционального прототипирования на ранних этапах, это помогает избежать дорогостоящих изменений на стадии разработки
– Научилась эффективно применять свой архитектурный бэкграунд для создания сложных визуальных решений
– Этот проект показал, что системный подход к дизайну — от архитектуры до визуальных деталей — напрямую влияет на пользовательский опыт и результаты бизнеса.
09 июня 2024 г. / 5 мин на прочтение
Корпоративный сайт для строительной компании Branch Technology
Моя роль:
Я выступала как UX/UI-дизайнер, UX-исследователь, вела проект самостоятельно → от составления Брифа и ТЗ до подготовки и передачи макетов в разработку.
Моя роль:
Я выступала как UX/UI-дизайнер, UX-исследователь, разработала сайт и айдентику: от составления Брифа и ТЗ до подготовки и передачи макетов в разработку.
Контекст и проблема
Branch Technology— это компания, которая занимается производством строительных панелей с использованием запатентованной технологии 3D-печати C-Fab®.
Несмотря на передовые технологии, сайт имеет ряд проблем:
— Низкая конверсия в заявки (0.8%)
— Высокий показатель оттока (Bounce Rate: 75%), особенно на мобильных устройствах (45%)
— Сложная навигация, перегруженность техническими деталями, неочевидные пути к контактам
Цели
Для бизнеса
Увеличить конверсию в заявки на 25% и сократить bounce-rate в первый месяц
Для пользователя
Дать быстрое понимание технологий, доступ к техдокументации и упростить процесс запроса сотрудничества
Задачи
— Упростить навигацию и информационную архитектуру
— Внедрить интерактивные элементы (3D-визуализации, анимации)
— Разработать адаптивные версии для мобильных и планшетов
— Добавить формы обратной связи на ключевых страницах
Метрики успеха
— Рост конверсии в заявки
— Снижение Bounce Rate
— Увеличение времени на сайте
— Рост мобильного трафика
Что было сделано
Аудит сайта
Я начала с аудита текущего сайта, где выявила топ-4 критические проблемы:
— Сложная навигация и отсутствие видимого меню
— Форма обратной связи без помощи в распознавании ошибок и подсказок
—Перегруженные и логически непоследовательные страницы продуктов
— Низкая скорость загрузки страниц (из-за тяжелых медиафайлов и 3D)
Пользовательские исследования
Провела опрос с представителями, сегментами целевой аудитории (архитекторами, девелоперами и инженерами-конструкторами).
Исследование выявило ключевые инсайты:
– Для 80% респондентов важен прямой и быстрый доступ к детальной технической документации при принятии решения выбора продукта
– 60% опрошенных выразили потребность в четком отображении экономических преимуществ и выгод сотрудничества
– Всем респондентам важна предварительная визуализация панелей в контексте проекта → реализованные проекты
Анализ конкурентов
Этап анализа прямых конкурентов я оформила в → таблицу сравнения, он помог мне обратить внимание на сильные стороны конкурентов:
– Четкое УТП на первом экране
– 3D и интерактивно-послойная визуализация технологий
– Гибкая форма обратной связи под сегменты ЦА
– Понятная навигация
Проектирование
На этапе проектирования была проведена полная реструктуризация информационной архитектуры. Ключевой задачей было выстроить логичную и последовательную структуру разделов. Для валидации новой структуры и точечного определения состава каждой страницы был подготовлен пакет функциональных прототипов, это позволило на ранних этапах определить полный состав блоков, выявить и согласовать полный перечень сущностей и их атрибутов, необходимых для реализации функционала.
Дизайн
Я предложила комплексный подход к проектированию:
Мгновенная навигация
Внедрила интуитивно понятное горизонтальное меню для пяти ключевых разделов сайта, чтобы с первого взгляда клиент увидел всю структуру и в один клик попал в нужный раздел. На мобильных устройствах меню компактно убирается в «гамбургер», освобождая место для самого важного — контента.
Ясность вместо сложности
Провела редизайн главной страницы, сделав акцент на УТП и выгодах технологии: какую проблему клиента решает продукт, какую ценность транслирует компания, почему именно эта технология, этот продукт — лучший выбор. Такой последовательный связанный рассказ увеличивает вовлеченность пользователей
Как объяснить сложное BIM-проектирование просто? Я разбила информацию на уровни и превратила ее в интерактивную 3D-анимацию. Вы буквально видите, как «слой за слоем» собирается панель C-Fab®. Это наглядно, понятно и сразу отвечает на большинство технических вопросов.
Гибкая форма под сегмент ЦА
Самый сложный интерфейс в проекте —многофункциональная форма запроса.
Этот элемент стал ключевым для конверсии и одновременно непростым. Основные сложности — это разнородные данные для разных сегментов:
– Архитекторам необходима возможность загружать файлы (чертежей и моделей)
– Девелоперы необходим подсчет по конкретному проекту стоимости/сроков
– Инженерам необходим доступ к техническим спецификациям.
Каждая страница получила стандартизированную, насыщенную визуалами структуру: главное фото продукта /релевантного проекта, краткая выжимка технических характеристик, BIM-скриншоты и схемы с ключевой информацией.
UX-тест
Финальный дизайн тестировала на 15 пользователях на платформе Pathway онлайн, провела клик-тесты, где 85% справились с заданиями, положительно ответили на вопросы
Результаты
– Больше 85 % справилось с заданиями
– Время выполнения целевого действия сократилось (с 15 минут до 3:45)
– Сократились ошибки: - 20%
UI-kit
Разработала и внедрила модульный UI-Kit, основанный на принципах атомарного дизайна. В основе лежит система дизайн-токенов — централизованных переменных для цветов, типографики, отступов и теней. Для цветовых переменных и многих компонентов предусмотрено несколько вариантов состояний. Такой подход гарантирует визуальную согласованность на всем продукте.
3D визуализация и брендинг
Самостоятельно разработала ключевые визуальные решения (изометрические схемы, иллюстрации, 3D-модели для анимации) для сайта, применив свой архитектурный подход и опыт создания трехпроекционных чертежей. Это обеспечило техническую точность, соответствие продукта и визуализации.
Выводы
– Я убедилась в критической важности функционального прототипирования на ранних этапах, это помогает избежать дорогостоящих изменений на стадии разработки
– Научилась эффективно применять свой архитектурный бэкграунд для создания сложных визуальных решений
– Этот проект показал, что системный подход к дизайну — от архитектуры до визуальных деталей — напрямую влияет на пользовательский опыт и результаты бизнеса.
Следующий проект
Редизайн системы отзывов для Lamoda