Волковский п-кт 146 "лит. А" этаж 3

Dostawemo

Разработка мобильного приложения iOS и Android. Сервис совместных покупок.

Разработка мобильного приложения ios и android маркетплайс

О приложении Dostawemo

Разработка нативного мобильного приложения сервис совместные покупки Dostawemo под ос iOS и Android, web панель управления приложением и интеграцией со сторонними сервисами.

Dostawemo — это качественно проработанная маркетинговая стратегия. Удобность использования приложения. Качественный и красивый дизайн. Прозрачность работы сервиса. А также новые внедренные инструменты для повышения лояльности покупателей сервиса.

В ходе работ были созданы два нативных приложения ios и android. Web панель администратора с богатым функционалом и различными правами доступа. Серверная часть. Качественный дизайн. Удобная навигация, в которой учтен пользовательский опыт. Продумана маркетинговая стратегия. Реализован «социальный замок» для уменьшения стоимости привлечения пользователей в приложение.

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

Заказчик — частный инвестор Start up проект. Санкт-Петербург

Ниша: Совместные покупки

Сторонние сервисы интеграции: 1С предприятие, смс-сервис, банковский эквайринг для приема платежей в приложении.

Год реализации: 2019

Срок реализации проекта «под ключ»:

Разработка программной части проекта — 62 рабочих дня

Подготовительная работа (сбор информации, маркетинговая стратегия, и пр.) — 42 рабочих дня.

Задача и начало

К нам обратился Заказчик с просьбой создать ПРОДУКТ в нише совместные покупки, поскольку «те сервисы, что сейчас представлены в сервисе это полное г…» (с) Заказчик. Описал основные задачи, что должно быть и чтобы он и как улучшил.

Наша команда, вооружившись 2 человек маркетологами, принялась изучать сам рынок совместных покупок и существующие сервисы. Выявлять слабые и сильные стороны. Составлять список «болей» пользователей и список их решения. Опросом пользователей, чтобы они хотели видеть в качественно новой проекте.

Свели всю информацию воедино. Проанализировали ее. Структурировали и передали на суд заказчика и получив обратную связь «вау! о..о…ребята делаем! проект взлетит», приступили к написанию технического задания для всего проекта.

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

Тогда, совместно, всей командой и заказчиком мы сели и подумали как оставить и овец целыми и волков накормить, в нашем случае можно читать «как стартовать проект с наименьшими затратами». Решение которое родилось получилось устроило все стороны. А выглядит оно так:

  1. Разбиваем все техническое задание проекта на этапы по стоимости, срокам и реальности реализации.
  2. Выделяем этап для MVP
  3. Пишем дорожную карту реализации всего проекта
  4. Реализуем проект частями.

В рамках первого этапа для MVP модели было принято решение — стартовать с разработки мобильного приложения под Android + web панель администрирования, с минимально необходимым для нормальной работы приложения, функционалом. Далее разработка мобильного приложения под iOS. Доработки web панели. Доработки сервиса, на основе обратной связи от пользователей. Реализация web версии (сайта) для работы с сервисом с компьютера, через браузер.

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

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

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

И вот, что у нас получилось

Главный или стартовый экран приложения Dostawemo

На первом экране после запуска приложения, мы видим:

  1. Название приложения и иконку-кнопку «Корзина».
  2. Новостное объявления, выполненное в виде Push уведомления, по клику на которое пользователь попадает на экран с новостью.
  3. Строка умного поиска.
  4. Слайдер с баннерами закупок, на которых необходимо акцентировать внимание пользователей. Данные баннеры добавляются из панели администрирования.
  5. Раздел «Особая подборка» — данный раздел пока находится под NDA и будет реализован и введен в эксплуатацию вместе с версией приложения для iOS.
  6. Фото с названием товара, названием закупки из которого показывается данное фото товара и ценой из случайной закупки. Витрина. Также любой товар можно добавить в избранное, не заходя в карточку товара для последующего просмотра, нажав на иконку «сердечко»
  7. Карточка случайной закупки.
  8. Навигационное меню состоящие из 3х элементов:
  • «Поиск» — данная кнопка ведет по умолчанию на стартовый экран.
  • «We» — раздел с информацией о закупках, в которых участвует пользователь, которые состоятся на 100% и новые закупки.
  • «Отзывы» — данная кнопка ведет на экран отзывов о товарах, к которые были куплены пользователями в приложении.

