Моя роль:

UI/UX продуктовый дизайнер

Команда:

Разработчики, менеджеры продукта

Инструменты:

Figma, Яндекс.Метрика

Задачи:

• Редизайн страницы оформления заказа

• Разработка страниц авторизации и регистрации

• Улучшение UX на основе тестирования

• Оптимизация интерфейса для мобильных устройств

Контекст:

CERAMUM — дизайн студия керамики. Основная цель редизайна заключалась в увеличении конверсии оформления заказа и создании удобных страниц авторизации и регистрации, соответствующих UI-стилю основного сайта.

01. Проблемы и цели

Анализ старого UX

Исходная версия сайта имела ряд проблем, которые снижали удобство использования и конверсию.

Основные проблемы:

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

• Страница с товаром: слабая визуальная структура, сложность восприятия информации о товаре.

• Корзина: сложное управление, отсутствие адекватного отображения товаров и итоговой суммы, неинтуитивные элементы взаимодействия.

• Верхнее меню: разделено на два блока – левое боковое и основное, что усложняло навигацию.

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

Цели редизайна:

• Уменьшить количество отказов

• Упростить процесс оформления заказа

• Сделать навигацию интуитивной

• Улучшить восприятие ключевых элементов интерфейса

02. Процесс работы

1. UX-исследование

• Анализ пользовательского поведения с помощью Яндекс.Метрики, включая тепловые карты, показатели отказов и анализ воронки конверсии

• Опрос пользователей для выявления болевых точек

• Конкурентный анализ e-commerce решений

2. Проектирование

• User Flow: переработан процесс заказа с минимальным числом шагов

• Wireframes: создано несколько вариантов формы для A/B-тестирования

• UI-дизайн: единый стиль с основным сайтом (чистый интерфейс, акцент на CTA)

3. Тестирование

• A/B-тесты двух версий оформления заказа

• Юзабилити-тестирование с реальными пользователями

• Анализ метрик (время на оформление заказа, процент отказов)

03. Решения и улучшения

✅ Сокращение полей формы: убраны лишние шаги, добавлена автоматическая подстановка данных

✅ Яркий CTA: кнопка оформления заказа стала более заметной

✅ Фиксированное меню на мобильных: доступ к важным действиям всегда под рукой

✅ Поддержка автозаполнения: ускоряет процесс оформления заказа

✅ Оптимизация страницы товара: выделена кнопка добавления в корзину, улучшена структура контента, добавлена удобная карточка товара и карусель фото

✅ Упрощение корзины: наглядное отображение товаров, итоговой суммы и количества, улучшенная визуальная иерархия

✅ Редизайн страницы оформления заказа: переработан интерфейс, убраны лишние шаги, улучшена визуальная иерархия, сделаны понятные статусы этапов оформления.

✅ Экраны авторизации и регистрации: добавлен вход по номеру телефона

✅ Переработка верхнего меню: сделана логичная структура, объединено боковое и основное меню

✅ Обновленный подвал: добавлены важные ссылки, улучшена организация информации

✅ Полная адаптация под мобильные устройства

• Оптимизированы все страницы для удобного использования на смартфонах

• Убраны мелкие элементы, сложные формы и лишние шаги

• Добавлены фиксированные кнопки CTA, удобное мобильное меню и оптимизированная корзина

• Улучшена отзывчивость интерфейса, чтобы корректно отображаться на разных экранах

04. Результаты

📈 Конверсия оформления заказа: 30% → 42% (+12%)
⏳ Среднее время оформления: 2:37 мин → 1:45 мин
📉 Процент отказов: 32% → 19%

05. Выводы

Проект позволил не только улучшить UX, но и повысить конверсию на 12%, а также сократить время оформления заказа. Благодаря тестированиям и поэтапному подходу удалось создать интуитивно понятный и конверсионный процесс заказа для юзеров.