SaaS · E-Commerce · AI
AI-конструктор сайтів для малого бізнесу
AI-конструктор сайтів для малого бізнесу. З етапу концепції я відповідала за e-commerce, live-редагування, онбординг і дизайн-систему, на якій стоять 2000 шаблонів, а AI-візард, перевірений A/B/C-тестами, подвоїв залученість клієнтів.
- Країна клієнта
- Канада
- Платформа
- Веб
- Команда
- 25 людей · 6 продуктових дизайнерів
- Тривалість
- 1 рік 5 місяців · 2021–2022
Огляд
AI-конструктор сайтів для малого бізнесу: шаблони, живе редагування, магазин, маркетинг, бронювання, блог, події, відеокурси.
Команда
Я приєдналася на стадії концепту, одна з шести продуктових дизайнерів у команді з ~25 людей.
Що я вела
E-commerce, живе редагування, відгуки, онбординг і дизайн-система.
Результат
AI-візард подвоїв залученість клієнтів, і це підтверджено юзабіліті- та A/B-тестуванням.
Контекст
01
Продукт
Конструктор, де важке робить AI: візард збирає персоналізований сайт за хвилини, і все лишається редагованим: магазин, маркетинг, бронювання, блог, події, відеокурси, файловий менеджер.
02
Користувачі
Власники малого бізнесу, фрилансери та сервісні підприємці: б'юті, велнес, рітейл, події, консалтинг, креативні сфери. Їм потрібен сайт, а не курс із дизайну.
03
Ринок
У 2020–21 конструктори не мали AI-генерації, а жорсткий лейаут «поля зліва / прев'ю справа» заганяв користувачів у рамки. Ми проаналізували онбординг 20 конкурентів, щоб знайти прогалину.
Підхід
Дослідження
20 онбордингів конкурентів, JTBD і карти емпатії.
Гіпотеза
Ставка візарда: люди не хочуть будувати сайт, хочуть редагувати готовий.
Прототип і тест
Юзабіліті на кожному кроці; A/B/C формату питань візарда.
Ключова гіпотеза візарда була такою: люди не хочуть створювати сайт, вони хочуть редагувати вже зроблений для них. Вона задала напрям усьому іншому.
Процес
Ключова функціональність
01
Онбординг з AI-візардом
Проблема
Ринок конструкторів був перенасичений, і вирізнитись було складно, а найслабшою ланкою був сам візард: питань було забагато, тож люди не доходили до кінця, а відвали показували, що частина заходить із телефона, де візард не працював зовсім.
Гіпотеза
Якщо візард за кілька хвилин збере три персоналізовані варіанти сайту з мінімальної кількості питань, кількість клієнтів подвоїться, бо люди не хочуть будувати сайт, вони хочуть редагувати вже готовий.
Рішення
Короткий квіз: мінімум питань, готові варіанти відповідей. Після нього візард генерує три персоналізовані варіанти сайту за хвилини. Обираєш один; усе лишається редагованим. Повноцінно працює з мобільного.
Три варіанти: особисто, але не паралізує.
Налаштування застосунків: той самий стиль питань для магазину і блогу
Той самий флоу на мобайлі: питання, локація і готовий сайт
Результат
Гіпотеза підтвердилась: після запуску візарда залученість клієнтів зросла вдвічі.
×2
Залученість клієнтів після візарда
20
Онбордингів конкурентів проаналізовано
3
Варіанти на виході: найпрактичніша кількість
Що змінили юзабіліті- та A/B/C-тести
Забагато питань: користувачі не доходили до кінця.
Скоротила до мінімуму питань із готовими варіантами відповідей замість вільного вводу.
Люди заходили з телефона й не знаходили мобільної версії.
Весь візард перебудувала так, щоб його можна було пройти з телефона.
Важливі кроки пропускали: навігацію по питаннях, кнопки «назад» і «пропустити».
Назвала кожен крок, перенесла кнопки керування вниз сторінки й змінила їхній розмір.
Ніхто не знав, який формат питань утримує увагу, а команда ставила на відео.
Три однакові флоу в A/B/C тесті: відео програло (його пропускали), текст другий, ілюстрації виграли.
02
Редактор і живе редагування
Проблема
Усі конструктори на ринку ставили налаштування зліва, а прев'ю справа. Флоу був незрозумілий, користувачі губилися між двома половинами, а шаблон можна було змінити рівно настільки, наскільки дозволяла панель.
Гіпотеза
Якщо перенести редагування всередину самого шаблону, з ховер-налаштуваннями на кожному елементі, користувач зрозуміє конструктор без інструкції, а шаблони стануть повністю кастомізовними.
Рішення
Налаштування по ховеру на кожному елементі замінили жорсткий розділений лейаут: користувачі змінюють те, що бачать, там, де бачать, а шаблони стали повністю кастомізованими.
Редагуєш те, що бачиш, там, де бачиш, і це стало перевагою продукту.
Результат
Живе редагування стало головною перевагою продукту над конкурентами.
03
E-commerce
Проблема
Щоб продавати онлайн, власник малого бізнесу має увімкнути стор і налаштувати продуктові та колекційні сторінки, кошик, чекаут, вішліст, способи оплати й доставки, знижки, купони та промо, і все це без розробника й без документації.
Гіпотеза
Якщо весь магазин (сторінки, кошик, чекаут, оплата, доставка, знижки) налаштовується всередині того самого конструктора, малий бізнес зможе почати продавати без розробника.
Рішення
Повноцінний магазин усередині конструктора: сторінки товарів із гнучкими послідовностями блоків, сторінки колекцій із фільтрами й сайдбаром, кошик і вішліст, налаштування оплат.
Сторінка є послідовністю блоків.
Сторінки колекцій: фільтри чи бічна панель і скільки товарів у ряду
Товари, замовлення й клієнти всередині білдера
04
Чекаут, що заповнюється сам
Проблема
Дослідження чекаутів показало скрізь те саме: що довша процедура, то більше покупців відпадає посеред неї.
Гіпотеза
Якщо дані оплати й доставки підтягуються з самого сайту, покупцеві лишається підтвердити, і до кінця дійде більше людей.
Рішення
Дослідження показало: довгі чекаути вбивають конверсію, тож дані оплати й доставки підтягуються з сайту автоматично, і покупець підтверджує, а не друкує.
Довгий чекаут вбиває конверсію, тому покупець підтверджує, а не вводить.
Результат
Покупець підтверджує, а не вводить.
05
Доставка, знижки та бандли
Проблема
Доставка мала працювати для будь-якого типу бізнесу, з тарифами залежно від країни та регіону адреси, а купони вмикатися в кілька кліків, а не налаштовуватися.
Гіпотеза
Якщо тарифи задаються за країною й регіоном, а купони вмикаються в кілька кліків, налаштування магазину перестає бути роботою для розробника.
Рішення
Вартість доставки за країною та регіоном для будь-якого типу бізнесу; купони вмикаються за кілька кліків на будь-який товар чи колекцію; промо-бандли з рекомендаціями схожих товарів.
Бандли підказують, що купити разом, прямо на сторінці товару.
Купони: застосовуються до окремих товарів чи цілої колекції за кілька кліків
Промо-бандли: налаштування і блок «часто купують разом» на сайті
06
Дашборд і налаштування
Проблема
Після запуску сайту власник лишався сам на сам із десятком розділів і не знав, з чого почати.
Гіпотеза
Якщо стан сайту й усі інструменти зібрані в одному центрі, малий бізнес керуватиме сайтом без адміністратора.
Рішення
Центр керування для власника сайту: стан сайту, швидкий доступ до кожного інструмента й налаштування, що тримають малий бізнес на ходу без адміністратора.
Малий бізнес веде сайт без адміністратора.
Налаштування сайту
07
Маркетинг та аналітика
Проблема
Просування жило в окремих сервісах: розсилки в одному, аналітика в іншому, посилання в третьому.
Гіпотеза
Якщо розсилки, кампанії та їхня аналітика будуть усередині конструктора, власник не муситиме збирати стек із трьох підписок.
Рішення
Розсилки та email-кампанії з вбудованою аналітикою результатів, плюс інтеграції та соцпосилання: просування, не виходячи з конструктора.
Просування, не виходячи з конструктора.
Керування списками розсилки
Конструктор email-кампаній
Інтеграції та соцпосилання
08
Файловий менеджер
Проблема
Зображення й документи заливали по одному просто в сторінку, тож той самий файл існував у п'яти копіях.
Гіпотеза
Якщо дати одну бібліотеку на весь сайт, контент перевикористовуватимуть, а не завантажуватимуть знову.
Рішення
Завантаження, зберігання й організація контенту у вбудованому файловому менеджері: зображення, документи й медіа готові лягти на будь-яку сторінку.
Одна бібліотека для медіа всіх сторінок.
09
Контент і блог
Проблема
Щоб вести блог, бізнес ішов на окрему платформу, і сайт із блогом переставали бути одним продуктом.
Гіпотеза
Якщо публікувати в тому самому редакторі, що й сайт, блог лишиться частиною сайту, а не сусідом.
Рішення
Блоги, статті та динамічний контент-хаб: публікації в тому ж редакторі, що й сам сайт.
Публікації живуть у тому ж редакторі, що й сайт.
10
Бронювання та записи
Проблема
Сервісні бізнеси збирали записи в діректі й по телефону, а сайт у цьому не брав участі.
Гіпотеза
Якщо запис відбувається просто на сайті, бізнес перестане губити клієнтів між вкладками.
Рішення
Розклад і бронювання для сервісного бізнесу: записи приймаються прямо через сайт.
Сервісний бізнес приймає записи прямо на сайті.
11
Коментарі та відгуки
Проблема
Кінцеві споживачі рідко лишають відгуки самі, і бізнес втрачає потенційних клієнтів через цю відсутність зворотного зв'язку.
Гіпотеза
Якщо система попросить відгук одразу після завершеної покупки, бізнес отримає ті відгуки, яких люди не лишають самі.
Рішення
Покупці рідко лишають відгуки самі, тому система збирає фідбек автоматично після завершених транзакцій і показує його на сайті.
Люди рідко пишуть відгуки самі, тому їх просять після покупки.
Коментарі на вітрині
Результат
Відгуки збираються автоматично після завершеної транзакції.
12
2000 шаблонів і 300 стилів
Проблема
Кожен сегмент бізнесу мав знайти щось доречне з першого дня, тож продукту була потрібна величезна база шаблонів, але у 2021 AI-генерації для цього ще не існувало. Кожну палітру, шрифтову пару й стильову варіацію налаштовували руками та зв'язували з елементами інтерфейсу.
Гіпотеза
Якщо зібрати 2000 шаблонів на 300 перевірених парах шрифтів і палітр, кожен сегмент бізнесу знайде доречний старт з першого дня.
Рішення
Аналіз категорій бізнес-сайтів визначив 2000 тем шаблонів; інструмент швидкого створення і 50 фрилансерів їх виробили на 300 вручну зібраних парах шрифтів і палітр. 50+ шаблонів я зробила сама.
Пекарня
2000
Тем шаблонів визначено за аналізом категорій
300+
Шрифтових пар, палітр та іконок налаштовано вручну
50+
Шаблонів зробила особисто
Ключові рішення
01
Візард: три варіанти, мінімум питань
Проблема
На переповненому ринку конструкторів користувачі кидають довгі налаштування: з великою кількістю питань люди просто не доходили до кінця.
Гіпотеза
З візардом кількість клієнтів подвоїться, бо люди не хочуть створювати сайт, вони хочуть редагувати вже зроблений для них.
Рішення
Скоротила флоу до мінімуму питань із готовими варіантами відповідей; дала назву кожному кроку; перенесла кнопки керування вниз; адаптувала весь візард під мобільний, коли відпадіння показали користувачів із телефонів.
Підтвердження
Підтверджена гіпотеза: з візардом залученість клієнтів подвоїлася.
02
Ілюстровані питання перемогли відео, а наша ж ставка програла
Проблема
Початкова гіпотеза казала, що відео-питання зберуть більше уваги й трекшену.
Гіпотеза
Відео-питання зберуть більше уваги й трекшену, ніж текст.
Рішення
Зібрали три ідентичні флоу візарда, що відрізнялися лише форматом питань (відео, текст, ілюстрації), і прогнали A/B/C-тест.
Підтвердження
Відео останнє (користувачі його гортали), текст другий, ілюстрації перемогли. Програла наша ж гіпотеза: вирішив тест, а не смак.
03
Редагування по ховеру замість розділеного лейаута
Проблема
Флоу конструктора магазину «налаштування зліва, прев'ю справа» плутав користувачів і обмежував можливості шаблонів.
Гіпотеза
Якщо редагування відбувається в самому шаблоні, користувачі зрозуміють конструктор без інструкцій, а шаблони стануть повністю кастомізованими.
Рішення
Перенесла редагування в сам шаблон: налаштування по ховеру на кожному елементі, редагування на місці.
Підтвердження
Стало конкурентною перевагою продукту: повністю кастомізовані шаблони і редагування, що відчувається як дотик до самого сайту.
Результат
- Залученість клієнтів ×2 після релізу візарда
- 2000 шаблонів на 300 вручну зібраних стильових парах
- Редагування по ховеру стало конкурентною перевагою продукту
Магазин, бронювання, блог, події та відеокурси: усе вийшло в одному конструкторі.
Наступний кейс
AI-застосунок для догляду за шкірою та велнесу
Мобільний застосунок, що поєднує AI-аналіз шкіри з підключеним лазерним пристроєм і добавками. Я прийшла в живий продукт senior-дизайнеркою і відповідаю за його AI-шар (щоденні інсайти, пояснення результатів шкіри, звіти самопочуття), описаний як правила, за якими будує команда.
Переглянути кейс