Редизайн для интернет-магазина Адверти

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

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

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

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

Главная

Header

Новый дизайн:

Цветовая палитра: Сохраняется базовая цветовая схема (темно-синий верхний бар и оранжевое меню), но используется больше белого пространства, что делает интерфейс более легким и чистым.
Автоподсказки: При вводе текста в поиске появляются автоподсказки, что значительно упрощает процесс поиска товаров.
Размер шрифта: Шрифт стал чуть крупнее, что улучшает читаемость.
Dropdown: Выпадающее меню стало более детализированным и информативным. Теперь оно включает:
- Процент скидки («Авторизуйтесь для получения скидки»).
- Список действий: «Мои данные,» «Мои заказы,» «Поставщики,» «Заказы покупателей,» «Презентации,» «Мои КП.»
- Кнопку выхода («Выйти»).
Иконки: Каждому пункту меню соответствует значок, что улучшает восприятие и скорость взаимодействия.
Общая информация: Появилась возможность видеть общую сумму заказа и количество товаров в корзине прямо в выпадающем меню.

Общие улучшения

Упрощение: Более чистый и минималистичный подход к дизайну, что делает интерфейс легче воспринимать.
Функциональность: Автоподсказки в поиске, отображение суммы заказа и количества товаров в корзине, значки в меню — все эти элементы значительно повышают удобство использования.
Мобильная адаптивность: Новый дизайн лучше подходит для мобильных устройств благодаря увеличению размеров кнопок и пространства между элементами.

Меню стало более логичным и цельным:
- Левое боковое меню: сохраняет те же категории, но с улучшенным интервалом и выравниванием элементов.
- Основная область контента: показывает подкатегории и товары в более чистом и организованном виде.
Цветовая схема осталась прежней (темно-синий и оранжевый), но благодаря использованию белого пространства интерфейс стал менее плотным.
Были перерисованы иконки в более простом и понятном стиле, что облегчило усвоение информации.
Выпадающие меню и значки лучше подходят для мобильных устройств благодаря увеличению размеров тач-зон.
Логическая структура с меньшим количеством одновременно отображаемых элементов улучшает мобильную доступность.
Добавление значков и акцентов (например, выделение активной категории) делает интерфейс более привлекательным и современным.
Белый фон с контрастными элементами (оранжевые кнопки, черный текст) создает четкую визуальную иерархию.

Общие улучшения

Общий вывод: Новый дизайн значительно улучшил удобство использования, визуальную привлекательность и мобильную адаптивность. Эти изменения положительно влияют на пользовательский опыт и способствуют более эффективному взаимодействию с сайтом.

Pop-up form

Новый дизайн:

Читаемость: Шрифт увеличен, а интервалы между полями сделаны больше, что улучшает восприятие.
Организация полей: Добавлено поле «Как к вам обращаться,» которое делает форму более персональной.
Фокусировка внимания: Звездочки рядом с обязательными полями сохранены, что помогает пользователю понять, какие поля нужно заполнить.
Выбор типа клиента: Теперь используется выпадающий список вместо радиокнопок, что упрощает выбор.
Цветовая палитра: Сохранена базовая цветовая схема, но форма стала более современной благодаря использованию больших полей и четкого дизайна.
Элементы оформления: Добавлены значки (например, глазик для показа/скрытия пароля), что улучшает взаимодействие.
Общий стиль: Более чистый и современный подход, который соответствует трендам UI/UX.

Общие улучшения

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

Catalog

Новый дизайн:

Категории: Каталог также разделён на несколько колонок, но теперь используется более линейная организация.
Подкатегории: Под каждой категорией перечислены подкатегории, но добавлены значки для большей визуальной идентификации.
Иконки: Иконки стали более детализированными и соответствуют конкретным подкатегориям.
Организация: Добавлена навигационная ссылка «Весь Каталог» в правом верхнем углу, что позволяет быстро перейти к полному списку товаров.
Заголовки категорий: Теперь имеют более четкую визуальную иерархию благодаря:
- Большим заголовкам.
- Добавлению значков рядом с названиями категорий.
Подкатегории: Улучшенная визуализация:
- Каждая подкатегория имеет свой значок.
- Текст выделен маркерами (например, оранжевыми точками), что делает его более заметным.
Иконки: Более детальные и специфичные для каждой подкатегории, что улучшает восприятие.
Мобильная адаптивность: Улучшенная организация с большим интервалом между элементами и значками делает форму более удобной для использования на мобильных устройствах.
Эстетика: Более современный и привлекательный дизайн благодаря:
- Детальным значкам.
- Оранжевым маркерами.
- Логической организации.
Визуальное оформление: Улучшенное использование цвета и графики делает интерфейс более динамичным и интересным.

