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

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 кейсов и постарались чтобы он был интересным для вас. Мы готовили его долго и хотели выслушать ваш фидбек в комментариях или же в любой удобной для вас форме.

Only registered users can participate in poll. Log in, please.

Насколько вам интересны такие кейсы?

  • 80.9%Интересно, я бы почитал еще186
  • 13.0%Не интересно, хабра вообще не для этого30
  • 7.0%Все равно16
  • 0.9%Иное мнение которое я закоментил в комментариях :)2
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 39

    –2
    Вы же понимаете, что все эти экстралайт-шрифты смотрятся ужасно на экранах обычного разрешения (не ретине)?
      +1
      Мы тестили на ретине и на обычных мониторах (DELL), читается нормально вроде
        0
        В картинке над товарами есть какой-нибудь практический смысл? Или просто «для красоты»?
          +1
          Хороший вопрос :) Если вы имеете ввиду баннеры, то да. Это баннеры которые означают наличие акций у заказчика. Это было обязательным требованием со стороны заказчика.
      –1
      господа, я ни в коем разе не придираюсь, но:
      — ссылки на dribble найти не удалось
      — подчеркнутые подписи под картинками, которые не ссылки — это жесть
      — https://dl.dropboxusercontent.com/s/0bzq9va9jelamc8/shot_160321_162202.png
      — https://dl.dropboxusercontent.com/s/ohks0j4ryh906up/shot_160321_162405.png
        0
        Дмитрий, спасибо за ваш комментарий. Тут проблема в том что я не нашел функционала который делает подписи под картинками, как например это функция реализованна на Medium. Если у вас есть идеи как правильно подписать картинки, буду рад их выслушать :)
          0
          А что мешает просто… добавить в подпись ссылку?.. =)
            0
            Не на все фотки ссылки есть :)
              0
              Вы видели ссылки в моем комментарии? Сделаны с помощью CloudShot, который мы сами делаем: cloudshot.com
              Я уж не говорю, что можно и просто выложить в облако или себе на сайт
                +1
                У таких скриншотов есть свойство удалятся когда происходят переделки на сайте
                  –1
                  открою вам страшный секрет: вот у нас есть сайт про валюту navaril.ru и его брат-близнец prodolbal.ru
                  все фоны на них залиты на imgur и уже более года никуда не деваются и отлично работают
                  а ссылки, которые я давал вам выше — это постонные ссылки в dropbox-е. Уже несколько нет они не протухают
        +1
        Как по мне, так старый чисто внешне — приятнее. В новом тёмные элементы какие-то депрессивные…
          0
          Заметный недостаток материального дизайна — внешне он какой-то «недушевный». Но пользоваться им очень удобно, как дизайнерам/разработчикам (в гайде всё разжевано и логично), так и пользователям (интерфейс получается очень простой, а для большинства — просто уже привычен), ИМХО.
          +2
          Черный цвет шапки для интернет-магазина, который продает товары для здоровья, красоты и дома — как по мне, так сомнительное решение. Чисто по цветовой гамме старый сайт больше раскрывал суть товара в магазине. Новый — просто модный дизайн, без какой либо вложенной в него души.

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

          Объясните, пожалуйста, зачем вы сделали этот пост? В нем нет ни ссылки на работающий продукт, ни одной фотки интерфейса в 100% отображении. По факту — я не получил удовольствия от разглядывания вашей работы. А так как полезной инфы, со статистикой и кардинальными решениями нет — картинки это основа этого поста.

          Вы бы привели статистику конверсии старого и нового сайта. Или что-то в этом роде.
            0
            Артур, благодарю за ваш комментарий. Как я писал ранее это наш первый кейс по дизайну который мы сделали.

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

            Пост сделали для того чтобы делать хорошие кейсы и получить конструктивный фидбек :)
              0
              1. http://prntscr.com/aiepu7
                Тут я подумал о том, что лишь эта часть о товаре (выделенная красным квадратом). И если где купить я понял после небольших усилий, то на том, где найти описание товара, пришлось потратить больше сил. Вот эти разделения на блоки одного товара, мне кажутся излишеством. Да, выглядит круто, а есть ли какие-то реальные цифры того, что такой вариант лучше работает? В общем по смыслу вы разбили один товар на три блока которые ни чем не связаны.

              2. http://prntscr.com/aierpt
                Комплексного заказа в вашем скриншоте я не увидел. Но, предполагаю что было бы очень удобно и полезно для магазина разместить его справа. То есть вместо цены сделать что-то типа блока "Этот товар лучше всего комбинировать с этими товарами" или что-то в этом роде. Более развернутую мысль выдать не могу и могу очееееень ошибаться в своем высказывании — но это связано лишь с тем, что информации для анализа в вашем превью мизерно мало.

              3. http://prntscr.com/aierwb
                Использование пространства в данном месте достаточно сомнительное. Перебор с воздухом (хотя лично я очень любу просторные сайты). Так как это интернет-магазин и по-мимо красоты он все же должен работать и продавать — я не понимаю по какому принципу тут расположены элементы.

              4. http://prntscr.com/aietlh
                Что означает эта иконка? Скопировать ссылку на товар в буфер? Или что? Если так — то тогда ей место наряду с кнопка репоста в соц.сети.

              P.S. Я прочитал эту статью в надежде найти что-то ценное или интересное. Но я даже толком не могу оценить вашу работу, так как все картинки уменьшены и не полноценны. От чего я, как ваша ЦА, не получил то, чего искал.
                0
                Артур, благодарю, за конструктивные коментраии, обязательно учту их в будущих кейсах
            0
            Простите, пожалуйста. Но было бы любезно с вашей стороны поменять "кАлл центр" на "кОлл центр". А то грустно становится за сотрудников, чьими трудами вы пользовались.
              0
              Благодарю :) Ох уж эти ошибки…
              0
              Когда-то и мы делали интернет-магазин для них (региональному дистрибьютору). Потом функции магазина пришлось заблокировать, т. к. дистрибьюторы не могут делать интернет-магазины.

              http://www.coralclubsakhalin.ru/

                0
                Мда, зато они старались :) Ну мы делали старую и новую версию, претензий со стороны заказчика пока не было :)
                0
                Иконки не стали добавлять в меню, чтобы не захламлять?
                  0
                  Михаил, здравствуйте.

                  Не могли бы вы уточнить что вы имеете ввиду?
                    0
                    Я так понимаю, что он имел в виду иконки для пунктов меню, что ныне крайне популярно.
                      0
                      У нас там два меню, одно закрытое, другое раскрытое. В обоих есть иконки :)
                  0
                  Замечательный дизайн, видел его на дрибле в лучшем недавно, даже сохранил себе в папочку для вдохновления
                    +1
                    Артем, благодарю :)
                    +1
                    Честно говоря, прочитав этот пост и комментарии мне показалось, что я в каком-то другом мире. Который гораздо ближе к менеджерскому, чем к техническому. И ужасно далёк от нормальных клиентов. Мир, где попугаи продают попугаям попугаи.

                    Позвольте задать несколько наводящих вопросов и высказать свои соображения.

                    1) У вашего заказчика "целая армия разработчиков, маркетологов и дизайнеров которые круглосуточно мониторят сайт и знают все его проблемы и недочеты". Тем не менее "сайт не продаёт". Здесь может быть несколько причин:



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

                    2) Проблема с теми данными, которые вам дали.

                    метрики вебвизора — неинформативны. Большинство пользователей не возят мышкой по экрану когда анализируют открытый сайт. Они просто смотрят. И если видят что-то не то — закрывают сайт. О том что такое "не то" я напишу подробнее ниже.
                    данные соц опросов среди клиентов — если клиент после пары секунд закрывает непонравившийся или непонятный сайт, он не станет тратить время на девочку из колл-центра.

                    фидбек по сайту от постоянных пользователей — им же интересно почему сайт не продаёт больше после того как стал открытым? Значит фидбек от постоянных пользователей просто не имеет к этому никакого отношения.

                    ссылки на сайты конкурентов — интересно, у них также глухо с продажами?

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

                    3) Самая важная характеристика сайта — как быстро он загружается (привет JS-фреймворкам, которые не тормозят в лабораторных условиях на макбуках)

                    4) Очень важно как быстро сайт работает. Если у человека не экране начинается слайд-шоу (а обычно люди открывают минимум 10 вкладок, ещё и приложения в фоне), он устраняет проблему в виде лагающего сайта. Опять привет JS-фреймворкам, суперсложной разметке и кастомным элементам управления.

                    5) Людям до одного места на все эти ваши градиенты, тени и материал-дизайны, которые оценят только коллеги по цеху — плата за них жуткие тормоза. Вы не представляете как много людей недовольны редизайном сервисов Яндекса. Некоторые уже начали потихоньку мигрировать на другие альтернативы (если они есть).

                    6) Мобильные платформы. Для мобильных платформ сайт должен быть не адаптивным, а иметь мобильную версию. А это значит работать на медленном браузере на 512 МБ памяти и слабом микроконтроллере. А это значит как можно более простая CSS, никакой бесконечной прокрутки и т.д. и т.д. Когда браузер крэшится из-за превышения потребления памяти — это неприятно и ставит крест на том сайте, который это вызвал.
                      0
                      Благодарю за ваш комментарий

                      1. Не совсем понял суть вопроса.

                      2. Дело в том что товары продавали бы и без сайта, но он очень облегчает жизнь. Вот заказчик и задался вопросом если есть сайт, то нужно научиться через него продавать. Не знаю всю поднаготную заказчика, но он достаточно и обоснованно приводил доводы в сторону своих пожеланий.

                      3. Прогресс есть прогресс :) Всегда есть недовольные...

                      4. Тут все зависит от прямоты рук разработчиков.
                      0
                      Мне кажется или ваш сайт сделан на Material Design Lite (http://getmdl.io) от Google?
                      Если так, то MDL поддерживает только текущую и предыдущую версию браузеров, в итоге в большинстве браузеров этот вреймворк не работае :(
                        0
                        Да, частично элементы взяты оттуда, но как я понимаю то там будут сами еще много чего доделывать
                        0
                        Лично мне понравился дизайн, а особенно шапка… Но, блин, ниже шапки — чёрт ногу сломит, интерфейс очень сложный как по мне
                          0
                          Владислав, спасибо :) Там действительно черт ногу сломит, упростили насколько могли. Думаю после тестов будет понятно что еще можно убрать
                          +1
                          Молодец! Спасибо за статью, было очень интересно посмотреть!
                            0
                            Благодарю, рад что понравилось :)
                              +1
                              Если есть подобного плана материалы, выкладывай, будем только рады читать!!!!!
                                +1
                                Да конечно, постараюсь сделать с учетом предыдущих комментариев.
                            0
                            есть цвета со 100% насыщенностью, безумные контрасты, лайт гарнитура на ярких плашках, глаза вытекают когда смотришь.
                              0
                              Илья, на вкус и цвет так сказать пряники разные :)

                            Only users with full accounts can post comments. Log in, please.