Я работаю с брендом Mobo, который занимается производством мебели для ванной комнаты. Со временем стало понятно, что существующий сайт перестал соответствовать уровню продукта и не помогает пользователю удобно знакомиться с ассортиментом.
Основной задачей проекта стал полный редизайн сайта. Нужно было пересобрать структуру страниц, упростить навигацию и создать интерфейс, который помогает максимально выразительно представить ассортимент мебели и упрощает пользователю путь к покупке.
Чтобы понять, как можно улучшить пользовательский опыт, я изучил сайты мебельных брендов и интернет-магазинов. Меня интересовало, как в них организована структура каталога, навигация между разделами и подача карточек товаров.
Особое внимание я обращал на то, как реализована настройка товара, выбор размеров и материалов, а также на то, как эти процессы адаптированы под мобильные устройства.
Особое внимание я обращал на то, как реализована настройка товара, выбор размеров и материалов, а также на то, как эти процессы адаптированы под мобильные устройства.
Некоторые решения оказались особенно удачными и показали, как можно сделать процесс выбора действительно удобным
В процессе анализа я отметил несколько удачных решений, которые помогают упростить выбор и сделать взаимодействие с сайтом более понятным.
Чтобы структурировать пользовательский сценарий и лучше понять, где возникают основные сложности, я собрал упрощённый пользовательский путь и выделил ключевые этапы взаимодействия с сайтом.
Чтобы структурировать пользовательский сценарий и лучше понять, где возникают основные сложности, я собрал упрощённый пользовательский путь и выделил ключевые этапы взаимодействия с сайтом.
На основе пользовательского пути я выделил ключевые проблемы на каждом этапе и сформулировал решения, которые должны упростить взаимодействие с сайтом.
Далее я перешёл к созданию wireframes, чтобы зафиксировать структуру экранов, проверить основные сценарии и убедиться, что предложенные решения работают на уровне логики интерфейса.
Далее я перешёл к созданию wireframes, чтобы зафиксировать структуру экранов, проверить основные сценарии и убедиться, что предложенные решения работают на уровне логики интерфейса.
После проработки структуры и логики экранов я перешёл к поиску визуального направления.
Важно было определить стиль интерфейса, который отражает характер бренда и соответствует уровню продукта.
Важно было определить стиль интерфейса, который отражает характер бренда и соответствует уровню продукта.
В мудборде я собрал визуальные референсы, которые помогают сформировать общий визуальный язык интерфейса.
Он передаёт спокойный, минималистичный характер бренда: чистые формы, нейтральные оттенки и акцент на материалах. Такое направление позволяет сфокусировать внимание на продукте и создать ощущение аккуратности и продуманности.
Он передаёт спокойный, минималистичный характер бренда: чистые формы, нейтральные оттенки и акцент на материалах. Такое направление позволяет сфокусировать внимание на продукте и создать ощущение аккуратности и продуманности.
В процессе работы над интерфейсом я принял ряд решений, направленных на упрощение выбора и повышение понятности продукта.
Структурировал нейминг продукции - привёл названия к единой системе, чтобы пользователю было проще ориентироваться в ассортименте и понимать различия между моделями.
Связал выбор параметров с визуалом - изменение материалов и цветов сразу отражается на изображении товара, что помогает лучше представить итоговый результат.
Упростил выбор параметров - размеры, материалы и цвета оформлены в виде наглядных и быстрых для взаимодействия элементов.
Пересобрал структуру каталога - сделал навигацию более понятной и сократил путь к нужной категории.
Добавил блок похожих товаров - это помогает пользователю быстрее изучить альтернативы и продолжить выбор внутри каталога
Связал выбор параметров с визуалом - изменение материалов и цветов сразу отражается на изображении товара, что помогает лучше представить итоговый результат.
Упростил выбор параметров - размеры, материалы и цвета оформлены в виде наглядных и быстрых для взаимодействия элементов.
Пересобрал структуру каталога - сделал навигацию более понятной и сократил путь к нужной категории.
Добавил блок похожих товаров - это помогает пользователю быстрее изучить альтернативы и продолжить выбор внутри каталога
Отдельно я проработал мобильную версию сайта.
Важно было сохранить основные сценарии выбора и сделать взаимодействие удобным на небольшом экране.
Важно было сохранить основные сценарии выбора и сделать взаимодействие удобным на небольшом экране.
Одной из ключевых задач было сделать выбор материалов и цветов максимально наглядным.
При изменении параметров внешний вид тумбы сразу обновляется, что позволяет пользователю лучше представить итоговый результат и быстрее принять решение.
Изменения применяются в реальном времени.
При изменении параметров внешний вид тумбы сразу обновляется, что позволяет пользователю лучше представить итоговый результат и быстрее принять решение.
Изменения применяются в реальном времени.
В результате редизайна удалось создать более цельный и выразительный интерфейс, который лучше передаёт характер бренда и качество продукта.