behipo.com

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

Интро кейса HiPO

HIPO IDEA

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

Техническое задание

Для работы над этим проектом мы использовали нестандартное техническое задание - итеративное ТЗ. Оно из себя представляет ёмкое описание имеющихся прототипов и подробное описание структуры данных. Более подробное описание всех особенностей проекта было сделано в дополнительных ТЗ.

Фронтенд разработка

Для проекта мы использовали
самые популярные технологии:

Vue.js

самый популярный в мире фронтенд
фреймворк среди разработчиков
https://github.com/topics/framework.

На HiPO мы использовали Vue.js На HiPO мы использовали Vue.js

Собираем Webpack-ом, что
гарантированно обеспечивает:

  • Кроссбраузерность верстки
  • Легковесность
  • Модульность
  • Сайт очень трудно украсть
  • Нет проблем с кэшем браузера
Проект HiPO собран при помощи WebPack Проект HiPO собран при помощи WebPack

Адаптивная верстка с
поддержкой ретины

Студия Флаг позаботилась о retina изображениях на HiPO Студия Флаг позаботилась о retina изображениях на HiPO

Дизайн

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

Полученный результат впечатлил всех:

Скриншот сайта HiPO - заказ Скриншот сайта HiPO - главная страница Скриншот сайта HiPO - каталог Скриншот сайта HiPO - авторизация Скриншот сайта HiPO - выбор города Скриншот сайта HiPO - корзина Скриншот сайта HiPO - подписка на рассылку

Оракул

Оракул — это фигура жемчужины,
которая крутится по движению мыши
и переливается красивыми оттенками.

Мы предложили сделать развертку этого шара и с помощью CSS 3D трансформаций вращать его в зависимости от движения курсора. Для этого решения используется 1 изображение, примерный размер которого 300-400 Кбайт.

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

Для рендера 3D-объекта в формате .dae необходимо дополнительно подключить на сайт библиотеку three.js, Первый объект имел размер 50 Мбайт, после его оптимизации удалось добиться размера 5 Мбайт. Но для простой анимации такая дополнительная нагрузка на сайт является необоснованной, к тому же были проблемы с производительностью на мобильных устройствах, потому было принято решение отказаться от использования 3D-объекта.

Изучив дополнительные возможности экспорта анимации из программы Cinema 4D, заказчик предложил разбить анимацию по кадрам, в виде статических изображений. Всего получилось 119 кадров. Вес изображений в png составил 5,5 Мбайт. После оптимизации с помощью конвертации в формат webp, вес изображений составил 0,93 Мбайт. Мы не волновались за возросшее количество запросов, поскольку на серверах клиентов настраиваем протокол HTTP/2.

В отличие от первоначального решения — использования 3D-объекта, размер дополнительно загружаемых ресурсов уменьшается следующим образом:

Жемчужина HiPO
50 Мб
5 Мб
5,5 Мб
0,93 Мб

Анимация

Получившемуся лаконичному дизайну очень нужна была визуальная изюминка. Такими элементами стали пре-хэдер (полоска с текстом и ссылками над шапкой) и блок с подпиской.

Заказчик предоставил нам 12 цветов, попросил “смешать” их друг с другом и добавить анимацию, чтобы цвета переливались по движению мыши.

Мы согласовали конечное число пар градиентов, каждый из которых представляет собой отдельный блок. Такие блоки наслаиваются друг на друга. После этого настроили анимацию смены этих блоков с помощью изменения свойства opacity двух соседних слоев, что позволило реализовать эффект fade на css-градиентах.

Оптимизация

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

Оптимизация изображений на HiPO Оптимизация изображений - шестеренка

Бэкенд-разработка

Не одним внешним видом хорош этот проект.
Бэкенд-разработчик реализовал следующие возможности:

Давайте обо всем по порядку.

Laravel

На бэкенде мы использовали Laravel На бэкенде мы использовали Laravel

Конструктор статей

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

Что можно найти только в концепт-сторе HiPO

Анна Якимова - Руководитель направления закупок HiPO
Анна Якимова
Руководитель направления закупок HiPO
Продукция HiPO Продукция HiPO Продукция HiPO

HiPO запускает собственный интернет-магазин, в котором эксклюзивно представлены лучшие в своей нише бренды. В их числе — датский декор для дома House Doctor, предметы для творчества Monograph DK, австрийская марка средств для заботы о полости рта Dr. Lhotka, велнес-бренд шелковых масок из Лондона Holistic Silk и многие другие.

Для тех, кто любит улыбаться

Марку Dr. Lhotka основал практикующий стоматолог Роберто Лхотка из Австрии. После множества исследований доктор выявил, что патогенные бактерии в микрофлоре полости рта являются источником пародонтита, неприятного запаха и кровоточивости десен. Для поддержания нормальной микрофлоры Лхотка нашел несколько эффективных растительных компонентов — гвоздика, тимьян, стевия, лемонграсс.

