Bringston 1.0

Версия 1.0 Версия 2.0

Заказчик:

Bringston – это онлайн-супермаркет в Москве, предлагающий быструю доставку продуктов питания и товаров для дома от более чем двухсот проверенных поставщиков.

Задачи проекта:

Разработать и запустить первое мобильное приложение, которое позволит пользователю совершать заказы с помощью всех современных смартфонов на операционных системах Android и iOS.

Технологии

Для запуска MVP (minimum viable product – минимально жизнеспособный продукт, первая версия) был выбран инструмент React Native. Это технология для разработки мобильных решений от Facebook, которая позволяет создавать одно приложение для разных операционных систем (iOS и Android).
Такое решение сокращает затраты на разработку и поддержку приложения, а также ускоряет его запуск без потери качества.

Контент в приложении управляется на стороне сайта www.bringston.ru, разработанного на CMS «Битрикс». Товары, история заказов и другой контент подгружается в приложение по API. И таким же образом, в панель администрирования отправляются заказы и информация об оплате.

Рассказывает руководитель проекта
Дюгаев Денис

Проектирование и разработка дизайна

В России достаточно быстрый мобильный интернет. Но скорость работы приложения зависит ещё и от быстродействия используемых смартфонов. Приложение должно быть лёгким и функциональным.

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

Дизайн мобильного приложения Bringston разработан в рамках фирменного стиля Заказчика. В нём не используются сложные "тяжелые" элементы. Всё спроектировано и отрисовано исключительно ради быстродействия.

Функционал мобильного приложения

Главная страница - стартовый экран приложения. Тут предлагаются акции, популярные товары и тематические наборы продуктов.

Изначально мы планировали авторизовывать пользователя сразу после входа в приложение. Но политика площадок регулярно меняется. И в актуальных требованиях App Store указано, что пользователь должен иметь возможность изучить каталог перед регистрацией.

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

Вход и регистрация

Если пользователь готов сформировать заказ, приложение предложит ему зарегистрироваться или войти с помощью учётной записи на сайте Bringston.

Каталог и избранное

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

Любимые товары пользователь может добавлять в раздел «Избранное».
Это поможет быстрее находить и добавлять их в новые заказы в будущем.

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

При оформлении заказа, приложение подсказывает пользователю популярные товары. Тут же, клиент может воспользоваться промокодом для получения скидки на заказ. Стоимость товаров пересчитывается автоматически.

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

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

При выборе оплаты через приложение, банковская карта привязывается к аккаунту пользователя, и сумма заказа списывается с неё после сборки заказа на складе.
Кроме этого, доступны платежи с помощью Apple Pay, Google Pay и Samsung Pay (в зависимости от функционала смартфона).
Если при сборке заказа какого-то товара не окажется в наличии, сборщик удалит его из заказа или заменит на аналог по согласованию с покупателем.

Иконки и снимки экранов

Иконка адаптируется под каждую площадку:

Снимки экранов выполнены в виде презентации приложения и интернет-магазина. Они разработаны под разрешения:

• iPhone 6,5 дюймов – 1242 x 2688 пикселей
• iPhone 5,5 дюймов – 1242 х 2208 пикселей
• iPad 12,9 дюймов – 2048 х 2732 пикселя

Скачать и ознакомиться с разработанным приложением можно по ссылкам:

Уже спустя год этот проект не был похож на первоначальную вариант, который описан выше. Первая версия изменилась до неузнаваемости. И об этом мы написали отдельный кейс: Bringston: версия 2.0