Увеличение дохода сайта SmartMag на 81%: создание дизайна под ключ и переезд на новую платформу

Что делать, когда старые решения перестали работать и стоит ли прибегать к радикальным изменениям? Как переход с платформы Хорошоп на более гибкую систему и создание UX/UI дизайна под ключ способствовали увеличению конверсии сайта SmartMag на 26%, а дохода бизнеса на 81% всего за месяц после запуска? В статье делимся 5 решениями по оптимизации интерфейса сайта ниши электроники.

SmartMag: отправная точка

SmartMag — успешный онлайн магазин гаджетов и бытовой техники, который начал свою историю в 2014 году как стартап. Сегодня у компании тысячи клиентов из разных уголков Украины, собственные точки выдачи и даже курьерская доставка в большинстве областных центров.

За 10 лет своей деятельности бизнес прошел большой путь и набрал немалые обороты, однако столкнулся с проблемой — платформа Хорошоп перестала соответствовать новым целям и задачам е-коммерс. Отсутствие интеграции платежных сервисов, невозможность вносить изменения и улучшать интерфейс — все это ограничивало дальнейшее развитие и масштабирование SmartMag.

Поэтому владельцы бизнеса обратились в студию Турум-бурум с амбициозными целями:

• разработать современный и клиентоориентированный дизайн онлайн магазина;
• заложить фундамент для развития и масштабирования интернет-магазина;
• увеличить конверсию и обеспечить рост дохода; 
• войти в ТОП интернет-магазинов Украины по продаже бытовой техники и электроники.

Работа над кейсом SmartMag: 5 ключевых решений и важные инсайты

Удалось ли нам достичь поставленных целей? Спойлер — да. Однако каким образом? Ниже — топ 5 решений, которые стали залогом успеха кейса SmartMag. 

1. Переезд с платформы Хорошоп: закладываем фундамент для масштабирования бизнеса

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

Если вы владелец стартапа или небольшого бизнеса, Хорошоп будет отличным решением, которое позволит быстро и легко запустить онлайн магазин. Однако, когда бизнес начинает расти и развиваться, функционала этой платформы может стать недостаточно, чтобы идти в ногу с запросами клиентов. Именно это случилось и с сайтом SmartMag.

План был таков: наши специалисты разрабатывают клиентоориентированный UX/UI дизайн под ключ для SmartMag с учетом текущих целей бизнеса и потребностей пользователей, далее совместно с нашими партнерами из Linecore реализуют его на гибкой платформе. 

Что дает такой шаг владельцу бизнеса?

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

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

2. UX анализ конкурентов: определяем must-have функции

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

Мы сосредоточились на выявлении:

• Точек паритета — основных функций, которые есть во всех продуктах конкурентов, и удовлетворяют базовые потребности пользователей;‍
• Точек дифференциации — преимущест, отличающих веб-сайт от других,  и служащих основной причиной, почему пользователи выбирают именно этот веб продукт.

Весь массив данных мы структурировали, выделили самое главное:

1. Меню и каталог:

• оптимальной является двухуровневая структура шапки с информацией о компании на первом и функциональными элементами на втором уровне;
• в каталоге товаров стоит предусмотреть распределение по брендам — это упростит поиск релевантного товара для пользователей.

2. На главной странице:

• количество экранов на главной странице должно быть в диапазоне от 5 до 16, чтобы не перегружать интерфейс и пользователей;

• в мобильной версии сайта лучше презентовать каталог в виде бургер-меню, а также добавить кнопку "Каталог" на главную страницу сайта.

3. На странице выдачи товара:

• кроме распределения по категориям стоит также предусмотреть сортировку по брендам;
• стоит добавить дополнительные разделы как "Просмотреть также", "Топ товаров", "Просмотренные товары", чтобы создать дополнительные точки входа.

4. На карточке товара:

