Гибкие UX-шаблоны для SoloMono: один конструктор — множество сценариев

Шаблоны для конструкторов сайтов: простота и юзабилити? Можно ли объединить эти понятия? А если речь идет о разных нишах?

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

И именно для этого команды Турум-бурум и SoloMono объединились. Что у нас получилось? Рассказываем далее.

Проект, цели и задачи

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

«Мы хотим создать продукт, который ощущается как 2030-й год, а не 2020-й». 

С таким запросом к нам обратилась компания. И именно эта фраза стала отправной точкой проекта. 

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

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

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

От исследования к прототипам: как мы работали и что было сделано

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

Чтобы заложить прочный фундамент, провели UX-бенчмаркинг: проанализировали Shopify, Wix, Хорошоп и другие платформы. Это помогло подтвердить гипотезы и определить, как именно усилить SoloMono.

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

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

Навигация, чтобы легко ориентироваться с первого касания

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

Для 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 — оптовые заказы, шаблоны повторных заказов, управление несколькими получателями;
• Для B2C — история покупок, бонусы, персональные рекомендации.

Всё это — не просто функции, а продуманные UX-решения, поддерживающие пользователя даже после совершения покупки.

{{block}}

Результаты: что получила SoloMono?

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

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

Результат:

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

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