Web
Web
Bitrix
Bitrix
🎨 Брендирование: оптимизировала модуль для экономии ресурсов и сокращения доработок
🎨 Брендирование: оптимизировала модуль для экономии ресурсов и сокращения доработок
🎨 Брендирование: оптимизировала модуль для экономии ресурсов и сокращения доработок
Редизайн модуля брендинга Bitrix24 с понятными настройками и точными визуальными гайдами
Редизайн модуля брендинга Bitrix24 с понятными настройками и точными визуальными гайдами
Редизайн модуля брендинга Bitrix24 с понятными настройками и точными визуальными гайдами
О проекте
О проекте
Моя роль
Моя роль
Ведущий UX/UI Дизайнер
Ведущий UX/UI Дизайнер
Таймфрейм
Таймфрейм
4 месяца
4 месяца
Инструменты
Инструменты
Figma, Bitrix
Figma, Bitrix
Ситуация
Ситуация
Модуль «Брендирование» — один из самых популярных продуктов компании. Обычно он идет в связке с флагманским модулем «Главная страница» и позволяет стилизовать портал Битрикс24 под фирменный стиль компании.
Модуль «Брендирование» — один из самых популярных продуктов компании. Обычно он идет в связке с флагманским модулем «Главная страница» и позволяет стилизовать портал Битрикс24 под фирменный стиль компании.
Модуль «Брендирование» — один из самых популярных продуктов компании. Обычно он идет в связке с флагманским модулем «Главная страница» и позволяет стилизовать портал Битрикс24 под фирменный стиль компании.
Модуль «Брендирование» — один из самых популярных продуктов компании. Обычно он идет в связке с флагманским модулем «Главная страница» и позволяет стилизовать портал Битрикс24 под фирменный стиль компании.
Однако процесс внедрения модуля был ресурсозатратным — привлекалась команда из дизайнера, настройщика, руководителя проекта и иногда разработчика, и часто приводил к ошибкам внедрения.
Однако процесс внедрения модуля был ресурсозатратным — привлекалась команда из дизайнера, настройщика, руководителя проекта и иногда разработчика, и часто приводил к ошибкам внедрения.
Однако процесс внедрения модуля был ресурсозатратным — привлекалась команда из дизайнера, настройщика, руководителя проекта и иногда разработчика, и часто приводил к ошибкам внедрения.
Однако процесс внедрения модуля был ресурсозатратным — привлекалась команда из дизайнера, настройщика, руководителя проекта и иногда разработчика, и часто приводил к ошибкам внедрения.
Неактуальность. Настройки модуля устарели и не соответствовали текущему интерфейсу Битрикса.
Неактуальность. Настройки модуля устарели и не соответствовали текущему интерфейсу Битрикса.
Неактуальность. Настройки модуля устарели и не соответствовали текущему интерфейсу Битрикса.
Сложность. Поля настройки и изображения модуля были запутанными и не функциональными.
Сложность. Поля настройки и изображения модуля были запутанными и не функциональными.
Сложность. Поля настройки и изображения модуля были запутанными и не функциональными.
Качество. Итоговый результат стилизации часто отличался от макетов в Figma, что вызывало недовольство заказчиков и необходимость возвращаться к настройкам и дизайну несколько раз.
Качество. Итоговый результат стилизации часто отличался от макетов в Figma, что вызывало недовольство заказчиков и необходимость возвращаться к настройкам и дизайну несколько раз.
Качество. Итоговый результат стилизации часто отличался от макетов в Figma, что вызывало недовольство заказчиков и необходимость возвращаться к настройкам и дизайну несколько раз.
Все эти факторы снижали удовлетворённость заказчиков по результатам внедрения продукта, а со стороны команды требовались лишние ресурсы на устранение ошибок. Нам нужно было это исправить.
Все эти факторы снижали удовлетворённость заказчиков по результатам внедрения продукта, а со стороны команды требовались лишние ресурсы на устранение ошибок. Нам нужно было это исправить.
Все эти факторы снижали удовлетворённость заказчиков по результатам внедрения продукта, а со стороны команды требовались лишние ресурсы на устранение ошибок. Нам нужно было это исправить.
Все эти факторы снижали удовлетворённость заказчиков по результатам внедрения продукта, а со стороны команды требовались лишние ресурсы на устранение ошибок. Нам нужно было это исправить.
Задача
Задача
Мы выделили основные дизайн-задачи для решения проблем модуля:
Мы выделили основные дизайн-задачи для решения проблем модуля:
Мы выделили основные дизайн-задачи для решения проблем модуля:
Мы выделили основные дизайн-задачи для решения проблем модуля:
Изменить расположение. Перенести интерфейсы модуля из админ-панели в публичную часть портала.
Изменить расположение. Перенести интерфейсы модуля из админ-панели в публичную часть портала.
Изменить расположение. Перенести интерфейсы модуля из админ-панели в публичную часть портала.
Упростить работу. Создать понятный, актуальный и минимизирующий количество ошибок интерфейс.
Упростить работу. Создать понятный, актуальный и минимизирующий количество ошибок интерфейс.
Упростить работу. Создать понятный, актуальный и минимизирующий количество ошибок интерфейс.
Технический апдейт. Тесно взаимодействовать с разработчиками, настройщиками и техническим директором для устранения технических несовпадений.
Технический апдейт. Тесно взаимодействовать с разработчиками, настройщиками и техническим директором для устранения технических несовпадений.
Технический апдейт. Тесно взаимодействовать с разработчиками, настройщиками и техническим директором для устранения технических несовпадений.
Действия
Действия
Моя работа включала этапы:
Моя работа включала этапы:
Моя работа включала этапы:
Анализ проблем модуля
Постановка гипотез
Проверка первичного дизайн-решения
Работа с техническими специалистами
Проработка сопроводительных изображений
Финальный дизайн всех интерфейсов
Составление документации к модулю
Анализ проблем модуля
Постановка гипотез
Проверка первичного дизайн-решения
Работа с техническими специалистами
Проработка сопроводительных изображений
Финальный дизайн всех интерфейсов
Составление документации к модулю
Анализ проблем модуля
Постановка гипотез
Проверка первичного дизайн-решения
Работа с техническими специалистами
Проработка сопроводительных изображений
Финальный дизайн всех интерфейсов
Составление документации к модулю
Дизайн-процесс, гипотезы и решения
Дизайн-процесс, гипотезы и решения
Дизайн-процесс, гипотезы и решения
Я опиралась на обратную связь от команды внедрения: дизайнеров, настройщиков, разработчиков. Как дизайнер я полноценно участвовала в процессе внедрения продукта и использовала свой опыт для решения задач проекта. На основе вводных я сформулировала гипотезы.
Я опиралась на обратную связь от команды внедрения: дизайнеров, настройщиков, разработчиков. Как дизайнер я полноценно участвовала в процессе внедрения продукта и использовала свой опыт для решения задач проекта. На основе вводных я сформулировала гипотезы.
Я опиралась на обратную связь от команды внедрения: дизайнеров, настройщиков, разработчиков. Как дизайнер я полноценно участвовала в процессе внедрения продукта и использовала свой опыт для решения задач проекта. На основе вводных я сформулировала гипотезы.
Текущие изображения были слишком запутанными и не давали чёткого понимания настроек 👉 Если создать больше наглядных, детализированных иллюстраций с подписями, пользователи смогут быстрее понимать каждую настройку и реже ошибаться.
Текущие изображения были слишком запутанными и не давали чёткого понимания настроек 👉 Если создать больше наглядных, детализированных иллюстраций с подписями, пользователи смогут быстрее понимать каждую настройку и реже ошибаться.
Текущие изображения были слишком запутанными и не давали чёткого понимания настроек 👉 Если создать больше наглядных, детализированных иллюстраций с подписями, пользователи смогут быстрее понимать каждую настройку и реже ошибаться.
Устаревшие настройки вызывали путаницу и ошибки 👉 Если обновить все поля и привести их в соответствие с реальными возможностями продукта, пользователи будут настраивать систему точнее, снизив количество ошибок.
Устаревшие настройки вызывали путаницу и ошибки 👉 Если обновить все поля и привести их в соответствие с реальными возможностями продукта, пользователи будут настраивать систему точнее, снизив количество ошибок.
Устаревшие настройки вызывали путаницу и ошибки 👉 Если обновить все поля и привести их в соответствие с реальными возможностями продукта, пользователи будут настраивать систему точнее, снизив количество ошибок.
Дизайнеры готовили макеты, которые не всегда соответствовали реальным возможностям модуля, из-за этого настройщикам было сложно внедрять продукт 👉 Если стандартизировать настройки и дизайн-макеты, дизайнеры смогут быстрее и качественнее стилизовать портал, а настройщики будут тратить меньше времени на внедрение.
Дизайнеры готовили макеты, которые не всегда соответствовали реальным возможностям модуля, из-за этого настройщикам было сложно внедрять продукт 👉 Если стандартизировать настройки и дизайн-макеты, дизайнеры смогут быстрее и качественнее стилизовать портал, а настройщики будут тратить меньше времени на внедрение.
Дизайнеры готовили макеты, которые не всегда соответствовали реальным возможностям модуля, из-за этого настройщикам было сложно внедрять продукт 👉 Если стандартизировать настройки и дизайн-макеты, дизайнеры смогут быстрее и качественнее стилизовать портал, а настройщики будут тратить меньше времени на внедрение.
Финал
Финал
Финал
После полного согласования редизайна я совместно с коллегой составляла большое руководство к модулю на 100+ страниц, где были прописаны все актуальные возможности продукта и детально описывалась каждая настройка + сопровождалась изображением.
После полного согласования редизайна я совместно с коллегой составляла большое руководство к модулю на 100+ страниц, где были прописаны все актуальные возможности продукта и детально описывалась каждая настройка + сопровождалась изображением.
После полного согласования редизайна я совместно с коллегой составляла большое руководство к модулю на 100+ страниц, где были прописаны все актуальные возможности продукта и детально описывалась каждая настройка + сопровождалась изображением.
В перспективе планировалось передавать документ клиентам для самостоятельного внедрения модуля и внесения желаемых изменений без вовлечения нашей команды.
В перспективе планировалось передавать документ клиентам для самостоятельного внедрения модуля и внесения желаемых изменений без вовлечения нашей команды.
В перспективе планировалось передавать документ клиентам для самостоятельного внедрения модуля и внесения желаемых изменений без вовлечения нашей команды.
Результат
Результат
После выпуска обновления модуля и тестирования его на новых внедрениях, наша команда заметила положительные изменения:
После выпуска обновления модуля и тестирования его на новых внедрениях, наша команда заметила положительные изменения:
После выпуска обновления модуля и тестирования его на новых внедрениях, наша команда заметила положительные изменения:
Упростили интерфейс. Обновлённый интерфейс стал проще в навигации, с чётко структурированными и доступными настройками в публичной части портала.
Упростили интерфейс. Обновлённый интерфейс стал проще в навигации, с чётко структурированными и доступными настройками в публичной части портала.
Упростили интерфейс. Обновлённый интерфейс стал проще в навигации, с чётко структурированными и доступными настройками в публичной части портала.
Оптимизировали изображения. Детализированные иллюстрации с пояснениями помогли сразу понять, за что отвечает каждая настройка, что значительно сократило количество ошибок и недопониманий.
Оптимизировали изображения. Детализированные иллюстрации с пояснениями помогли сразу понять, за что отвечает каждая настройка, что значительно сократило количество ошибок и недопониманий.
Оптимизировали изображения. Детализированные иллюстрации с пояснениями помогли сразу понять, за что отвечает каждая настройка, что значительно сократило количество ошибок и недопониманий.
Улучшили процесс внедрения продукта. Дизайнеры начали работать с новым макетами, а настройщики — внедрять стилизацию быстрее и точнее. Ресурсы команды после внедрения модуля стали вовлекаться гораздо реже.
Улучшили процесс внедрения продукта. Дизайнеры начали работать с новым макетами, а настройщики — внедрять стилизацию быстрее и точнее. Ресурсы команды после внедрения модуля стали вовлекаться гораздо реже.
Улучшили процесс внедрения продукта. Дизайнеры начали работать с новым макетами, а настройщики — внедрять стилизацию быстрее и точнее. Ресурсы команды после внедрения модуля стали вовлекаться гораздо реже.
