Моё хобби — шахматы.
Если вы захотите сыграть, ищите меня на chess.com и lichess.org под ником alex_yakovleva
Редизайн интернет-магазина
Harry Cooper
Бренд оптики и оправ собственного производства. Концепция бренда — современные оправы, в стоимость которых уже включены линзы, дружелюбный сервис и отсутствие навязанных услуг
- КонтекстМой концепт по редизайну интернет-магазина в рамках учебного проекта настолько понравился представителям бренда, что мы договорились о дальнейшем сотрудничестве.
- ЗадачиТребовалось разработать новый визуальный стиль и сделать редизайн всех страниц сайта. Важно было улучшить взаимодействие пользователя на странице товара, в каталоге и корзине, уделив особое внимание мобильной версии.
- Основные проблемы• устаревший визуал
• неудобная навигация
• ошибки на пути пользователя
• отсутствие фильтрации в каталоге
• плохая адаптивность сайта
• отсутствие отзывчивости элементов - Моя рольБыла единственным дизайнером на проекте. Вела весь процесс от исследования до передачи макетов в вёрстку. Работала напрямую с фаундером бизнеса, маркетологом и командой разработки.
Скрин главной страницы до/после
Для просмотра дизайна передвигайте бегунок ← →
Исследование
UX-аудит
- ЗадачаПровести UX-аудит текущей версии сайта интернет-магазина: оценить структуру навигации, сценарии покупки и визуальное оформление ключевых страниц (главная, каталог, карточка товара, корзина).
- ЦельВыявить барьеры и ошибки в пользовательском пути, которые мешают совершению покупки, и предложить улучшения для упрощения взаимодействия с сайтом.
- Выводы• Карточка товара должна быть адаптирована под разные устройства, особенно мобильные
• Необходимо упростить путь пользователя на этапе добавления товара в корзину. Особенно на этапе выбора линз
• Прорисовать состояния для иконок корзины и личного кабинета
• Предусмотреть возможность корректировать свой заказ в корзине — убирать и добавлять товары и редактировать опции, касающиеся линз
• Предлагать дополнительные услуги и отображать бесплатные товары, которые идут по умолчанию к каждому заказу
• Все дополнительные оповещения должны быть прорисованы в стиле сайта, вовремя давать пользователю обратную связь и «говорить» на языке бренда
Архитектура
Карта сайта
На основе UX-аудита и конкурентного анализа я скорректировала карту сайта, уделив особое внимание структуре верхнего меню. Убрала повторы пунктов, перераспределила наполнение разделов, создала отдельный информационный раздел.
User flow
Выбор линз — один из самых сложных сценариев в онлайн-покупке оправ. И так как в ходе исследования выявились ошибки, было принято решение сделать отдельный User Flow для этого сценария.
Дизайн
Главная страница
Заказчику понравились тексты, которые я предложила в рамках учебного редизайна. Было решено остаться в том же tone of voice. Во втором экране разместили новый блок с карточками товаров-бестселлеров для помощи с выбором для новых посетителей.
Каталог
Внутри каталога была разработана новая фильтрация, которая позволила удобно сортировать товары как на ПК, так и на мобильных.
Карточка товара
Поработала структуру карточки, скорректировала путь выбора линз перед добавлением товара в корзину согласно новому User Flow.
Корзина
Оформление заказа разбили на несколько этапов. На странице оформления пользователь может добавить к своему заказу приятные мелочи — аксессуары и средства ухода.
Результаты
• Создан единый визуальный стиль для всего диджитал направления — сайт, социальные сети, рекламные материалы
• Глубина просмотра выросла на +0,9 страницы, а среднее время на сайте — на +15%, что указывает на рост вовлечённости пользователей
• Конверсия в покупку на мобильных устройствах увеличилась на 7,4%
• Ускорено создание новых макетов за счёт систематизации компонентов и создания UI-кита
• Упрощён сценарий выбора линз — исправлены UX-ошибки и сокращено количество шагов до покупки
• Глубина просмотра выросла на +0,9 страницы, а среднее время на сайте — на +15%, что указывает на рост вовлечённости пользователей
• Конверсия в покупку на мобильных устройствах увеличилась на 7,4%
• Ускорено создание новых макетов за счёт систематизации компонентов и создания UI-кита
• Упрощён сценарий выбора линз — исправлены UX-ошибки и сокращено количество шагов до покупки
*принадлежит корпорации Meta, которая признана в РФ экстремистской
Какой проект хотите посмотреть дальше?
