Что сделано:
#UX-Исследования
#Дизайн-система
#UI-дизайн
#Копирайтинг
#AI-в-дизайне
#Figma
Платформа:
Автоматизация заявок ускорила корпоративный арбитраж в 3 раза, снизила риски для бизнеса и повысила лояльность сотрудников.
Лендинг
Кроссплатформенное
приложение
приложение
Результат:
Пэт-проект:
Адаптивный лендинг для пекарни “ПечьБери”
Создать современный, удобный и эффективный адаптивный лендинг, который увеличит конверсию посетителей в заказы и повысит средний чек для пекарни «ПечьБери».
О проекте
- Кликабельность ключевых элементов: Кнопок "В корзину", "Заказать", категорий меню.
- Показатель отказов: Процент пользователей, ушедших после просмотра страницы.
- Глубина просмотра: Насколько глубоко пользователи изучают ассортимент.
- Время на сайте: Показатель вовлеченности.
- Конверсия в заказ: Процент посетителей, оформивших заказ.
Ключевые метрики для отслеживания успеха
Главная страница и акции
Ассортимент
Информация о пекарне
Задача
- Бизнес-ограничения: Необходимость четко отображать условия доставки (минимальный заказ, стоимость, зоны) и акционные предложения.
- Сроки: 6 недель на весь цикл (исследование, дизайн, тестирование, сдача).
Ограничения:
- Упростить процесс заказа. Сделать навигацию по меню интуитивно понятной, а процесс добавления товаров в корзину и оформления заказа — максимально быстрым и прозрачным.
- Создать адаптивный дизайн. Анализ аудитории показал, что более 60% заказов совершается с мобильных устройств. Неадаптивный дизайн создает барьер для конверсии.
- Повысить доверие и конверсию.
Что важно было сделать:
- Визуальная иерархия: Крупная, контрастная типографика. Четкое разделение секций. Качественные фотографии продуктов как главный визуальный элемент.
- Интерактивные элементы: Микро-анимации для кнопок "В корзину", плавные переходы между секциями для улучшения пользовательского опыта.
- Современная эстетика: Использованы принципы "спокойного дизайна". Чистые линии, много воздуха, натуральная цветовая палитра, соответствующие бренду пекарни.
- Информационная архитектура: Переработана структура контента. Определен приоритетный порядок блоков: Герой с УТП и акцией -> Категории товаров -> Отзывы -> О нас -> Доставка и оплата -> Контакты.
- Прототипы: Созданы кликабельные wireframe-прототипы в Figma для мобильной и десктопной версий для проверки логики взаимодействия.
- Разработка User Flow: Спроектирован путь пользователя от входа на сайт до успешного заказа. Упрощено количество шагов.
- Тестирование с пользователями: 5 респондентов из целевой аудитории выполнили задания. Выявлены и исправлены мелкие недочеты в навигации.
- Создан детализированный UI-Kit для передачи разработчикам.
- Подготовлены адаптивные макеты для 3 ключевых разрешений: мобильное, планшет, десктоп.
- Аудит старого макета
- Анализ конкурентов
Визуальный дизайн
Прототипирование и структура
Сдача макетов и UI-кит
- A/B тестирование: На этапе прототипа было протестировано 2 варианта главного экрана.
Юзабилити-тестирование
- Анализ аудитории
Исследование и анализ
Решение
Качественные результаты и выводы:
Количественные результаты
- Время на сайте увеличилось на 40 секунд, что говорит о возросшем интересе пользователей к контенту.
- Показатель отказов на мобильных устройствах снизился на 30%, что подтвердило эффективность адаптивного дизайна.
- Средний чек увеличился на 15%, чему способствовала улучшенная подача товаров и акценты на акционные позиции.
- Следующий шаг: Внедрить аналитику более глубоко для дальнейшей оптимизации пути пользователя и тестирования новых гипотез.
- Ясность побеждает креативность. Чистый, структурированный дизайн с четкими призывами к действию оказался эффективнее креативного, но перегруженного макета.
- Адаптивность — не опция, а необходимость. Для бизнеса, где большая доля трафика мобильная, это критически важно для конверсии.
- Конверсия в заказ выросла на 22%
Результат и измеримые эффекты
Портфолио
Разработка корпоративного раздела «Информирование предприятий»
Редизайн раздела "Сообщества" для корпоративных сотрудников
Разработка раздела "Корпоративный арбитраж"
Редизайн главной страницы корпоративного портала «Aura»