• навигацию по основным разделам ("Все о товаре", "Характеристики", "Отзывы") нужно фиксировать при скролле, чтобы предотвратить распыление внимания пользователей;
• все кредитные предложения от банков стоит размещать в общем pop-up, с возможностью выбрать количество доступных платежей и размер ежемесячного взноса, чтобы покупатели не чувствовали растерянности на этом этапе.

5. Страница сравнения товаров: 

• фото товаров с указанием цены и кнопкой "Купить" должны быть фиксированными при прокрутке страницы вниз;
• максимальное количество товаров для качественного горизонтального отображения — 6, а для вертикального — 3 параметра.

Благодаря этим и другим инсайтам мы определили, какие именно фичи создают комфортную среду для онлайн покупателей и обеспечивают для них комфортный пользовательский опыт. Ведь когда речь идет о е-коммерс, даже малейшие мелочи имеют значение, а мы стремились выбрать только лучшие UX/UI решения для обновленного сайта SmartMag.

3. Работа над стилистикой: увеличиваем узнаваемость бренда

Пользователям достаточно около 50 миллисекунд (то есть 0,05 секунды), чтобы сформировать первое впечатление о вашем сайте и решить: остаться на нем или уйти. А значит — без качественной и "вкусной" стилистики вы будете терять потенциальных клиентов. 

Поэтому работая над кейсом SmartMag, мы уделили большое внимание созданию качественного UI дизайна, в частности:

1. Осуществили редизайн логотипа

Если людей встречают по одежде, то бренд — по логотипу. Мы заметили, что предыдущая версия лого бренда не вызывала ассоциаций, занимала много места и была несколько устаревшей, поэтому предложили исправить это.

Учитывая большую конкуренцию в нише заказчика, мы хотели сделать акцент на запоминании логотипа путем возникновения ассоциации у пользователя с чем-то ему уже знакомым. Поэтому обыграли знакомое большинству слово "Smart" и использовали прием номограммы, заменив букву А на иконку play. И вот, что у нас получилось:

2. Разработали UI kit

Для обеспечения целостности и последовательности дизайна, а также чтобы в будущем клиент мог сам поддерживать дизайн без потери айдентики и стиля, мы разработали детальный UI-kit.

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

Кстати, знали ли вы, что использование синих или темно-синих оттенков в дизайне е-коммерс в нише электроники является стратегическим приемом для повышения вовлеченности пользователей? Да, синий часто ассоциируется с надежностью, профессионализмом и технологическим прогрессом — теми качествами, которые резонируют с потребителями ниши электроники.

{{block}}

4. Создание UX дизайна: даем пользователям то, в чем они нуждаются

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

Как следствие — пользователям требуется больше времени для принятия решения о покупке: они детально изучают характеристики товара, сравнивают предложения между собой, делают списки с избранными товарами, активно используют фильтры поиска, а также часто добавляют товар в корзину, чтобы вернуться за ним позже.

Поэтому, нашей задачей было сделать интерфейс, в котором пользователям было бы легко и быстро выполнять целевые действия в интерфейсе. Для этого мы исследовали все user flow и проанализировали данные аналитики предыдущего дизайна сайта, определили ключевые посадочные страницы, недостатки и точки роста интерфейса. Большое внимание уделили изучению тепловых карт, которые позволили нам определить как пользователи взаимодействуют с сайтом, на какие элементы они кликают чаще всего, а какие наоборот — вызывают у них растерянность и непонимание следующих шагов. 

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

Поэтому имея инсайты аналитики, а также результаты UX анализа конкурентов, мы:

1. Добавили на главную страницу блоки социального доказательства, а также акцентные баннеры и качественные изображения товара, чтобы подчеркнуть экспертность магазина и увеличить доверие пользователей к нему. Ведь 49% потребителей доверяют отзывам в Интернете не меньше, чем личным рекомендациям друзей и родных. 

