E-commerce приложение винного бутика. Стиль, легкость и микросервисная архитектура

ЗаказчикЛРВ — официальный представитель винодельческого хозяйства «Chateau Cotes de Saint Daniel» в России.ЗадачаСоздать мобильное приложение с каталогом продукции и возможностью заказа.

ЛРВ — официальный представитель винодельческого хозяйства «Chateau Cotes de Saint Daniel» в России. Ассортимент их флагманского бутика Джаннет — лимитированные крымские вина, крепкий алкоголь и винные аксессуары.За годы работы бутик накопил базу постоянных клиентов. ЛРВ хотели подкрепить лояльность покупателей: оперативно принимать заказы и заранее готовить их для самовывоза.

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

Дизайн и юзабилити

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

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

918b880f464f24eab922f30f0270f48c.png

Задачи пользователя

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

Найти и выбрать

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

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

ca1ce75076e45393e65991fd269a8271.png

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

113b9d27a3935a4d5e75fc4a78e95c63.png

Оформить заказ

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

Оформление заказа состоит из:

  • двух шагов для зарегистрированных пользователей — оформить и подтвердить заказ;
  • трех шагов для незарегистрированных — оформить, указать телефон, подтвердить.
  • Онлайн покупка алкогольной продукции запрещена, поэтому эквайринг не предусмотрен.

567111b478b93e6637e25baf6216f743.png

Отследить

Заказы активные, прошлые и отмененные собраны в разделе «мои заказы». Доступен номер и статус. При смене статуса пользователю приходит пуш-уведомление.

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

Мы персонализировали главную страницу. Неавторизованный пользователь видит общедоступные блоки: акции, подборки, каталог. Для авторизованного пользователя появляется блок с активными заказами, картой лояльности и историей заказов. По тапу на карту открывается штрихкод, которым удобно воспользоваться в магазине. История заказов позволяет прямо с главной повторить заказ, а не искать по разделам ту бутылку вина, которую купили месяц назад.

1311e7cff73f68c56087e0c0bc397b81.png

Архитектура и интеграции

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

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

Серверное приложение отвечает за взаимодействие с 1С и элементами пользовательского приложения. Оно построено по принципам микросерверной архитектуры — разбито на несколько сервисов с определенной функцией. Например, сервис обновления пользователей, регистрации заказов, актуализации данных. Все составляющие архитектуры общаются между собой через API. Главный источник информации для приложения — 1С.Оттуда мы получаем данные о продукции, заказах, пользователях, персональных скидках по программе лояльности и отправляем данные о новых заказах. 1С может уходить на периоды обновления, быть недоступной, долго отвечать из-за нагрузки. Поэтому между 1С и серверным приложением есть кэширующая база данных PostgreSQL. Кэширующий слой общается с 1С, обновляет данные по двум видам запросов:

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

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

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

Скачать приложение: Android, iOS.

Перейти на сайт

Полный текст статьи читайте на CMS Magazine