Экраны поиск и результаты поиска

Для того чтобы начать поиск товара в приложении, пользователю необходимо тапнуть на строку «поиск», после чего открывается список наиболее популярных поисковых запросов (то, что искали другие пользователи в приложении). Когда пользователь начинает набор с клавиатуры ввод первых букв поискового запроса, система сама предлагает варианты поисковых словосочетаний исходя из названий товаров, имеющихся в системе. Далее, если пользователь продолжает ввод, то система начинает убирать неподходящие варианты. В момент поиска, в списке поисковых запросов пользователь видит количество товаров по подходящим запросам, которые отображаются в скобках рядом с запросом.

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

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

Экран карточка закупки

Каждый товар имеет свою относиться к своей закупке.

На двух экранах отображена закупка и информация о ней.

Перейдя в закупку, пользователь видит общую информацию о ней, а именно:

  1. Название закупки
  2. Кнопка «Условия закупки», нажав на которую пользователь открывает экран «условия закупки»
  3. Фильтры товаров, которые есть в закупке, для более легкого поиска нужного покупателю товара. Фильтр перемещается свайпом влево-право.
  4. Баннер закупки.
  5. Название закупки.
  6. Порядковый номер, а именно в какой раз данная закупка вновь собирается. Стоит уточнить, что не актуальные закупки или не популярные закупки в приложении повторятся не будут. Следовательно покупатель с помощью простой фишки, как номер закупки может определить ее востребованность.
  7. Осталось дней — оставшееся количество дней до даты когда будет объявлен «Стоп».
  8. Закупка состоится на % — шкала, отображающая процесс текущего сбора по данной закупке.
  9. Флаги. Флагами мы отобразили страну производителя и страну поставщика. Если в закупке большое количество стран производителей, то будет флаг каждой страны.
  10. Количество участников, которые уже приняли участие в данной закупке.
  11. Количество товаров, которые есть в данной закупке. Просьба не пытаться производить математические расчеты, суммируя цифры товаров в скобках, которые стоят у фильтров и отображаемое количество товаров — это дизайн макет, а не скриншот из рабочей версии мобильного приложения.
  12. Статус закупки — статус в котором она сейчас находится. На каждый статус предусмотрены те или иные действия от системы, а также различные возможности для пользователей.
  13. Далее плиткой идут товары, отображаемые также как и на главной странице.

Экран «Условия закупки»

На данном экране пользователь может увидеть и ознакомиться с условиями по данной закупке.

  1. Название закупки и ее статус
  2. Общая сумма закупки и сколько средств собранно на текущий момент
  3. Шкала % сбора
  4. Основная информация, такая как: Город отправления, организаторский сбор в %, включен Организации.сбор или не включен в стоимость товара, стоимость доставки до города и время доставки до города в днях, после того как закупка будет признана как состоявшаяся.
  5. Варианты доставки со стоимостью для каждого из вариантов.
  6. Доступные способы оплаты — изначально было 2 варианта, по факту остался только один — оплата картой в приложении.
  7. Информация о производителе/поставщике по данной закупке.
  8. Дата. когда будет объявлен «Стоп».

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

Карточка товара

В приложении Dostawemo мы реализовали карточку товара таким образом, чтобы покупатель получал как можно больше информации о товаре. Кроме того, мы учли такой фактор человека, как «лень читать, хочу посмотреть глазами», поэтому сделали возможность просмотра видео обзора о товаре (если поставщик предоставляет его), а также добавление до 10 фотографий на каждый товар.

