Дизайн интернет-магазина Kollant.ru

Задача: сделать удобный интернет-магазин для людей.

Кейс о UI/UX и человеческих отношениях

Этот проект не про модный дизайн — он про реальный огромный оптовый склад и интернет-магазин со своими ограничениями и бизнес-моделью.

Компания «Коллант» существует с 1996 года и специ­али­зи­руется на оптовой продаже женских колготок и белья. У компании есть интернет-магазин, который ориентирован как на оптового, так и на розничного покупателя. Магазин рос, менялся, переходил из рук одной веб-студии к другой, подвергся SEO-оптимизации — специалисты по раскрутке убрали с главной страницы сам товар, но написали длинный текст, где есть все-все-все ключевые слова. Мода на дизайн сайтов со временем менялась. Магазин начал разваливаться на куски кода и его пришлось спасать.

Интернет-магазин Kollant.ru

Главная страница интернет-магазина Kollant.ru


— Вы меня пошлёте! — Нет, не пошлю! — Нет, пошлёте!

Клиенту меня, как водится, порекомендовали, он позвонил и с дрожью в голосе сказал: Мне нужно переделать сайт. Вы уже четвёртый дизайнер, с которым я пытаюсь работать, и никто не может сделать то, что я хочу! Вы меня, наверное, пошлёте, но я сам знаю, как должен работать мой сайт. Прошу, сделайте так, как я скажу! Я не мог игнорировать этот крик о помощи, и мы начали разбираться, что случилось.

Плохо было всё. Дизайн сайта был ярко-розовым и с цветочками, словно домик куклы Барби. Изображения товаров было не разглядеть, информация о товаре нечитаемая, сеошный текст занимал три экрана. Корзина, оформление заказа и личный кабинет были стандартными и неудобными кусками шаблонов из Битрикса. Плюс к этому огромная 1С-база с двадцатью тысячами наименований товара, которая выгружается на сервер практически ежедневно. За всем этим было не разглядеть, что интернет-магазин обладает огромным ассортиментом и предлагает очень доступные цены.

Клиент внимательно изучал Яндекс-метрику и Вебвизор и прекрасно знал как его покупатели работают с сайтом, как они делают заказы, и какие трудности при этом у них возникают. Мы начали с того, что сами проделали путь покупателя: пытались найти и выбрать товар, добавить его в корзину и оформить заказ. На всех этих этапах возникали сложности. Сайт был неуклюжим и недружелюбным. В случае ошибок он просто молчал, не давая человеку подсказки.

Волшебные слова: Зачем? Для кого? и Как?

Главной целью нашей работы было сделать интернет-магазин простым и понятным для людей, которые с компьютером на Вы. Клиент рассказал много историй о том, какие отзывы он получает от покупателей: о том, как люди теряются в каталогах или не понимают как правильно оформить заказ или не могут найти интересующую их информацию, а потом звонят и уже на нервах пытаются объяснить, что им нужно. Всё это влияет на репутацию магазина, на продажи и на опыт покупателя.

Даже если ваш сайт находится в топе по поисковым запросам и вы ежемесячно тратите деньги на раскрутку, это не гарантирует успех, если весь процесс покупки неудобен. Я до сих пор встречаю интернет-магазины, в которых нет элементарной функции поиска товаров: вот пожалуйста каталог товаров, листайте, ищите сами. Но зато обязательно по экрану бегает трубка и предлагает сделать вам обратный звонок! Я ведь ещё даже ничего не увидел. Это, конечно же, неприемлимо.

Во многих книжках про супер-успешный бизнес написано, как компании из кожи вон лезут, чтобы дать своим клиентам безупречный продукт и безупречный сервис. Зачем они это делают? Чтобы люди несли свои денежки именно этим компаниям. Понятное дело, что компании таким образом как бы наживаются на людях, но они дают людям то, что люди хотят и даже делают их счастливее. Именно такой капитализм двигает прогресс в экономике. Жаль лишь, что таких компаний не так много, особенно в нашей стране.

Тот самый старый дизайн для поисковиков, а не для людей.


Главное в магазине — товары

Первым делом мы переделали страницы товаров. Большая картинка, крупное название, цена и форма заказа — это самое главное и это первое, что должен видеть покупатель. Особенность данной формы заказа в том, что у каждого наименования товара есть различные размеры и цвета. Простой кнопкой «В корзину» здесь не обойтись. Всё это на одной странице, а не на десяти разных как в некоторых других интернет-магазинах. Оптовый покупатель может добавить в корзину сразу несколько вариантов одной модели.

Форма заказа Страница товара с формой заказа

Страница товара с формой заказа


Разделы каталогов интернет-магазина

