Интернет-магазин эко-продуктов CÍBO

cibo.ru
  • - ux/ui;
  • - графика;
  • - анимации;
  • - 100+ экранов состояний;
  • - интеграция с 1С;
  • - бонусная программа;
  • - модули доставки и интернет-эквайринг.
  • - определение местоположения пользователя по API;

Клиент

Проект является стартапом от владельцев итальянского ресторана-кремерии A.Roma в городе Красноярске. Вдохновением открытия магазина полезных продуктов послужил итальянский mercato (рынок).

Задача

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

Концепция

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

Результат

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

Главная страница

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

Мобильная версия

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

Детальная страница товара

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

Детальная карточка рецепта

Рецепты сделаны как для новичков в ЗОЖе, которые не знают что бы приготовить такого полезного, так и для бывалых, – чтобы разнообразить правильное питание.
Для каждого рецепта представлен набор используемых продуктов, которые можно заказать

Каталог

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

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

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

Спасибо за заказ

После успешного оформления заказа пользователь автоматически переходит на Thank you page, где отображается номер заказа. Также на странице есть возможность перехода в Личный кабинет, чтобы можно было следить за состоянием заказа.

Страница о компании

Для вовлеченных пользователей мы добавили подробную страницу о компании: про историю, команду и ценности бренда Сíbo.
Также сделали мультиязычностть на сайте: английский, русский и китайский
Другие проекты

Обсудить проект