Гнучкі UX-шаблони для SoloMono: один конструктор — багато сценаріїв

Шаблони для конструкторів сайтів, легкість та юзабіліті? Чи можна об’єднати ці поняття? А якщо мова про різні ніші?

Коли SoloMono, платформа для створення інтернет-магазинів, вирішила оновити свої шаблони, мова йшла не просто про редизайн. А про UX-шаблони для вирішення реальних бізнес-задач та потреб користувачів незалежно від ніші, типу бізнесу чи масштабу.

І саме для цього команда Турум-бурум та SoloMono об’єдналися. Що у нас вийшло? Розповідаємо далі.

Проєкт, цілі та задачі

SoloMono — українська платформа, що допомагає компаніям будь-якого масштабу створювати сайти та інтернет-магазини. Чи то оренда готового магазину, чи придбання свого, або розробка під ключ, міграція сайту, або SEO-просування, SoloMono може все це.

«Ми хочемо зробити продукт, який відчувається як 2030-й, а не 2020-й». 

Саме з таким запитом звернулась до нас компанія. І саме ця фраза стала відправною точкою проєкту. 

Тож завдання стояло масштабно: оновити UX, структуру й функціональність шаблонів, зберігши простоту використання для бізнесів і зручність кастомізації для розробників.

Потрібно було опрацювати модулі ecommerce та запропонувати прототипи, з максимальною функціональною складовою, без прив’язки до технічної сторони.

Так народилась концепція «універсального шаблону-конструктора», який можна масштабувати, персоналізувати й використовувати для будь-якого онлайн-бізнесу.

Від дослідження до прототипів: як ми робили та що зробили

Почали з аналітики: вивчили поточну структуру шаблонів і зрозуміли, для яких бізнесів вона працює, а де потребує змін.

Щоб закласти міцний фундамент, провели UX-бенчмаркінг: проаналізували Shopify, Wix, Хорошоп та інші платформи. Це допомогло підтвердити гіпотези й визначити, як саме підсилити SoloMono.

Опрацювали ключові eCommerce-модулі: головну сторінку, список товарів, сторінку товарів, пошук, кошик, процес оформлення замовлення (чек-аут), авторизацію, кабінет користувача та контентні сторінки. Прототипи розроблювали за принципом mobile-first, враховуючи різні розміри екранів та розділові здатності.

Кожен елемент мав бути гнучким і масштабованим, щоб підходив для різних ніш, від fashion до електроніки, та враховував специфіку і B2C, й B2B-сценаріїв, і навіть dropshipping.

Навігація, щоб легко орієнтуватись з першого дотику

Навігація сайту має бути зрозумілою, швидкою та адаптивною до структури бізнесу, адже від неї залежить, наскільки швидко користувач знайде потрібне.

Для SoloMono ми створили модульну систему навігації, яка легко налаштовується під різні типи проєктів: від невеликих нішевих магазинів до масштабних eCommerce із сотнями категорій.

Для мобільних користувачів зробили фіксоване меню внизу екрана, щоб основні дії завжди були під великим пальцем.

Шапка сайту при скролі не зникає, а мінімізується, залишаючи тільки найнеобхідніше: логотип, пошук і меню.

Передбачили кілька варіантів хедерів і футерів, щоб шаблон підлаштовувався під потреби та контент.

У межах одного шаблону можна обрати потрібний формат: класичне верхнє меню, «бургер» для мобільних пристроїв або багаторівневе випадаюче меню для великих каталогів.

Таким чином зробили навігацію гнучкою та керованою — бізнес сам вирішує, які елементи вмикати, а користувач отримує просту й логічну структуру, незалежно від ніші чи масштабу магазину.

Головна сторінка: модульність та юзабіліті

Головна сторінка — це перше враження і точка входу, яка має працювати для будь-якого типу бізнесу. Її задача — не просто вразити, а проінформувати, зацікавити та повести далі сайтом.

Для SoloMono ми розробили головну сторінку сайту, яку можна скласти як конструктор, обираючи блоки, порядок, стилі та пріоритети. Кожен блок можна легко активувати чи вимкнути: банери, категорії, рекомендації, акційні товари, бренди, відгуки чи контентні секції.

Пропрацювали різні сценарії подорожі користувачів та продумали точки входу для різних ніш, щоб кожен бізнес міг будувати власну логіку взаємодії. Так, наприклад, для fashion — це візуальний акцент і великі фото, для магазинів електроніки — структура й характеристики, для B2B — інформативна вітрина з CTA та блоками довіри.

Завдяки цьому головна сторінка не просто красива — вона адаптується під цілі бізнесу.

Список товарів (PLP): швидкість вибору без зайвих кроків

Сторінка списку товарів (product listing page, PLP) — не просто каталог, а вітрина, яка має показати, зацікавити й допомогти знайти потрібний товар.

Ми пропрацювали два варіанти відображення фільтрів:

• горизонтально зверху — для ніш, де головну роль відіграє візуал і параметрів небагато (наприклад, fashion);
• збоку зліва — для категорій із великою кількістю характеристик, як-от електроніка чи будівельні товари, де важливо максимально звузити вибір до релевантних товарів.

Усе це налаштовується в межах одного шаблону і без додаткових розробок.

Фільтри й сортування залишаються на виду навіть під час скролу, а кнопки «у кошик», «в обране» та у «порівняння» розміщені прямо на прев’ю товару, щоб скоротити шлях від перегляду до покупки.

Так ми зробили PLP сторінкою, яка не просто показує товари, а допомагає користувачу знайти «той самий» продукт швидко і навіть покласти у кошик без додаткових кроків.

{{block}}

Сторінка товару (PDP): деталі та візуал

Це сторінка, де користувач вирішує чи підходить йому цей товар, чи ні.