Итак, карточка товара мобильного приложения Dostawemo, что на ней есть из функционала.

  1. Галерея промо материалов. Если есть видео у товара,  то оно показывается первым, далее за ним, в слайдере, следуют по порядку фотографии товара, можно добавить до 10 фото на каждый товар. При этом если тапнуть на фото, то оно увеличивается во весь экран и с помощью функции Zoom можно рассмотреть мельчайшие детали на фото, но только при одном условии, что фотография качественная.
  2. На слайдере также есть кнопка «Шер», нажав которую пользователь может отправить ссылку на товар своим друзьям и знакомым, с помощью приложений, установленных на его устройстве. При этом пользователь который получит данную ссылку и перейдет по ней, то если у него установлено приложение Dostawemo он попадет сразу в карточку данного товара (при условии, что закупка имеет соответсвующий статус и заказ товара возможен, если не имеет, то попадет на стартовый экран). Если у пользователя получившего ссылку на товар не установлено приложение, то в этом случае его автоматически перенаправляет в Google Play Market или AppStore на страницу для скачивания приложения. В текущей версии, в реализации приложения под Android системно он будет направлен в Google Play Market.
  3. Далее по порядку у нас слудуют Название товара и название закупки откуда этот товар. При этом при клике на название закупки пользователь попадает в карточку закупки, о которой писали чуть выше.
  4. Средняя стоимость на я.маркете и стоимость товара в Dostawemo, для того чтобы сориентировать пользователя визуально по стоимости товаров и выгоде покупки в приложении.
  5. Отображение размерной сетки, с возможностью показа различной, согласно сделанного выбора, поскольку в мире товары имеющие размерность маркируются по разному.  И соответсвенно отображение самих размеров, с согласно выбранной сетки.
  6. Кнопка помочь с выбором — при на ее нажатие, пользователь увидит размерную таблицу с подробностями как правильно выбрать размер конкретного товара.
  7. Кнопки «Добавить в корзину» и «Добавить в избранное».
  8. Завершает все блок разделенный на три секции
    1. «Информация о товаре» — характеристики, описание товара и прочая текстовая информация, которая не имеет отдельных полей.
    2. «Отзывы» — все отзывы оставленные пользователями, которые покупали данный товар в сервисе. При чем стоит обратить внимание на то, что все отзывы в сервисе только в видео формате и то, ч то пользователь не покупавший данный товар в приложении не сможет. оставить о нем отзыв.
    3. «Задать вопрос» — раздел в котором пользователь может задать вопрос организаторов закупки и увидеть на него свой ответ. Притом все вопросы и отзывы публичные, чтобы не было 100500 одинаковых.

 

Корзина и оплата товара

Поскольку в приложении Dostawemo 1 поставщик = 1 закупка, то на уровне корзины они разделяются по разным заказам. При этом пользователь может «гулять» в приложении по разным закупкам, закидывать товары в корзину, а уже в ней они распределяться по закупкам и сформируются в разные заказы, при условии, что товары из разных закупок.

В корзине пользователь может увидеть следующее:

  1. Все товары распределены по своим закупкам. Даже если каждого товара по 1 ед в заказе.
  2. По каждому из заказов представлена информация о нем:
    1. Название закупки и номер заказа.
    2. Мини фото каждого товара и информацией о нем (Название, размер, цвет, стоимость и количество ед.)
    3. Общая сумма заказа.
    4. Кнопка «Заказать еще» (на данном макете не представлена, но реализовано приложении), нажав которую пользователь переходит именно в ту закупку, изо которой сформирован данный заказ.
    5. Кнопка «Оформить заказ», которая ведет на внесение предоплаты, на отдельном экране.

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

После того как пользователь нажал в корзине «Оформить заказ», он попадает на страницу оформления заказ, в которой:

  1. Видит товары из оформляемого заказа.
  2. Выбирает способ получения заказа. Если самовывозом из офиса Dostawemo и за бесплатно, то в этом случае пользователь не указывает свой адрес доставки. Если пользователь выбирает вариант «из пункта самовывоза», то открывается карта, ан которой пользователь выбирает данный пункт, с согласно его города. Если пользователь выбирает вариант «Доставка курьером до двери», то в этом случае у него дополнительно появляется возможно указать адрес доставки, выбрав из ранее сохраненных или введя новый адрес.
  3. Выбирает способ оплаты. Как ранее и говорилось, в приложении оставлен только один способ оплаты «Картой в приложении».
  4. Поле у Вас есть промо-код. Система сама видит промо коды, которые есть у пользователя и предлагает ими воспользоваться для получения общей скидки.
  5. Раздел «Общие итоги» — количество товаров в данном заказе и их сумма, способ доставки и его стоимость, если применен промо код, то указана скидка в денежном выражении. Итоговая стоимость заказа к оплате.
  6. Надпись внести предоплату 100 рублей и кнопка на переход экрана выбор карты оплаты и внесение предоплаты.  Данная функция на дизайн макете не отображена. Суть ее в том, что есть проблема — сегодня пользователь заказывает товары, не насчитывая на то будут ли у него деньги на их полажу к моменту сбора закупки. Если пользователь в момент когда закупка собрана отказывается от оплаты заказа, то страдают остальные участники закупки, закупка ставиться на «добор» и сроки ее исполнения увеличиваются. Поэтому мы вышли таким образом, ч то предлагаем пользователю оплатить 100 рублей и тем самым подтвердить свои намерения участия. При чем стоит учесть тот факт, что если закупка не состоится по вине сервиса — то эти 100 рублей возвращаются пользователю на его счет. Если пользователь не оплатил счет финальный, когда закупка набрала нужное количество, т.е. отказался учавствовать в ней, то 100 рублей ему не возвращаются.
  7. Далее происходит выбор карты или добавление новой на сумму 100 рублей.
  8. После успешной оплаты, пользователь видит сообщение об этом.

 

