Дизайн — не просто красивая картинка, это, прежде всего, бизнес-инструмент, который позволяет брендам получать более высокую прибыль. Один из важных показателей эффективности интерфейса — коэффициент конверсии.
Денис Студенников, руководитель отдела UX/UI студии "Turum-burum", поделился инсайтами о редизайне интернет-магазина Symbol. Ниже вы найдете список функций и решений, которые помогли повысить коэффициент конверсии сайта на 76%.
О проекте
Symbol является официальным дистрибьютором более 200 мировых брендов в Украине и работает на рынке уже более 20 лет. В настоящее время ритейлер сотрудничает с такими брендами, как Fendi, Dolce & Gabbana, Gucci, Stefano Ricci, David Koma, Brunello Cucinelli, Balmain, Philosophy di Lorenzo Serafini, Peserico и др.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aa970e65dc244e9c1053d_633d55bd.webp)
В 2021 году владельцы решили провести редизайн интернет-магазина для повышения эффективности его работы, чтобы добиться соответствия статусу магазина эксклюзивной дизайнерской одежды и предоставлять лучший сервис не только оффлайн, но и онлайн.
Основная проблема:
Процесс совершения покупок офлайн и онлайн существенно различался. В обычном магазине все было очень хорошо организовано, идеально сбалансировано и ориентировано на поддержание статуса, но в интернет-магазине дело обстояло иначе.
Задача:
Разработать дизайн интернет-магазина товаров класса люкс. Сайт должен быть простым и удобным, но в то же время привлекательным для состоятельных покупателей.
Специфика и нюансы проектирования интернет-магазина одежды класса люкс
Несмотря на то, что команда Turum-burum более 12 лет работает в сфере модной электронной коммерции, создание интернет-магазина одежды класса люкс стало для нас новым челенджем.
Нам было важно не только собрать аналитические данные, но и понять специфику бизнеса, узнать, как ведут себя покупатели люксовых товаров и как они принимают решения. Вот почему мы посетили обычный магазин, где для нас провели настоящую экскурсию. В результате мы получили возможность лучше разобраться, как устроен бизнес по продаже одежды класса люкс.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aa98bd1e4c0db1859cffe_633d55bn3Rkhf0.webp)
Например, целевая аудитория обычного магазина — это мужчины и женщины с доходом, значительно выше среднего, которые предпочитают потрогать и примерить товар перед покупкой. Большинство из них недостаточно подкованы в технических вопросах и могут не знать, как совершать покупки онлайн с помощью мобильных устройств.
Разработка удобного интерфейса для продажи эксклюзивных товаров
Собрав и проанализировав данные, мы приступили к редизайну интерфейса интернет-магазина Symbol, используя подход RSR (Revolutionary Site Redesign — революционный редизайн сайта). Мы сфокусировались на трех приоритетных идеях — минимализм, простота и функциональность.
1. Индивидуальный подход
Целевая аудитория премиум-сегмента требует индивидуального подхода и обслуживания.
Мы разделили все товары на несколько ключевых категорий: "Женщины", "Мужчины" и "Дети", чтобы посетители главной страницы могли сразу попасть в нужный раздел. Благодаря этому решению магазин теперь может предложить каждому клиенту наиболее релевантные товары.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aa9a11dcd248f71784dbe_633d55bd8O0.webp)
2. Офлайн и онлайн как единая система
Чтобы создать у покупателей ощущение, что они совершают покупки в обычном магазине, мы сделали лейаут сайта и фон карточек товаров одного цвета. Это создало очень интересный эффект, который позволяет почувствовать, будто вы выбираете товар в настоящем магазине, и забыть обо всех ограничениях, связанных с совершением покупок онлайн.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aa9d487624a58ea8e8e0d_633d55bd46_LbEM.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aa9fa4d9af101514b7194_633dE4.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aaa0881cf411620cb2b15_633d55bdk0.webp)
3. Обслуживание клиентов на высшем уровне
Ключевые преимущества магазина, такие как бесплатная доставка, примерка и поддержка Apple Pay, перечислены на первом экране. Это позволяет продемонстрировать уровень обслуживания и заботы о клиентах. По данным аналитики, большая часть мобильного трафика приходится на устройства iOS, поэтому мы делаем акцент на возможности быстрой оплаты заказа одним касанием.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aaa581cf6bc0827dfdfaa_633d55be530.webp)
4. Уникальные точки входа
В качестве дополнительных точек входа мы добавили на главную страницу инновационные блоки, например, Look of the Day (лук дня) и Symbol Podium (Symbol подиум). Они выглядят как страницы глянцевого журнала, на которых представлена коллекция готовых образов. Отсюда клиенты могут сразу перейти к карточке понравившегося товара.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aaa701f1b7e207de56692_633d55bd3suQ.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aaa923c2752b4322eb929_633d55be2qlQ.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aaaa9c2e8e27bc39a52a0_633d55bd%20(2).webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aaac995ff8f60ae55bca5_633d55bdk.webp)
Мы структурировали навигацию и расставили категории в приоритетном порядке в соответствии с данными аналитики. Мы увеличили количество точек входа, добавив теги с названиями брендов и популярными запросами для быстрого поиска.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aab11f36b063c6f391461_633d55be.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aac9103b0c5dc50d9b87b_633d55b9M.webp)
5. Фокус на товарах
При оформлении страницы списка товаров мы использовали привычный для магазинов модной одежды шаблон — перенесли панель с фильтрами и инструментами сортировки в горизонтальное меню. Это позволило увеличить превью карточек товаров и сделать на них основной акцент.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aad394cff9bd25e2bf03c_633d55be61.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aad5241450ebac53abca9_633d55J3g.webp)
Страница товара содержит крупные изображения, чтобы пользователь мог детально изучить интересующую его вещь и рассмотреть ее под разными углами. Здесь он также может посмотреть, как товар выглядит на модели. Главная особенность карточки товара — необычная функция прокрутки.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/633d773184729facd672b5b6_0_CN-nmm0Hbw_ZnKuo.gif)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aafbc5da4e011fb214727_633d55be46.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aafd839cc98fd28e36e01_633d55be%20(2).webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649aaff41183bbbbbe2d5400_633d55_3Ts.webp)
6. Онлайн-примерочная
Эта функция позволяет составить свой образ с учетом таких параметров, как бренд, размер, цвет кожи и т.д. Так людям проще понять, подходит ли им конкретная вещь, и с чем ее можно комбинировать, чтобы составить законченный образ.
В правой части страницы размещены превью товаров с ценами. Если товар понравился покупателю, он может перейти на его страницу. Страницу можно открыть в новой вкладке, чтобы не потерять уже выбранные вещи.
Покупатели могут отправить весь образ в корзину, нажав всего одну кнопку.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/633d777e84729ff632730012_0_IOdCQ9F2ZF1rsbqu.gif)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649ab0294aa0e24252b9a691_633d55wcElo.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649ab0401cf6bc0827e7eb56_633d55be4.webp)
Как мировые бренды стали доступнее
В результате редизайна интернет-магазина Symbol нам удалось создать интерфейс, который сделал процесс покупки мировых брендов более простым и удобным. Мы:
- Оптимизировали навигацию по сайту;
- Подчеркнули уровень сервиса (например, бесплатная доставка, примерка, возврат и обмен, бонусные программы и т.д.) на разных этапах воронки;
- Сделали акцент на уникальности и статусе товаров;
- Внедрили новые инструменты и функции (такие как "Онлайн-примерочная", "Подиум" и другие), чтобы упростить процесс поиска товаров для покупателя.
На измерение результатов “до” и “после” повлияло множество факторов. Тем не менее, значительный рост коэффициента конверсии был зафиксирован как в сезонный, так и в несезонный периоды. Например, если сравнивать органический трафик в несезонный период, конверсия увеличилась на 76,34%.