Дизайн кейс: Coral Order e-commerce сайт photo

Дизайн кейс: Coral Order e-commerce сайт

5 min read
21 October 2016

Начало

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



О проекте

Coral Club это оффлайновый клуб людей которые пользуются продукцией данной марки. Изначально сайт был предназначен только для владельцев оффлайн клуба. Чуть позже концепция поменялась и это стал полноценный интернет-магазин.

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

Исследование

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

Нам любезно предоставили исчерпывающие данные по проекту, такие как:

  • основные проблемы текущей версии сайта
  • метрики вебвизора
  • данные соц опросов среди клиентов
  • фидбек по сайту от постоянных пользователей
  • ссылки на сайты конкурентов
  • подробный бриф с пожеланиями от заказчика

Оставалось изучить данные и сделать продукт который решает все проблемы отвечая поставленным перед ним требованиям.




Основные проблемы

1.Сайт не продает

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

2. Для пользователей непонятен сам товар

Новые пользователи которые пришли на сайт через поиск не понимали специфики товара и что им нужно покупать.

3. Товар покупают только по рекомендациям

Выяснилось что те пользователи, которые покупают товар, выбирают его исключительно по рекомендациям. Пользователи фактически покупали товары офлайн, а сайт служит платформой только для оформления выбранного заранее товара. Это было большое открытие для самого заказчика, потому что он думал что какая-то часть пользователей все же покупает товар онлайн.

4. Сайт не адаптивный

Почти 40% пользователей сайта посещают его с мобильных устройств.

Задача

1. Сделать так чтобы пользователи покупали товар на сайте без рекомендаций

2. Сделать товары максимально понятными для все пользователей

3. Сделать больше акцентов на товаре

4. Повысить количество товаров в среднем чеке

5. Сделать дизайн адаптивным под мобильные устройства

6. Сделать дизайн так, чтобы его было легко кастомизировать

Детали

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

На основе 3 ключевых страниц сайта мы подробней расскажем вам об особенностях этого проекта. Все страницы проекта можно посмотреть по ссылке на dribbble.

Комплекс для себя



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

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

Основная навигация

Одной из основных задач было скрыть и упростить навигацию, поскольку на текущем сайте она занимала много полезного места.



Первая проблема которую надо было решить, заключалась с том что Coral Club имеет филиалы в 35 странах мира и все пользователи пользуются одним сайтом. Также нужно было учитывать что в каждой стране могут говорить на нескольких языках. То есть нужно было сделать селектор на 35 стран в котором можно выбирать страницу и язык и иметь к нему быстрый доступ для смены параметров.



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

Для неподготовленных пользователей В меню были предусмотрены “Смарт категории” которые насколько это возможно упрощали передвижение по сайту.



Мы решили протестировать сценарий при котором можно просмотреть и изменить количество товаров на любой странице.

Информация о товаре



По сравнению с прошлой версией на наш взгляд нам удалось добавить больше информации и не потерять при этом в информативности и общем виде :)

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



В карточке товара мы постарались сделать информацию доступней и понятней для неподготовленных пользователей. Также не забыли про комплексный заказ :)

Адаптивность



Одним из важнейших факторов сделать дизайн адаптивным, поскольку почти половина пользователей заходит на сайт с мобильных устройств. Дизайн было принято было сделать под минимальную ширину в 320px. В ходе разработки адаптивных страниц нам удалось сделать функционал таким же как и в веб версии.

Заключение

После того как концепция магазина была сделана, мы отправили все материалы заказчику. После подтверждения дизайна, следующим этапом было сотрудничество с отделом разработки. Сейчас мы помогаем отделу разработки в реализации нашего дизайна, отвечаем на их вопросы, а также выступаем тестировщиками front end части, ищем баги и отправляем их в bug list.

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

P.S. Прежде чем подготовить этот кейс мы собрали и изучили более 30 кейсов и постарались чтобы он был интересным для вас. Мы готовили его долго и хотели выслушать ваш фидбек в комментариях или же в любой удобной для вас форме.

Тэги
Спасибо за 5 голосов!
Комментарии
+
500 осталось символов