Кейс Leba: дизайн сайта, часть 3

20.12.2020

Абдугафур

здесь, чтобы объяснить

Рассказываем о том, как мы переосмыслили сайт для ведущего сервиса доставки продуктов в Узбекистане с учётом масштабирования под маркетплейс. Покажем логику работы, интерфейс, новые решения и дизайн. Начнём :)

Домашняя страница

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

Каталог

Структура каталога выглядит так:

  1. Суперакатегория
  2. Вендор
  3. Категория
  4. Подкатегория
  5. Товар

Такая категоризация помогает сделать плавную мультивендорность без сложных логистических цепочек и фулфилмента. Это позволяет «на легке» запустить мультивендорную корзину. Каждый вендор будет на отдельной вкладке со своей стоимостью и сроками доставки. На этапе MVP выбор вендора отключён — это поможет быстрее запустить текущую модель с основным партнёром по доставке продуктов.

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

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

Карточка товара, похожие и рекомендуемые

Нажимая на товар, мы попадаем в его карточку. Здесь виден поставщик, производитель, подробное описание и отзывы. Справа клиент видит «Похожие» — товары, которыми можно удобно и в один клик заменить текущий. Это элемент кроссейла, который позволяет увеличивать средний чек выводя близкие по цене и функциональности позиции.

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

Отзывы на товар. После того, как заказ будет доставлен, мы предлагаем пользователю оценить приобретённые товары. Он ставит либо палец вверх, либо вниз, оценивая покупки как Цезарь гладиаторов. За каждую оценку клиент получает денежное вознаграждение в баллах. Если пользователь переключит тумблер «Оценить подробнее» и напишет короткую рецензию, то его вознаграждение увеличивается.

Выбор адреса

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

Корзина
 и оформление заказа

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

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

Профиль

Списки любимых товаров. 
Чтобы не захламлять корзину ненужными товарами, мы создали списки любимых. Списками можно делиться и заказывать их на разные адреса. К примеру, вы можете создать список «Для мамы» единожды и заказывать его, когда вам это необходимо. Или подключить автозаказ в нужные числа месяца 😉

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

Как мы помогаем по жизни


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

Рассказываем о том, как мы переосмыслили сайт для ведущего сервиса доставки продуктов в Узбекистане с учётом масштабирования под маркетплейс. Покажем логику работы, интерфейс, новые решения и дизайн. Начнём :)

Домашняя страница

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

Каталог

Структура каталога выглядит так:

  1. Суперакатегория
  2. Вендор
  3. Категория
  4. Подкатегория
  5. Товар

Такая категоризация помогает сделать плавную мультивендорность без сложных логистических цепочек и фулфилмента. Это позволяет «на легке» запустить мультивендорную корзину. Каждый вендор будет на отдельной вкладке со своей стоимостью и сроками доставки. На этапе MVP выбор вендора отключён — это поможет быстрее запустить текущую модель с основным партнёром по доставке продуктов.

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

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

Карточка товара, похожие и рекомендуемые

Нажимая на товар, мы попадаем в его карточку. Здесь виден поставщик, производитель, подробное описание и отзывы. Справа клиент видит «Похожие» — товары, которыми можно удобно и в один клик заменить текущий. Это элемент кроссейла, который позволяет увеличивать средний чек выводя близкие по цене и функциональности позиции.

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

Отзывы на товар. После того, как заказ будет доставлен, мы предлагаем пользователю оценить приобретённые товары. Он ставит либо палец вверх, либо вниз, оценивая покупки как Цезарь гладиаторов. За каждую оценку клиент получает денежное вознаграждение в баллах. Если пользователь переключит тумблер «Оценить подробнее» и напишет короткую рецензию, то его вознаграждение увеличивается.

Выбор адреса

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

Корзина
 и оформление заказа

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

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

Профиль

Списки любимых товаров. 
Чтобы не захламлять корзину ненужными товарами, мы создали списки любимых. Списками можно делиться и заказывать их на разные адреса. К примеру, вы можете создать список «Для мамы» единожды и заказывать его, когда вам это необходимо. Или подключить автозаказ в нужные числа месяца 😉

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

Как мы помогаем по жизни


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

Другие части этого проекта

Если вас это заинтересовало, заполните форму
Сделать также классно:
Расскажите подробнее

При отправке вы даёте согласие на обработку персональных данных.

Спасибо! Совсем скоро ответим.
Упс! Что-то пошло не так. Попробуй ещё раз, или отправь письмо на hire@5x10.co
Если тебя заинтересовала вакансия, заполни форму
Расскажи о себе

При отправке вы даёте согласие на обработку персональных данных.

Спасибо! Не оставим без ответа.
Упс! Что-то пошло не так. Попробуй ещё раз, или отправь письмо на hire@5x10.co

Твоя десница — проводник
в цифровую обитель

Твоя десница — наша отдушина. Рассказываем про продукт, дизайн и маркетинг без сложных эпитетов. Избранные кейсы, личный опыт и nothing more. Присоединяйся!