О проекте:
SmartMag — интернет-магазин техники и гаджетов, который начал путь как стартап в 2014 году. Сегодня это известная компания с тысячами клиентов по всей Украине, собственными пунктами выдачи заказов и курьерской доставкой в большинстве областных центров.
Задача: Создать современный, клиентоориентированный дизайн онлайн-магазина, заложить основу для его масштабирования, повысить конверсию и доход, а также усилить позиции бренда среди ТОП игроков рынка бытовой техники и электроники в Украине.
Переезд с платформы Хорошоп
Когда бизнес растет, функционала Хорошоп может не хватать. Поэтому для SmartMag мы разработали UX/UI под ключ и реализовали его на более гибкой платформе вместе с Linecore.
Основные этапы редизайна:
- Детальный UX анализ конкурентов
- Аудит старого сайта и сбор данных аналитики
- Работа над стилистикой — создание качественного UI дизайна
- Разработка UX дизайна на основе всех собранных инсайтов
UX анализ конкурентов: инсайты
Инсайт №1. Оптимальной является двухуровневая структура меню сайта: сверху — информация о компании, ниже - функциональные элементы. В каталоге товаров стоит предусмотреть распределение по брендам.
Инсайт №2. Лучше использовать от 5 до 16 экранов на главной странице — это позволяет сохранить фокус пользователя и не перегрузить интерфейс
Инсайт №3. В мобильной версии целесообразно презентовать каталог в виде бургер-меню.
А также добавлять отдельную кнопку «Каталог» на главной странице для быстрого доступа.
Инсайт №4. На странице выдачи товара кроме категорий реализовать сортировку по брендам и добавить блоки вроде «Просмотреть также», «Топ товаров» и «Просмотренные» — это поможет создать больше точек входа и улучшить навигацию.
Инсайт №5. На странице товара навигацию по основным разделам («Все о товаре», «Характеристики», «Отзывы») нужно фиксировать при скролле. Все кредитные предложения от банков стоит размещать в общем pop-up.
Работа над стилистикой
Осуществили редизайн логотипа и создали UI kit для целостного дизайна и дальнейшей самостоятельной поддержки сайта клиентом без потери айдентики.
Инсайт №4. На странице выдачи товара кроме категорий реализовать сортировку по брендам и добавить блоки вроде «Просмотреть также», «Топ товаров» и «Просмотренные» — это поможет создать больше точек входа и улучшить навигацию.
Инсайт №5. На странице товара навигацию по основным разделам («Все о товаре», «Характеристики», «Отзывы») нужно фиксировать при скролле. Все кредитные предложения от банков стоит размещать в общем pop-up.
Работа над стилистикой
Осуществили редизайн логотипа и создали UI kit для целостного дизайна и дальнейшей самостоятельной поддержки сайта клиентом без потери айдентики.
Мы стремились создать сайт, которым удобно пользоваться в любом месте и в любой ситуации — от очереди в магазине до ванной. Интерфейс должен был быть адаптивным, интуитивным и легко читаемым на любом экране.
Для этого мы сделали кнопки заметными и удобными, использовали контрастные цвета и понятные иконки, обеспечили мгновенную обратную связь и избежали случайных нажатий благодаря оптимальному расстоянию между элементами.
Результаты работы
Уже через месяц после запуска сайта на новой платформе получить такие результаты:
- мобильный трафик вырос на 42%, конверсия с мобайла — на 69%, а просмотры страниц на сеанс — на 96%.
- общая конверсия выросла на 26%, доход — на 81%, а показатель выходов снизился на 69%, что свидетельствует об улучшенном UX и эффективном привлечении трафика.
