Вернуться назад

ПРоблема

В процессе анализа текущей версии сайта были выявлены ключевые проблемы:

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

• Сложная структура каталога без удобной фильтрации.

• Недостаточно акцентированная информация о преимуществах компании.

• Низкая визуальная консистентность интерфейса.

[01]
анализ

Анализ

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

Что было сделано:

• Изучены сайты прямых конкурентов в сфере садового оборудования
• Проанализированы успешные интернет-магазины в смежных сферах с удобной навигацией и UX-решениями.
• Выявлены лучшие практики по фильтрации товаров, карточкам товаров и каталогам.
• Составлен список сильных и слабых сторон конкурентов.

Прототипы и проектирование

На основе анализа я спроектировала новый интерфейс с учетом пользовательских сценариев.

Что было сделано:

• Составлены пользовательские сценарии для поиска товара, выбора товара и оформления заказа.
• Нарисованы wireframes для всех ключевых страниц (главная, каталог, карточка товара).
• Созданы интерактивные прототипы в Figma для тестирования взаимодействий.

[02]
Дизайн концепт

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

[03]
Дизайн

[04]
Адаптивы и UI-kit

Адаптивы

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

UI-Kit

Чтобы упростить дальнейшую работу и поддержку проекта, я собрала UI-kit — систему компонентов, которая обеспечивала единообразие дизайна. В него вошли:

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

📋 Результаты:

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