Далее были сделаны разделы товаров. Изображения и карточки товаров увеличены, лишняя информация убрана. Каталог был неудобным для оптового покупателя, так как из него нельзя было сразу добавить товары в корзину — для этого нужно было переходить на страницу каждого товара, а потом возвращаться назад. Например, при заказе 50 моделей, нужно открыть 50 страниц и 50 раз положить товар в корзину и 50 раз вернуться назад. Эта проблема была решена добавлением всплывающего окна при нажатии кнопки «В корзину» с точно такой же формой заказа как и на странице товара. Теперь постоянный покупатель-оптовик, прекрасно зная, что ему нужно, может не терять время на лишние переходы и клики, а работать прямо из каталога.

Страница каталога товаров с формой заказа


В разделах каталога представлены основные бренды и производители товаров. Крупный логотип позволяет сразу найти нужный бренд. Это также сделано для удобства работы оптовых покупателей, которые собирают заказы из определенных торговых марок. Щёлкнув на логотип, покупатель попадает в раздел выбранного производителя или бренда, где представлены все имеющиеся товары.

Каталоги товаров организованы по брендам и наглядно представлены на страницах

Каталоги товаров организованы по брендам и наглядно представлены на страницах


Главная страница: товар лицом

В интернет-магазин люди приходят, чтобы купить нужную им вещь. Логично же? Но почему-то некоторые компании на главную страницу своего интернет-магазина — на свою витрину — вываливают текст о компании, новости, которые никто не читает или бестолковый сеошный текст. На витрине должен быть товар. Главная должна показывать лучшие предложения интернет-магазина и давать представление об ассортименте.

Здесь была похожая ситуация. На главную вернулись товары: новинки, хиты продаж, скидки. Промо-блок показывает баннеры о текущих распродажах. Преимущества компании описаны простым понятным языком и проиллюстрированы значками. Общий дизайн сайта стал белым, ярко-розовый цвет заменен на более спокойный сиреневый. Упорядочена навигация по сайту: главное меню, рубрикаторы, добавлен алфавитный список брендов. Сеошным текстам было отведено место в подвале, где им и положено быть.

Товары вернулись на главную страницу интернет-магазина

Товары вернулись на главную страницу интернет-магазина


Приведены в порядок все важные информационные разделы, такие как «Доставка», «Оплата», условия работы для оптовиков. В «Контактах» добавлена удобная и понятная Яндекс-карта вместо рисованой схемы проезда. Особое внимание следует уделить текстам на этих страницах: информация должна быть простой, понятной и краткой, иметь логическую структуру. Важно грамотно использовать русский язык и не городить сложных предложений, словно вы пишите прошение бюрократу.

Корзина, личный кабинет, письма

Корзина на сайте также упрощена и аккуратно оформлена. Помимо названия модели и её картинки (что также бывает не всегда), указан выбранный размер и цвет. Изменять количество товара можно поставив курсор в нужную ячейку таблицы — никаких дополнительных переключателей-стрелочек.

Яндекс и Гугл позволяют встраивать свои карты на сайт. Они гораздо удобнее рисованных схем проезда.

Раздел корзины

Простая и наглядная корзина товаров


Оформление заказа в один шаг

Часто оформление заказа в интернет-магазине может оказаться сложным: нужно указать много персональной информации, выбирать опции из списка, разбираться в интерфейсе формы. Мы всё это максимально упростили — для оформления заказа достаточно указать имя, e-mail и телефон, а также адрес доставки. На этом же шаге покупатель выбирает способ оплаты и доставки. Для компаний есть расширенная форма, где можно указать реквизиты, чтобы каждый раз не вводить их заново.

Оформление заказа

Единственный шаг для оформления заказа


Техническая часть

Помимо основных страниц сайта, корзины и формы заказа существует множество технических страниц: форма регистрации, вход на сайт, личный кабинет, реквизиты для компаний, смена и восстановление пароля, страницы ошибок. А также электронные письма: новостная рассылка, подтверждение регистрации, подтверждение/отмена заказа, уведомление о доставке, ссылка для смены пароля. Все они были оформлены заново и упрощены, а сообщения в них написаны простым и понятным языком.

Все электронные письма оформлены в едином стиле с сайтом

Все электронные письма оформлены в едином стиле с сайтом


Итоги

Работа над проектом заняла больше полугода. Мы с клиентом часто до середины ночи тестировали прототип интернет-магазина на моем сервере, где точно ничего не сломаешь и можно было пробовать новые идеи. Десятки раз перекрашивали сайт в разные оттенки сиреневого. Думали, сомневались, тестировали, ссорились, мирились. В какой-то момент мы научились читать мысли и объяснять без слов... Мы сделали всё, так как хотел клиент (конечно под моим жёстким контролем :-), потому что только клиент знает, как работает его бизнес. И задача дизайнера — сделать так, как просит клиент, и сделать при этом на отлично!


Рекомендую посмотреть