Каталог

Новый дизайн:

Фильтры: Расположены слева от товаров.
- Включают фильтры по категории, размеру тиража, цене, бренду, цвету, материалу и механизму.
- Добавлена кнопка «Обновить цены» для обновления цен в реальном времени.
Сортировка: Размещена в верхней части экрана рядом с фильтрами.
- Опция сортировки доступна через выпадающее меню («По популярности,» «Сначала дешевые,» «Сначала дорогие,» «По минимальному тиражу»).
Товары: Показаны в виде галереи (3 колонки), но с более четкой организацией информации о каждом товаре.
Фильтры:
- Более подробные и структурированные:
  - Добавлены дополнительные фильтры (например, категория, бренд, цвет, материал).
  - Возможность быстро сбрасывать выбранные фильтры.
- Логическая организация фильтров (например, разделение на категории и фильтры).
Сортировка:
- Выпадающее меню делает выбор сортировки более компактным и удобным.
- Расположение в верхней части экрана позволяет легко найти и использовать.

Сравнительная таблица улучшений

Карточка товара

Новый дизайн:

Основная информация: Более организованная структура.
- Вверху: Фото товара, название, ценовая информация, кнопка «В корзину.»
- Средняя часть: Разделение на цвета, размеры, дополнительные услуги и нанесение логотипа.
- Нижняя часть: Характеристики товара, описание, табло с ценами.
Интерфейс: Современный, с использованием выпадающих меню и интерактивных элементов.
Функциональность: Улучшенная возможность настройки параметров товара (например, выбор места нанесения логотипа).
Цветовая палитра: Яркие акценты (например, оранжевый цвет для основного элемента).
Элементы управления: Более четкая организация:
- Выпадающие меню для выбора цвета и размера.
- Интерактивные элементы для добавления нанесения логотипа.
Фокус внимания: Ключевые элементы (например, цена, кнопка «В корзину») более заметны благодаря увеличению размера и использования цветовых акцентов.
Эстетика: Более современный и привлекательный дизайн благодаря:
- Ярким цветам.
- Детальным иконкам.
- Логичной организации информации.
Визуальное оформление: Улучшенное использование цвета и графики делает интерфейс более динамичным и интересным.

Корзина

Новый дизайн:

Структура более линейная и простая. Товары и информация о заказе находятся в разных секциях, что улучшает восприятие.
Дополнительные функции интегрированы непосредственно под каждым товаром (например, «Добавить нанесение», «Добавить доп. услуги»), что делает их более доступными для пользователя.
Более чистый и минималистичный подход. Отсутствие лишних элементов делает интерфейс легким для восприятия.
Цветовая палитра более выразительная: зеленая кнопка «Оформить заказ» контрастирует с белым фоном, а синие кнопки добавляют динамику.
Иконки более понятные и соответствуют стандартам (например, корзина для удаления товара).
Основная информация представлена более компактно, но при этом сохраняется ключевая деталь — стоимость тиража и общая сумма заказа.
Дополнительные опции (нанесение, дополнительные услуги) легко доступны через кнопки, что позволяет пользователю расширять функциональность заказа без необходимости скроллинга.
Все необходимые функции (добавление нанесения, дополнительных услуг) расположены прямо под каждым товаром, что упрощает взаимодействие.
Большие кнопки и простая навигация делают процесс оформления заказа более интуитивным.
Возможность быстро очистить корзину (кнопка «Очистить корзину») находится в верхней правой части, где она обычно ожидается.
Зеленая кнопка «Оформить заказ» четко выделена как основное действие.
Другие элементы (добавление нанесения, дополнительных услуг) имеют менее яркие цвета, что помогает пользователю сосредоточиться на главном.