О проекте
Adli — российский бренд женской одежды, ориентированный на эстетику, комфорт и премиальность. Команда бренда обратилась к нам с запросом на создание полноценного интернет-магазина, который будет передавать ценности компании и обеспечит удобство покупателям, особенно пользователям мобильных устройств.
Задачи
Создать современный онлайн-магазин, который:
- передаёт эстетику и ценности бренда Adli — премиальность, женственность, внимание к деталям;
- формирует доверие к бренду и усиливает ощущение качества на всех этапах взаимодействия;
- обеспечивает интуитивно понятный пользовательский путь от знакомства с коллекцией до оформления заказа;
- упрощает процесс покупки за счёт прозрачного и быстрого checkout без лишних шагов;
- отлично работает на мобильных устройствах, учитывая, что основная аудитория совершает покупки со смартфона;
- масштабируется вместе с брендом (новые коллекции, акции, контент, рост ассортимента).
Что мы сделали
- Проанализировали рынок и конкурентов в сегменте женской одежды, изучили лучшие UI-паттерны fashion-интернет-магазинов;
- Провели дизайн-аналитику и сформировали требования к визуальному стилю и пользовательским сценариям;
- Разработали мудборды и интерактивные прототипы, чтобы согласовать эстетику и логику сайта до этапа разработки;
- Спроектировали UI/UX-дизайн с фокусом на мобильных пользователей и простой и прозрачный путь к покупке;
- Реализовали frontend- и backend-разработку, обеспечив стабильную работу сайта и высокую скорость загрузки;
- Разработали удобную административную панель, которая позволяет клиенту самостоятельно управлять контентом, товарами, коллекциями и промо-блоками без привлечения разработчиков;
- Автоматизировали бизнес-процессы клиента за счёт интеграций с внешними системами:
- с 1С — для синхронизации складских остатков в реальном времени, что позволило показывать покупателям только доступные товары и снизить количество отмен и возвратов;
- с retailCRM — для централизованной обработки заказов, ускорения работы менеджеров и снижения количества ручных операций;
- с сервисом БонусПлюс — для гибкого управления программами лояльности и акциями с возможностью их автоматического применения на сайте.
Анализ рынка и UI-подход
У клиента был чёткий запрос на цветовую палитру и общую визуальную концепцию. В качестве референсов команда предоставила примеры, близкие по эстетике («2mood» и «All We Need»), что задало направление.
Мы начали с исследования рынка: изучили конкурентов, выделили ключевые тренды, сформировали подборку референсов и предложили варианты визуальной отстройки. Основная идея — лаконичность, которая позволяет создавать акценты без перегруженности интерфейса.
Шрифты и палитра
Для сайта мы выбрали простые, чистые шрифты, частично перекликающиеся с формами логотипа. В них сочетаются рубленые гротескные элементы и аккуратные скругления — это делает композицию строгой, но «дышащей».
Цветовая палитра — чёрно-белая. Она подчёркивает премиальность бренда, не отвлекает от продуктов и усиливает визуальную идентичность.
Акценты через композицию
В качестве визуального акцента использовали композиционные решения:
- задействовали всё свободное пространство;
- применили сетку без стандартных отступов между карточками и баннерами;
- сделали карточки товара крупным.
Такой подход — актуальный UI-тренд и одновременно способ борьбы с баннерной слепотой: крупные карточки концентрируют внимание на продуктах, а отсутствие «воздуха» вокруг них создаёт плотный, уверенный визуальный ритм.
Главная сложность
Как говорит веб-дизайнер Stik Яна Рыжкова, основная сложность заключалась в том, чтобы разместить большой объём информации и при этом сохранить лёгкость восприятия.
Мы сделали следующее:
- За основу выбрали центральную композицию для баланса «воздуха» и содержания;
- структурировали данные и разбили их на логические блоки, опираясь на хорошо знакомые пользователям паттерны сканирования.
Эти приёмы помогли без лишней когнитивной нагрузки сделать восприятие информации легкой и быстрой.
Это полная оптимизация
Выстроить процесс оформления заказа нужно было так, чтобы при большом количестве сценариев и условий он оставался понятным и предсказуемым для пользователя, рассказывает руководитель отдела разработки Stik Анастасия Разинкова.
«Мы последовательно спроектировали логику checkout с учётом авторизации, программы лояльности, бонусов, промокодов, разных способов доставки и оплаты, отобразив все возможности в нужный момент и без перегрузки интерфейса»
Ключевые решения:
- разместили блок с адресом и выбором доставки в начало сценария оформления заказа, чтобы пользователь заранее понимал стоимость и доступные варианты доставки.
- отказались от пошагового скрытия полей и показали всю структуру формы сразу, чтобы пользователь сразу мог оценить, сколько времени у него займет заполнение;
- спроектировали логику оформления заказа с учётом разных состояний пользователя — авторизации, участия в программе лояльности, возможности списания бонусов и применения промокодов — без усложнения интерфейса;
- дали возможность сравнить варианты доставки по срокам и стоимости, а также выбрать удобный способ оплаты, включая оплату частями;
- разместили кнопку «Сделать заказ» в единой логической зоне внизу формы — именно там пользователи ожидают её увидеть (подтверждено кастдевом с небольшой фокус-группой);
- добавили отображение итоговой стоимости на кнопке оформления, что позволит пользователю всегда видеть актуальную сумму заказа в момент подтверждения покупки.
В результате мы снизили тревожность пользователя, убрали лишние вопросы и сомнения на этапе оформления заказа и минимизировали риск ухода с процесса покупки.
Личный кабинет
Личный кабинет строился вокруг удобства повторных покупок и простоты входа.
Мы детально проработали процесс авторизации и регистрации: упростили шаги, добавили вход по одноразовому коду, который приходит на телефон или email (так можно не вспоминать каждый раз пароль).
Ещё добавили возможность сохранять сразу несколько адресов — это ускоряет повторные покупки, снижает вероятность ошибок и количество обращений в техподдержку.
Кроме того, в личном кабинете появился понятный раздел с программой лояльности. Мы интегрировали её с сервисом «Бонус Плюс», и теперь пользователи видят свои уровни, условия начисления бонусов, а также электронную бонусную карту с QR-кодом — её удобно использовать прямо с мобильной версии сайта, как в приложениях.
Для отслеживания клиентского поведения мы подключили RetailCRM. Теперь все пользователи с сайта автоматически попадают в CRM, где можно сегментировать клиентов, настраивать рассылки, отслеживать историю заказов и персонально взаимодействовать.
Главная страница
Мы сделали главную страницу визуально выразительной, отказавшись от стандартных шаблонов. Также подключили гибкое оформление, чтобы через админ-панель можно не только загружать фото и видео, но и выбирать тип отображения — от иммерсивных баннеров на весь экран до эффектного сплит-дизайна, подбирая оптимальный вид под любой инфоповод.
Мы сознательно отказались от стандартных слайдеров с товарами, оставив только блоки-баннеры. Это делает первую точку входа на сайт более стильной, цельной и презентабельной, акцентируя внимание на атмосфере бренда и ключевых сообщениях.
Мобильная версия
Сейчас большинство пользователей совершают покупки с телефона. Поэтому мобильная версия должна быть не адаптацией, а полноценным продуктом со своей логикой и сценариями.
Мы закрепили меню в нижней части экрана, как в приложениях и маркетплейсах. Это привычный и удобный для пользователя паттерн.
На главной странице дополнительно дублируем избранные категории и поиск в верхней части экрана — это ускоряет доступ к ключевым действиям.
В российском сегменте такое решение пока встречается редко, но всё больше брендов к нему переходят — это быстрее, интуитивнее и честно отражает мобильные сценарии поведения пользователей. Вдохновлялись паттернами маркетплейсов и социальных сетей.
Итоги
Мы создали интернет-магазин, который отражает ценности бренда Adli и делает путь пользователя — от ознакомления с продуктом до покупки — максимально комфортным.
Результат сделан с опорой не только на референсы, но и на нашу широкую экспертизу в области создания интернет-магазинов, особенно для брендов одежды. Конечно же, помогли и проведенные кастдевы — иногда пользователь может дать более качественную подсказку, чем собственный опыт.
Что дальше?
Сайт успешно запущен с основным функционалом и уже работает для клиентов. Но мы продолжаем его развитие. В наших ближайших планах:
- Запуск функционала подарочных сертификатов — возможность покупки как электронных, так и бумажных сертификатов.
- Разработка разделов «Лукбуки» и «Коллекции» — для вдохновения клиентов и стилистической подачи товаров.
- Внедрение гибкой системы акционных окон — функционал для настройки динамических модальных окон под разные маркетинговые задачи.
Кстати, другие наши кейсы можете посмотреть здесь.
