Кейс

Разработка интернет-магазина care/of

Описание
Разработка
Дизайн
Команда
  • Одна из особенностей проекта в том, что он направлен на покупателей различных возрастных групп. Отталкиваясь от этого, мы делали упор на простоту и функциональность. Мы выбрали спокойную пастельную палитру, присвоив каждой витаминке свой цвет.
  • Проблема

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

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

    Задачи
    • Разработка понятного, простого и информативного сайта
      с уникальным UI/UX дизайном
    • Создание детальной карточки товара, реализация поиска продукции по широкому спектру характеристик. Внедрение системы фильтрации и сортировки товаров по отдельным критериям.
    • Модернизация складов и обработки запросов, так как у клиента отдельно ведётся офлайн-продажа
    • Разработка простого, но эксклюзивного дизайна, без перенасыщения
    Решение
    Реализация проекта предполагала следующие этапы:
    • Проведение исследований и АБ-тестирований для построения карты пользовательского опыта CJM,
      изучения главных потребностей ЦА.
    • Разработка UI/UX дизайна с технологией моушн, создание карточки товара.
    • Внедрение основного функционала интернет-магазина, интеграция с набором сервисов оформления заказа и оплаты.
    • Модернизация склада для контроля отправок и распределения онлайн- оффлайн заказов.
    • Создание десктопной и адаптивной мобильной версии сайта
    • Администрирование и поддержка сайта на начальном уровне (индивидуальный запрос клиента).
    Исследования и АБ-тестирование

    Перед началом работы мы провели следующие исследования: пользовательского поведения при помощи фокус-групп, медицинские при помощи экспертов в сфере витамин и БАДов, АБ-тестирование. Отдельное внимание было уделено изучению маркетинговых особенностей продаж витаминов и БАДов. Помимо этого, мы рассмотрели основных американских конкурентов, что помогло определить «болевые точки» и ключевые особенности взаимодействия с клиентом Фокус-группы были сформированы из подростков, зрелых и пожилых людей. В дальнейшем это помогло нам реализовать следующее: грамотно сформировать карточку товара, чтобы она отвечала потребностям каждой возрастной группы покупателей; разработать простой, адаптивный и одновременно функциональный дизайн; грамотно настроить таргет; правильно презентовать продукцию (всего 50 позиций). Чтобы сделать интернет-магазин по-настоящему полезным, мы реализовали полноформатную систему поиска. Покупатель может найти подходящий товар по следующим критериям:

    • категория - это витамины или минералы;
    • цель приема, симптоматика.

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

    Разработка UI/UX дизайна, создание карточки товара
    Одна из особенностей проекта в том, что он направлен на покупателей различных возрастных групп. Отталкиваясь от этого, мы делали упор на простоту и функциональность. Мы выбрали спокойную пастельную палитру, присвоив каждой витаминке свой цвет. Композиция была дополнена шрифтом Ginger. Помимо этого мы добавили моушн анимацию иконкам и инфографике. Такое решение было принято из-за высокого процента молодой аудитории. Фокус-группы дали удовлетворительный фидбэк от всех возрастных категорий покупателей.
    Отдельное внимание мы уделили карточке товара. Оформление этого блока предполагает ответы на все вопросы, которые интересуют покупателя. Теперь пользователю сайта не придется закрывать страницу или открывать новую вкладку, чтобы узнать информацию о дозировке, особенностях приема, подходящей симптоматике. При том, что описание получилось обширным, оно осталось лаконичным. Для удобства мы распределили информацию по блокам, чтобы человек визуально быстро смог найти ответ на свой вопрос.
    Реализация функционала интернет-магазина
    При своей информативности на площадке был реализован весь функционал интернет-магазина. Пользователь может ознакомиться с ценой, собрать корзину, провести оплату, получить онлайн-чек. Все интеграции были оговорены и утверждены клиентом заранее, поэтому при разработке проблем не возникло.
    Оформление заказа
    В процессе разработки мы сделали акцент на отдельных моментах:
    • создали удобную админ-панель;
    • упростили процесс оформления заказа,
      убрав лишние поля и этапы;
    • провели интеграцию с сервисами оплаты.
    Во время работы над проектом мы столкнулись с проблемой разделения онлайн — и офлайн заказов, чтобы пользователь не купил тот товар, которого не окажется в наличие. Мы искусственно разделили один склад на два, создав отдельный исключительно для интернет-магазина. Сайт был реализован на CDN-хостинге. Проблем с подключением интернет-магазина на американском рынке не возникло.
    Поддержка сайта

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

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

    Выбор типографики
    Typigraphy
    F37 Ginger
    Regular
    Bold
    Lora
    Regular
    Bold
    Color
    #F8DC9D
    #CED8EC
    #E6DDD6
    #3A3E44
    Gif Icons
    Над проектом работали
    Команда
    Project-manager
    Сергей
    Шишкин
    Back-end developer
    Николай
    Ященко
    Team-lead
    Сергей
    Иванов
    Web-designer
    Никита
    Щеглов
    Front-end developer
    Руслан
    Гарапов
    Web-analyst
    Сергей
    Нартов