Как стать автором
Обновить

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

Время на прочтение 4 мин
Количество просмотров 22K
image

Начало


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

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

image Сравнение старого магазина с новым



О проекте


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

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

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


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

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

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


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

image Первый shot на dribbble

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


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

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

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

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

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

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

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

Задача


  1. Сделать так чтобы пользователи покупали товар на сайте без рекомендаций
  2. Сделать товары максимально понятными для все пользователей
  3. Сделать больше акцентов на товаре
  4. Повысить количество товаров в среднем чеке
  5. Сделать дизайн адаптивным под мобильные устройства
  6. Сделать дизайн так, чтобы его было легко кастомизировать


Детали


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

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

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


image Изображение комплекса для себя

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

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

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


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

image Меню выбора страны и языка

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

image Основное меню сайта

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

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

image Меню корзины на сайте

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

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


image Изображение карточки товара

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

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

image Страница товара на сайте

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

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


image Часть адаптивных страниц


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

Заключение


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

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

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

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Насколько вам интересны такие кейсы?
80.95% Интересно, я бы почитал еще 187
12.99% Не интересно, хабра вообще не для этого 30
6.93% Все равно 16
0.87% Иное мнение которое я закоментил в комментариях :) 2
Проголосовал 231 пользователь. Воздержались 46 пользователей.
Теги:
Хабы:
+9
Комментарии 39
Комментарии Комментарии 39

Публикации

Истории

Работа

Веб дизайнер
36 вакансий

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн