![](https://cdn.cases.media/image/wide/e22afc21-2426-4b97-93a7-dda4a9f51171.jpg)
Никто не понимал, что мы продаем Apple: как мы поменяли дизайн сайта и увеличили продажи
Наше агентство «Турум-бурум» и «Техно Ёж» сотрудничают давно. В 2017 году мы помогали ребятам с адаптивной версией сайта. Тогда как раз резко увеличилась доля mobile-пользователей на рынке. Кроме того, компания росла, сайт не дотягивал и не отвечал ее позиционированию. Он был простым, устаревшим, с дизайном под небольшое разрешение, без функционала личного кабинета и других современных функций.
![](https://cdn.cases.media/image/wide/2f65a245-ff0c-4e27-be3b-4e9ac33a4ca8.png)
Проектируя новый интерфейс от mobile-first, мы поставили перед собой такие задачи:
1. Сделать акцент на продаже техники Apple
Посетители не понимали, что магазин сфокусирован на продаже техники Apple, а ведь именно по этим причинам в логотипе компании ёж несет на иголках яблоко. У компании есть своя система обмена б/у техники Apple, но дизайн сайта не передавал этого.
2. Подчеркнуть главное преимущество — уровень сервиса
Если вы хоть раз были в магазине «Техно Ёж», то знаете, что туда приходят не просто купить устройство, а насладиться самим процессом покупки. Тут и улыбчивые консультанты, и удобный диванчик, и Playstation под рукой, конфеты, головоломки и подарки — все, чтобы провести время при оформлении товара максимально приятно.
Компания не раз получала награды за лучший сервис и в номинации «Выбор потребителя». Нам надо было сделать процесс оформления покупки на сайте таким же удобным, как в реальной жизни.
3. Сделать интерфейс максимально ориентированным на человека
«Техно Ёж» — компания с человеческим лицом. С тобой говорят на твоем языке, ты свой среди них. Эту мысль нужно было донести через интерфейс. Сайт должен передавать принципы такой коммуникации и служить проводником в общении двух людей.
Как мы решили эти задачи
Когда компания сталкивается с подобными глобальными задачами, лучшее решение — это полная смена дизайна сайта.
Для начала мы начали собирать требования и вопросы, проводили стратегические сессии с менеджерами, примеряли на себя роль целевой аудитории и общались с идейным вдохновителем компании Алексеем. Он рассказал нам, с какие эпитетами он ассоциирует бренд и какие эмоции должен вызывать сайт. Кроме этого, мы пообщались с дизайнером, который придумал логотип «Техно Ежа» и ведет всю визуальную коммуникацию бренда.
В состав команды мы выбрали специалистов, у которых был самый большой опыт в дизайне интерфейсов интернет-магазинов электроники и подходящий характер. Например, Макс, наш UX-дизайнер, который проектировал интерфейс, обожает «Рик и Морти», «Звездные войны» и хранит дома 4 поколения приставок Sony Playstation. Юра, UI-дизайнер, которому мы поручили визуальную часть, — любитель гаджетов и новинок в мире техники. Ребята были с целевой аудиторией на одной волне, кроме того, перед началом работ мы посетили несколько магазинов сети, чтобы еще глубже проникнуться атмосферой «Техно Ежа» и этой нестандартной компании.
На этапе проектирования нам надо было передать те эмоции, которые мы прочувствовали во время анализа бизнеса, и сделать простой и понятный для целевой аудитории интерфейс. Он должен был подчеркивать красивый дизайн самих товаров — это тоже соответствует стилистике сайта Apple, которым мы вдохновлялись.
Мы продумали все микровзаимодействия и анимации. После того как все было утверждено, мы передали проект нашим партнерам из WebHome, которые давно сотрудничали с «Техно Ежом». Они реализовали все наши задумки в разработке − и вот что из этого получилось.
1. Apple — в центре внимания
![](https://cdn.cases.media/image/wide/686f7d21-a36a-47cb-84b6-7491b2471542.png)
Дизайн главной страницы был спроектирован так, чтобы было как можно больше точек входа на страницы с техникой Apple: от нового iPhone до «Mac на будь-який смак».
![](https://cdn.cases.media/image/wide/5d6d2651-da00-428b-b573-651539ab8a42.png)
Стилистика сайта создана в трех основных цветах: белый, черный, серый, которые перекликаются со стилистикой сайта Apple. А синий цвет подчеркивает индивидуальность бренда «Техно Ёж».
Плитка из популярных устройств, топ-10 товаров месяца, анонс нового iPhone — все эти месседжи интересны целевой аудитории и погружают вглубь сайта.
В результате, несмотря на то, что главная страница в новом дизайне занимает 4,5 экрана, ее доскролливают до конца 63 % пользователей. Показатель отказов с главной страницы при этом также уменьшился на 46 %. Это говорит о том, что пользователи действительно с интересом рассматривают выведенные на главную разделы.
Преимущество техники Apple — ее дизайн, поэтому главной задачей других страниц сайта было подчеркнуть дизайн самого товара и не отвлекать пользователя от покупки.
Например, на странице выдачи нет лишних границ в дизайне — все максимально воздушно. Даже блок с фильтрами не перегружает интерфейс, а специально отделен от товара визуально.
![](https://cdn.cases.media/image/wide/21661b11-0150-412c-af7c-5228950aafec.png)
Большие фото, минимум элементов интерфейса, большая галерея с возможностью просмотреть изображение, очевидный выбор размеров, цветов, объемов.
2. Сервис — ключевое преимущество
![](https://cdn.cases.media/image/wide/92eb8320-1cff-491a-a80f-e2de8a2e6770.png)
Все элементы интерфейса направлены на то, чтобы превращать пользователей из новых в постоянных. Например, меню содержит картинки категорий, придавая визуальный якорь запросу пользователя. Это помогает быстро просканировать категории и легко сориентироваться в меню сайта.
![](https://cdn.cases.media/image/wide/7267638b-8e7c-4711-bc73-0196390b4d93.png)
Еще одним удобным решением стали прилипающие элементы, которые существуют для того, чтобы направить пользователя в следующий шаг воронки. Например, в карточке товара в зоне видимости экрана всегда находятся цена и кнопка «Купить».
![](https://cdn.cases.media/image/wide/1e082c12-da64-4305-bc0e-de3c1fbd8a5b.png)
После редизайна мы исследовали различные сценарии добавления товара в корзину на каждом из устройств.
![](https://cdn.cases.media/image/wide/cb8a119a-1646-4a6a-8e19-6a94669d7183.png)
В результате с мобильного телефона товаров в корзину стали добавлять на 25 % пользователей больше, а со стационарного устройства — на 53 %.
Система смежных продаж продумана так, чтобы максимально помочь пользователю купить все необходимые аксессуары. При добавлении товара в корзину блок с аксессуарами и смежными товарами занимает весь экран, чтобы пользователь мог сосредоточиться на сопутствующих товарах. Взгляд, двигаясь слева направо, останавливается сначала на блоке допродажи и только потом переходит к основному товару в корзине.
![](https://cdn.cases.media/image/wide/6b394dcd-aa11-4ec4-8016-85df90be1a3e.png)
Так, пользователям предлагаются товары из единой экосистемы Apple, что передает основную идею Стива Джобса.
Оформление заказа мы постарались сделать таким же комфортным, как и в магазинах «Техно Ёж», на сайте есть:
- автоматическая регистрация нового пользователя при оформлении заказа;
- авторизация с помощью соцсетей;
- очевидное описание ошибок при заполнении формы;
- подключение геолокации для определения города пользователя;
- создание маски телефона;
- подключение выпадающего списка городов;
- создание функционала для адресной доставки и сохранения адреса клиента для использования его в дальнейших заказах;
- просмотр отделения «Новой Почты» на карте и др.
![](https://cdn.cases.media/image/wide/f9914157-18c2-4c99-aeec-7e4df9ea4d64.png)
Страница оформления заказа стала удобной для пользователя как в desktop, так и в mobile.
В отличие от предыдущего сайта, в дизайне нового у пользователей также появилось свое пространство — личный кабинет, который мы снабдили таким функционалом:
- отслеживание заказов;
- отслеживание изменения цены;
- списки избранного;
- управление рассылками;
- сохранение данных для повторных заказов.
![](https://cdn.cases.media/image/wide/2a95f0f9-e00a-4b6d-99be-cea14215b021.png)
Теперь удобный личный кабинет решает задачи не только пользователя, но и бизнеса, позволяя автоматизировать процессы в маркетинге и предлагать более интересный товар постоянным клиентам.
3. Люди — главная ценность
![](https://cdn.cases.media/image/wide/4a821645-52ed-4537-8603-0cde5e6a7ca1.png)
Как и в шоуруме «Техно Ежа», так и на сайте посетителя встречают люди − простые, современные, увлеченные, фанаты электронных устройств, которые помогут сделать выбор, а не «впарят» ненужный товар.
![](https://cdn.cases.media/image/wide/03350a38-491f-4538-a707-d9a9f9be7712.png)
Даже преимущества компании поданы неординарно, с доброжелательностью и простотой. И они не голословны, а сразу же подтверждены фактами. Весь сайт разговаривает с пользователем на простом для него языке, без лишнего пафоса и официоза.
![](https://cdn.cases.media/image/wide/4c552ab4-f43c-4e99-8799-36ce4b572868.png)
Даже в карточке товара не стоковые фото, а фотографии реальных людей из команды «Техно Ежа», которые перезвонят, если оставишь номер.
![](https://cdn.cases.media/image/wide/ede7e7b9-5d1b-4399-bc58-159426a04a6e.png)
В интерфейсе, как и в жизни, с пользователем общаются как со своим, с таким же молодым и активным.
Результаты смены дизайна
![](https://cdn.cases.media/image/wide/9cb26976-3677-4705-9144-11d801768fc5.png)
По сравнению с периодом один месяц до появления нового сайта и периодом после:
- количество пользователей, добавивших товар в корзину, выросло на 41 %;
- количество пользователей, перешедших к оформлению заказа, увеличилось на 31 %;
- коэффициент конверсии вырос на 41,94 %.
Кроме результата, выраженного в цифрах, команда «Турум-бурум» смогли решить все три ключевые задачи компании и помогли закрепить в бизнесе омниканальный подход, при котором клиент получает одинаково качественный сервис как в магазинах сети, так и онлайн.