Збільшення доходу сайту 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 для Lenovo‍

‍

‍