Статья на Cossa: Экология в диджитале. Кейс мобильного приложения «Пропластик»

Как мы начали работать над проектом

СИБУР хотел сделать простой и понятный справочник, в котором рассказывается о разных видах пластиковой упаковки, её бытовых свойствах и возможностях переработки. СИБУР — не только крупнейшая нефтехимическая компания, но один из главных экологически активных брендов России, выступающий за осознанное потребление пластика и его вовлечение в переработку.

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

Таймлайн

1. Октябрь — подписали контракт.
2. Ноябрь — начали писать ТЗ.
3. Декабрь — разработка дизайна. К Новому году у нас уже были полноценный отрисованный дизайн и готовое техническое задание, то есть мы уже знали, что делать и как это делать.
4. С января по март — полноценная разработка проекта.

Если говорить про методологию, то мы придерживались стандартного «Водопада» (waterfall или каскадная модель).

Обсуждение содержания проекта (project scope) с заказчиком → создание прототипов → дизайн → разработка → тестирование на нашей среде → тестирование на среде заказчика → исправление ошибок → релиз.

При выборе методологии мы часто подстраиваемся под клиента. Чаще всего это «Водопад» — лучше всего подходит для небольших проектов с фиксом (fix price) и чёткими требованиями. Иногда канбан с беклогом задач, которые время от времени приоритезируем. Но может быть и SCRUM со стандартными спринтами. Выбираем подход, учитывая специфику проекта и пожелания клиента.

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

Про аудиторию и актуальность проекта

Изначальная аудитория проекта — сознательные рефлексирующие люди от 14 до 40 лет. Ядро аудитории — 14–18 лет, это экологически активная молодёжь, которая не только сортирует и сдаёт отходы в переработку, но и активно приобщает к этому делу семью и друзей. Мы считаем, что именно в этом возрасте формируется характер, привычки и взгляды, и если человек с юношества начинает заботиться об экологии, скорее всего, продолжит делать это всю жизнь.

На рынке уже есть несколько приложений, которые помогают вести экологически правильный образ жизни. Например, Sborbox.

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

Выбор платформы — React Native

Изначально во время тендера мы планировали разрабатывать нативное приложение под каждую платформу. Но когда дело дошло до оценки ТЗ, все разработчики единогласно выбрали кроссплатформенное решение. Сроки были сжатые (2–3 месяца), а технически проект был простым — без интеграций с платёжными системами, эквайрингом или highload-решениями.

Оставалось выбрать React Native или Flutter. Выбрали первый, на то есть несколько причин:

• React Native существует уже 5 лет. За это время платформа сильно выросла и стала более перспективной.
• Если год назад нужно было с нуля писать, например, модули кнопок, то теперь появилось много готовых решений. Flutter же использует свою систему виджетов, которые в любом случае нужно делать самому.
• Так как React Native существует дольше, на его основе создано больше проектов, в том числе приложения Instagram, Facebook и других больших игроков. Поэтому он выглядит надёжнее, в том числе и в глазах клиента; можно показать больше успешных кейсов.
• Команда проекта не работала с Flutter. Зато у нас был опыт с React Native во время разработки других приложений. Например, для грузинского каршеринга AiCar.

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

Если вы решили использовать React Native, учтите следующее:

• Это всё ещё сырая платформа, которая не получила официального релиза 1.0. Сейчас всё остановилось на версии 0.6.
• За последнее время React Native стал гораздо дружелюбнее и удобнее. Сейчас доступно больше инструментов «из коробки», легче работать с зависимостями. Стало меньше костылей, добавились удобные инструменты вроде мгновенной перезагрузки приложения.
• При этом многие нововведения всё ещё сырые и непредсказуемые. Какие-то инструменты могут менять state или вовсе не запускаться. Никуда не делись бесконечные проблемы с бильдами и их запуском.
• Не хватает важных интеграций вроде связи с Firebase.
• Кроссплатформа никуда не денется, но кажется, что React начинает проигрывать в популярности Dart и Flatter.

Как устроено приложение Пропластик

Каталог

Мы сделали простой обучающий каталог на главной странице. Здесь в виде списка собраны все маркировки пластика от 1 до 7 с их официальными названиями и обозначениями. Эти маркировки можно найти на любом изделии из пластика.

Каталог работает как справочник. У каждого вида пластика есть своя памятка, в которой собраны:

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

Карты

Изначально мы хотели использовать в приложении карту Recycle Map — сервис карт, который заточен под раздельный сбор отходов. Однако Recycle Map за последнее время практически не обновлялся в Москве и Московской области. А устаревшие сведения могли негативно сказаться на отзывах пользователей. Решили использовать карты 2ГИС — самые точные карты в России на сегодняшний день.

В первой версии приложения мы решили пойти быстрым и экономичным путём — подключили карты 2GIS с помощью web view. Но после выпуска приложения увидели, что у пользователей постоянно возникают ошибки. Находясь в Ярославле, люди видели карту Москвы и не могли переключить свой город — всё дело было в устройстве web view. Чтобы обезопасить себя от этих багов, мы решили перейти на нативное решение.

Сейчас в приложении нативно встроены карты 2ГИС, на которых отмечены пункты приёма пластика. Заботиться о природе можно из любого города России — в картах можно найти точки как в миллионниках вроде Москвы, так и в небольших городах и даже посёлках.

Что в итоге

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

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

Что касается количества пользователей, то 24 сентября у нас было 1389 установок на iOS и 851 установка на Android.

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

Скачать приложение Пропластик можно в App Store и Google Play.