Отзывы в приложении и профиль пользователя.

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

Итак, нажимая кнопку «отзывы» в нав баре, пользователь попадает на экран, на котором видит:

  • Краткую информацию из своего профиля.
    • Фото в миниатюре.
    • Свои ФИО.
    • Город.к который пользователь указал в своем профиле.
    • Кнопку перехода в свой профиль.
  • Ленту всех видео отзывов, которые оставили другие пользователи, в которой по порядку их появления отображены блоки с отзывами. Информация которая доступна пользователям из блока отзыва:
    • Название закупки и товара, к которому был оставлен отзыв.
    • Когда был оставлен отзыв и общее количество его просмотров.
    • Превью отзыва, нажав на которое начнется воспроизведение видео.
    • Стоимость товара.
    • Миниатюру фото профиля пользователя, который оставил отзыв, его Имя и первую букву фамилии.
    • Количество лайков и дизлайков, поставленных этому отзыву другими пользователями.
  • Вкладку «мои отзывы» — на нее пользователь переходит нажав на название вкладки. В этой вкладке пользователь видит:
    • Сначала товары, которые ожидают его отзыва. При этом сообщение, о том, что есть товары, ожидающие отзыва, формируются в виде Push сообщения после того, как у заказа поменялся статус на «Получен пользователем», не ранее этого. Также в значке информере, который «вешается» на вкладку, пользователь видит количество отзывов которое требуется оставить. Этот же информер суммируется к другим и их общее количество показывается на иконке приложения.
    • Далее пользователь видит ленту СВОИХ отзывов, которые он ранее оставлял к другим товарам и закупкам, с информационными блоками описанными выше.

Профиль пользователя в мобильном приложении Dostawemo.

В своем профиле, пользователь может видеть следующую информацию:

  • Фото и его редактирование/изменение.
  • Фамилия имя и отчество и их изменение.
  • Интеграция с социальными сетями и возможность их отключения.
  • При свайпе влево, открывается дон информация:
    • Город
    • Увлечения
    • Дата регистрации пользователя в системе.
  • Для того чтобы перейти в настройки и редактирование профиля, пользователю необходимо нажать на иконку «Карандаш» в правом верхнем углу фотографии
  • Вкладки «Бонусы» (на макете не правильно названа, по факту «информация о профиле») в которой:
    • Видит бонусные баллы, которые можно обменять на дополнительную скидку в системе — программа лояльности за определенные действия в системе.
    • Информацию о том, как заработать эти баллы и зато они даются.
    • Информер о «Важном системном сообщении».
    • Закупки, в которых сформированы и выставлены счета на оплату всего заказа.
    • Историю всех транзакций, совершенных им в системе.
  • Вкладку «Доставка», перейдя в которую, пользователь может выбрать предпочитаемый способ, добавить, удалить или изменить существующие.

Итоги по текущей реализации.

Пока это вся информация, которую мы можем описать о данном кейсе, по причине NDA.

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

Следующим этапом реализации стоит запуск мобильного приложения под ос iOS, который запланирован на март 2020 года и об этом мы напишем в продолжении данного кейса.

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

 

Если Вы хотите создать качественное нативное мобильное приложение под ос iOS и Android для своего бизнеса или Start Up проекта из ниши маркетплейс, мы готовы Вам в этом помочь. Для этого просто оставьте заявку у нас на сайте в форме ниже, мы всегда с Вами найдем общий язык, как по стеку технологий, так и по бюджету.