2. Презентовали на странице товаров всю необходимую информацию для принятия решения о покупке: важные характеристики товаров, условия обмена и доставки, блок с отзывами и тому подобное. Таким образом мы держим внимание пользователя на одной странице и минимизируем шансы, что он покинет ее и больше не вернется.

3. Максимально детализировали фильтры поиска и разместили их по популярности для быстрой навигации и поиска релевантного товара пользователями.

4. Проработали страницу сравнения товаров, позволив пользователям добавлять товары даже на этом этапе, а также отображать только отличия товаров для экономии времени потенциальных клиентов.

5. Сделали информативное превью товара, добавив в него краткое описание ключевых характеристики товара, доступную цветовую палитру, а также кнопки "Добавить в избранное", "Сравнить" и "Добавить в корзину", что способствует увеличению продаж.

Другими словами — мы разработали дизайн сайта, который создает условия для приятного онлайн шопинга и не требует от пользователей лишних усилий и времени.  Сайт SmartMag не содержит случайных блоков или элементов — все UX решения основаны на данных аналитики, анализа конкурентов и нашем опыте. Вместо слов предлагаем вам оценить его самостоятельно

5. Mobile-first подход: адаптируем сайт для мобильных устройств

По данным Statista, в 2024 году примерно 68% всех мировых онлайн заказов было сделано со смартфонов. Это четко свидетельствует о том, что успешный онлайн-бизнес сегодня невозможен без обеспечения качественного пользовательского опыта на мобильных устройствах.

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

Для этого мы:

• сделали кнопки на превью товара визуально заметными, чтобы пользователи могли быстро взаимодействовать с ними;
• обеспечили достаточный размер кнопок и расстояние между ними, чтобы исключить случайные нажатия;
• использовали контрастные цвета и понятные иконки, сделав их визуально заметными и интуитивно понятными;
• позаботились, чтобы пользователи получали мгновенную обратную связь после взаимодействия с элементами сайта: изменение цвета кнопки, pop up с оповещением об успешной операции.
  

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

Результаты работы над кейсом SmartMag

Все в этом мире меняется: тренды, предпочтения, запросы клиентов. Поэтому продуманный UX/UI это важно, но если вы не позаботитесь о функциональной платформе, позволяющей легко вносить изменения в интерфейс, — со временем дизайн потеряет свою эффективность, а ваши вложения обесценятся.

Этот кейс — пример проекта под ключ, в котором Турум-бурум разработал UX/UI дизайн, а наш партнер Linecore — воплотил все наши идеи в жизнь. Для оптимизации времени наши команды работали параллельно над разными задачами и при этом слаженно, как один механизм. На всех этапах работы мы тесно сотрудничали с владельцами бизнеса, согласовывая и обсуждая этапы.  

Все это позволило нам уже через месяц после запуска сайта на новой платформе получить такие результаты:

• мобильный трафик увеличился на 42% (пользователи) и 47% (сеансы);
• количество просмотренных страниц за сеанс в мобайл выросло на 96%, а средняя продолжительность сессии — на 19%
• общее количество пользователей выросло на 30%, а количество сеансов — на 37%, что свидетельствует об увеличении трафика;
• средняя продолжительность сессии выросла на 15%, что указывает на увеличение заинтересованности пользователей;
• конверсия мобильного трафика выросла на 69%;
• общий показатель конверсии вырос на 26%, а общий доход компании — на 81%, что указывает на эффективное привлечение трафика и улучшение пользовательского опыта;
• общий показатель выходов снизился на 69%, что говорит об улучшенной навигации и UX сайта. 

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

А мы всегда с радостью поможем воплотить все ваши амбиции в жизнь, ведь ваш успех = наш успех!

Также полезные материалы по теме:

• Исследование юзабилити сайтов ниши электроники: что влияет и как улучшить?
• Опрос украинского ритейла агентством Турум-бурум: как онлайн бизнес занимается интерфейсами в 2024 году
• Юзабилити аудит и донастройка GA4