behipo.com
Площадка , которая объединяет лайфстайл-медиа, концептуальный магазин и сообщество единомышленников.
HIPO IDEA
Идея проекта проста, но эффективна. В статьях от лидеров мнений посетители узнают о трендовых темах и о качественных продуктах, далее тут же их и приобретают.
Техническое задание
Для работы над этим проектом мы использовали нестандартное техническое задание - итеративное ТЗ. Оно из себя представляет ёмкое описание имеющихся прототипов и подробное описание структуры данных. Более подробное описание всех особенностей проекта было сделано в дополнительных ТЗ.
Vue.js
самый популярный в мире фронтенд
фреймворк среди разработчиков
https://github.com/topics/framework.
Собираем Webpack-ом, что
гарантированно обеспечивает:
- Кроссбраузерность верстки
- Легковесность
- Модульность
- Сайт очень трудно украсть
- Нет проблем с кэшем браузера
Адаптивная верстка с
поддержкой ретины
Дизайн
У команды 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-объекта, размер дополнительно загружаемых ресурсов уменьшается следующим образом:
Анимация
Получившемуся лаконичному дизайну очень нужна была визуальная изюминка. Такими элементами стали пре-хэдер (полоска с текстом и ссылками над шапкой) и блок с подпиской.
Заказчик предоставил нам 12 цветов, попросил “смешать” их друг с другом и добавить анимацию, чтобы цвета переливались по движению мыши.
Мы согласовали конечное число пар градиентов, каждый из которых представляет собой отдельный блок. Такие блоки наслаиваются друг на друга. После этого настроили анимацию смены этих блоков с помощью изменения свойства opacity двух соседних слоев, что позволило реализовать эффект fade на css-градиентах.
Оптимизация
Мы сразу знали, что на сайте предполагается большое количество фото и видео, поэтому позаботились об их оптимизации. Об оптимизации видео, например, у нас написано в кейсе Artinstall.
Бэкенд-разработка
Не одним внешним видом хорош этот проект.
Бэкенд-разработчик реализовал следующие возможности:
- Конструктор статей
- Интеграции с 1С в режиме
реального времени - Интеграция с Кладр по API
- Личный кабинет оператора
колл-центра - Система промокодов,
подарочных карт и многое
другое
Давайте обо всем по порядку.
Laravel
Конструктор статей
Конструктор - это набор кастомных элементов, которые можно располагать в любом порядке. По итогу мы получаем уникальную на вид страницу, а затраты на ее создание в разы меньше.
Что можно найти только в концепт-сторе HiPO
HiPO запускает собственный интернет-магазин, в котором эксклюзивно представлены лучшие в своей нише бренды. В их числе — датский декор для дома House Doctor, предметы для творчества Monograph DK, австрийская марка средств для заботы о полости рта Dr. Lhotka, велнес-бренд шелковых масок из Лондона Holistic Silk и многие другие.
Для тех, кто любит улыбаться
Марку Dr. Lhotka основал практикующий стоматолог Роберто Лхотка из Австрии. После множества исследований доктор выявил, что патогенные бактерии в микрофлоре полости рта являются источником пародонтита, неприятного запаха и кровоточивости десен. Для поддержания нормальной микрофлоры Лхотка нашел несколько эффективных растительных компонентов — гвоздика, тимьян, стевия, лемонграсс.
Связь WEB, 1С и склад
- Заказ, оформленный на сайте, попадает в 1С с определенным статусом.
- Далее он Подтверждается оператором колл-центра и отправляется на сборку на склад.
- После доставки заказа Склад меняет его статус на соответствующий, этот статус попадает сначала в 1С, а потом уже в Интернет-магазин.
- 1С и склад обмениваются данными об остатках, а далее 1С передает все данные на сайт. Такой обмен на текущих масштабах настроен раз в 1 час.
- Склад передает по API список пунктов вывоза заказов.
- Из 1С сайт получает структуру каталога, номенклатуру и изменения по заказам.
Интеграция Оператор КЦ (WEB), 1C, склад
Интерфейс для оператора колл-центра сделан в админ.панели Laravel Nova.
- При появлении заказа он отображается в интерфейсе.
- Оператор подтверждает или отменяет заказа, при необходимости меняет способ доставки.
- Далее заказ проходит свой стандартный путь от 1С до склада и покупателя.
Интеграция Dadata (кладр) и WEB
Dadata - это приложение, позволяющее нам настроить связь по API с Кладр и всегда получать актуальную информацию по адресам доставки. Т.к. область работы интернет-магазина ограничена некоторыми городами, то мы сделали фильтр по областям.
Подарочные карты
Праздники —самый пиковый период для e-commerce проектов. Часто бывает сложно придумать подарок, который точно порадует близкого человека. В ход идут различные подарочные карты, и этот проект не исключение.
Идея:
Пользователь приобретает электронную подарочную карту на N-ю сумму, которую можно потратить в магазине Behipo.com. Карта, в выбранном дизайне с добавлением нужной суммы и срока действия, отправляется получателю в назначенный срок в письме.
Для системы подарочная карта выглядит так:
- В момент покупки WEB генерирует промокод, который присваивается конкретной карте.
- Далее карта отправляется в виде e-mail на почту получателя. При совершении покупки пользователь вводит промокод, и подарочная сумма “вычитается” из стоимости его корзины.
Интересно то, как формируется картинка с картой:
- Забираем загруженную png-картинку для рисунка на карте из административной панели (её номер приходит с фронтенда);
- Вставляем её в HTML-разметку шаблона карты;
- Специальная программа объединяет HTML-разметку и png картинку;
- Затем картинку передаем на фронтенд;
- Для формирования картинки с суммой и сроком годности берем с фронтенда параметры цены и даты.
Личный кабинет
Проект особенно интересен тем, что для использования личного кабинета и оформления покупок есть два профиля для пользователей: инсайдер и обычный пользователь.
Инсайдеры — это лидеры мнений, от их имени публикуются статьи.
Обычные юзеры схожи по своей роли с подписчиками в Instagram, они читают и добавляют в избранное статьи, совершают покупки, пишут комментарии.
В ЛК пользователь может создать для себя три адреса и отметить тот, который будет автоматически добавляться на этапе чекаута, то есть этапа совершения заказа. Всё для удобства покупателя.
Теги
Чекаут
Сама страница чекаута, то есть совершения заказа, получилась очень объемной как в плане фронтенда, так и в части бэкенда . Состоит она из следующего:
- Корзина с товарами;
- Заполнение персональных данных и возможность авторизоваться. Когда юзер авторизуется, этот блок заполняется автоматически;
- Ввод адреса и выбор способа доставки. Доставка реализована двумя способами: курьером или самовывоз;
- Выбор способа оплаты. Предоплата картой на сайте или постоплата наличными. В качестве эквайринга для онлайн-платежей выбрали Cloudpayments за его возможность сделать кастомную форму для ввода данных карт;
- Возможность оставить комментарий;
- И в последнюю очередь ввести промокод.
Результат
Результат превзошел все ожидания клиента и восхищает своим эстетичным внешним видом и функциональностью. На данный момент, это успешно развивающаяся медиа-платформа. Но дело не только в нашей работе, большой вклад в развитие проекта вносит грамотный маркетинговый план. И самое важное — новаторская идея, которая подходит под текущий виток времени. Спасибо команде HIPO за доверие, а мы идем вместе дальше развивать проект. Спасибо за внимание!
Отзыв клиента
ООО “Нью Эйдж Лаб”
Мы нашли Студию Флаг в начале прошлого лета, когда искали подрядчика на запуск стартапа behipo.com. В начале августа мы приступили к работам и уже к началу октября получили первую версию продукта — Блог, а к декабрю вторую версию — Магазин.
Запуск стартапа — это очень непредсказуемый процесс и промахи бывают как со стороны заказчика, так и разработчика. У нас были сложные ситуации, но сообща мы смогли решить все проблемы. Наше сотрудничество со Студией Флаг продолжается по сей день и планируем на текущем этапе не останавливаться.
Хочу выразить благодарность команде Студии Флаг за профессионализм и за желание слушать клиента. Особенно отмечаем роль менеджера Анны в реализации проекта и его поддержке.
Желаю компании расти, развиваться и набирать мощности.
София Кофманн, генеральный директор ООО “НЬЮ ЭЙДЖ ЛАБ”