Купить

Связь WEB, 1С и склад

  1. Заказ, оформленный на сайте, попадает в 1С с определенным статусом.
  2. Далее он Подтверждается оператором колл-центра и отправляется на сборку на склад.
  3. После доставки заказа Склад меняет его статус на соответствующий, этот статус попадает сначала в 1С, а потом уже в Интернет-магазин.
  4. 1С и склад обмениваются данными об остатках, а далее 1С передает все данные на сайт. Такой обмен на текущих масштабах настроен раз в 1 час.
  5. Склад передает по API список пунктов вывоза заказов.
  6. Из 1С сайт получает структуру каталога, номенклатуру и изменения по заказам.
Наведите
WEB
Склад
Оформление заказа и отправление
Передача списка ПВЗ
Данные о товарах, предложениях и остатках
Изменение статуса заказа
Остатки
Предложения
Номенклатура
Структура каталога
Отправление заказа

Интеграция Оператор КЦ (WEB), 1C, склад

Интерфейс для оператора колл-центра сделан в админ.панели Laravel Nova.

  1. При появлении заказа он отображается в интерфейсе.
  2. Оператор подтверждает или отменяет заказа, при необходимости меняет способ доставки.
  3. Далее заказ проходит свой стандартный путь от 1С до склада и покупателя.
Наведите
Оператор КЦ
Склад
Изменение статуса заказа и способа доставки
Отправление заказа

Интеграция Dadata (кладр) и WEB

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

Наведите
DaData
Web
Получение списка городов, улиц, номеров домов
Ввод города

Подарочные карты

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

Подарочная карта HiPO

Идея:

Пользователь приобретает электронную подарочную карту на N-ю сумму, которую можно потратить в магазине Behipo.com. Карта, в выбранном дизайне с добавлением нужной суммы и срока действия, отправляется получателю в назначенный срок в письме.

Для системы подарочная карта выглядит так:

  1. В момент покупки WEB генерирует промокод, который присваивается конкретной карте.
  2. Далее карта отправляется в виде e-mail на почту получателя. При совершении покупки пользователь вводит промокод, и подарочная сумма “вычитается” из стоимости его корзины.

Интересно то, как формируется картинка с картой:

  1. Забираем загруженную png-картинку для рисунка на карте из административной панели (её номер приходит с фронтенда);
  2. Вставляем её в HTML-разметку шаблона карты;
  3. Специальная программа объединяет HTML-разметку и png картинку;
  4. Затем картинку передаем на фронтенд;
  5. Для формирования картинки с суммой и сроком годности берем с фронтенда параметры цены и даты.
Идея подарочной карты HiPO

Личный кабинет

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

Личный кабинет HiPO для инсайдеров

Инсайдеры — это лидеры мнений, от их имени публикуются статьи.

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

Обычные пользователи в HiPO

В ЛК пользователь может создать для себя три адреса и отметить тот, который будет автоматически добавляться на этапе чекаута, то есть этапа совершения заказа. Всё для удобства покупателя.

3 адреса для каждого пользователя Первый адрес на HiPO Второй адрес на HiPO Третий адрес на HiPO

Теги

Ещё одно маленькое сравнение с Instagram — навигация по тегам. К каждой статье можно прикрепить неограниченное число тегов, по которым можно искать похожие публикации. Кроме того, инсайдеры имеют возможность самостоятельно выбрать себе теги. Для этого в их личном кабинете есть возможность отметить для себя 7 основных тегов и создать 5 индивидуальных.

Система тегов на HiPO Система тегов на HiPO

Чекаут

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

Чекаут на HiPO HiPO - способ оплаты Оплата картой на HiPO

Результат

Результат превзошел все ожидания клиента и восхищает своим эстетичным внешним видом и функциональностью. На данный момент, это успешно развивающаяся медиа-платформа. Но дело не только в нашей работе, большой вклад в развитие проекта вносит грамотный маркетинговый план. И самое важное — новаторская идея, которая подходит под текущий виток времени. Спасибо команде HIPO за доверие, а мы идем вместе дальше развивать проект. Спасибо за внимание!

Отзыв клиента

Отзыв о работе студии Флаг на HiPO
София Коффман
Генеральный директор
ООО “Нью Эйдж Лаб”

Мы нашли Студию Флаг в начале прошлого лета, когда искали подрядчика на запуск стартапа behipo.com. В начале августа мы приступили к работам и уже к началу октября получили первую версию продукта — Блог, а к декабрю вторую версию — Магазин.

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

Хочу выразить благодарность команде Студии Флаг за профессионализм и за желание слушать клиента. Особенно отмечаем роль менеджера Анны в реализации проекта и его поддержке.

Желаю компании расти, развиваться и набирать мощности.

София Кофманн, генеральный директор ООО “НЬЮ ЭЙДЖ ЛАБ”

behipo.com