Ми побудували сторінку товару (PDP, product detail page) навколо головного принципу: усе, що допомагає прийняти рішення, має бути поруч.

• Кнопка «Купити» ніколи не зникає, навіть під час скролу, щоб користувач міг додати товар у кошик з будь-якої точки на сторінці;
• «Хлібні крихти» показують шлях, щоб не загубитися в глибоких каталогах.
• Вкладки з описом, характеристиками й відгуками надають усю необхідну інформацію про товар;
• Блок з ціною, умовами доставки, гарантією й варіантами оплати розмістили саме там, де користувач приймає рішення, а поруч бонуси або програма лояльності, які підсилюють мотивацію зробити покупку.

Передбачили кілька варіантів PDP. Не як окремі дизайни, а як сценарії для різних типів бізнесів: для когось важливий візуал, для когось характеристики, а десь відіграє роль соціальний доказ (відгуки, рейтинги).

Шаблон дозволяє гнучко перемикатись між цими акцентами, адаптуючись під нішу без втрати структури й логіки.

У результаті сторінка товару стала універсальним інструментом продажів, зрозумілим для користувача й гнучким для бізнесу.

Пошук: для тих, хто вже знає, що шукає

Пошуком користуються ті, хто точно знає, що йому потрібно. Тому головне завдання — допомогти знайти потрібне максимально швидко та з мінімальними зусиллями.

Ми зробили пошук розумним і зручним, заклавши розширений функціонал:

• Автодоповнення та підказки з’являються ще під час введення запиту;
• Результати одразу групуються за категоріями, брендами й товарами;
• Можливість голосового пошуку та пошуку по зображеннях, якщо текст вводити незручно або не знаєте назву товару;
• Історія пошуків і рекомендації. Платформа запам’ятовує попередні запити користувача та допомагає завершити покупку, якщо він повернувся пізніше.

Кошик: коли рішення стає покупкою

Кошик — це не просто технічна сторінка. Це момент, коли користувач або завершує покупку, або йде. Тому ми зробили його максимально простим, інформативним і безшовним.

Продумали мінікошик, який відкривається поверх сторінки без переходу на окрему сторінку. Це максимально функціональний поп-ап, де користувач без зусиль може змінити кількість товарів, видалити позицію, подивитися суму чи перейти до оформлення замовлення.

Також передбачені підказки накшталт додати товар для безкоштовної доставки, або скористатись бонусами, якщо вони доступні.

А ще інтегрували upsell та кроссел блоки, які працюють не як нав’язування, а логічно доповнюють вибір. Наприклад, додати чохол до смартфона або фільтр до кавомашини.

Так кошик стає містком між наміром і дією, і не зупинкою перед оплатою, а природним продовженням шляху до покупки.

Процес оформлення замовлення (чек-аут): мінімум кроків до покупки

Якщо користувач дійшов до чекауту, то тут головне завдання не завадити йому купити.

Створили єдиний універсальний сценарій оформлення замовлення, який працює для будь-якого бізнесу від невеликого магазину косметики до B2B-постачальника.

Уся інформація розміщена на одному екрані, без перевантаження й зайвих переходів:

1. Доставка. Кур’єр, самовивіз, відділення, поштомат — користувач бачить усі варіанти одразу, з орієнтовними строками й вартістю. Система підказує найближчі варіанти, зберігає попередні адреси й дозволяє швидко повторити замовлення.

2. Оплата: онлайн, післяплата, бонусами, сертифікатом або частинами — будь-який сценарій передбачено. Підтримуються Apple Pay, GPay, PayPal, Monobank, LiqPay, Stripe — усе інтегровано, усе в один дотик.

3. UX для B2B і B2C:

• Для B2C це мінімум полів, чітка структура, миттєве підтвердження.
• Для B2B ми передбачили власні флоу: виставлення рахунків, гуртові замовлення, швидке підтвердження.

Користувач бачить підсумок замовлення, доставку й оплату і не має потреби повертатись на крок назад.

Авторизація: без паролів і перешкод

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

Тому оптимізували цей процес та передбачили авторизацію за номером телефону та одноразовий код (OTP, One-Time Password) або через Google чи Apple-логін тощо. 

А для постійних клієнтів система автоматично підтягує збережені дані: адреси, карти, налаштування.

Так ми зробили логін природною частиною подорожі користувача.

Кабінет: формуємо лояльність

Кабінет користувача — це не архів замовлень, а інструмент, який не тільки допомагає користувачу керувати своїми замовленнями, але й утримує клієнта після покупки.

Тому заклали функціонал, який передбачає різні сценарії для різних аудиторій:

• Для B2B — гуртові замовлення, шаблони повторів, керування кількома отримувачамb
• Для B2C — історію покупок, бонуси, персональні рекомендації.

Усе це не просто функції, а продумані UX-рішення, що підтримують користувача навіть після покупки.

{{block}}

Результати: то що отримали SoloMono?

Сьогодні бізнесу потрібні не просто шаблони, а гнучкі системи, що підлаштовуються під користувача й задачі.

Ми створили універсальну систему шаблонів, яка може покрити потреби будь-якого бізнесу від fashion до B2B, від стартапу до маркетплейсу. Усе на основі аналітики, UX-бенчмаркінгу та реальних сценаріїв користувачів.

Результат:

• Модульна архітектура, яку легко адаптувати під будь-який бізнес;
• Mobile-first логіка й швидші сценарії покупки;
• Врахування локальних оплат, доставок і SEO-вимог;
• Платформа, готова до розвитку без технічних обмежень.

SoloMono отримала систему, яка виглядає сучасно, працює швидко й масштабується без втрати UX. А бізнеси — готове рішення, що допомагає продавати більше.