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

1. Вводная задача от заказчика, проблематика, цели

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

За годы работы бутик накопил базу постоянных клиентов. ЛРВ хотели подкрепить лояльность покупателей: оперативно принимать заказы и заранее готовить их для самовывоза.

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

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

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

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

Отследить

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

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

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

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

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

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

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

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

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

3. Результаты сотрудничества

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