Школа ИТ-ремонта. Приложение для сети строительных гипермаркетов «Стройпарк»

«Стройпарк» — сеть строительных магазинов в Сибири. В них можно купить все для ремонта и декора: от гвоздей и плинтусов до картин и садовых гномов. 

У «Стройпарка» много покупателей и регулярных продаж. Каждый, кто занимался ремонтом, знает, что это не финальная точка, а скорее продолжительный процесс или стиль жизни :) Клиенты сети приобретают товары в оффлайн- и онлайн-магазинах. Но большая часть предпочитает делать это онлайн.

Тенденция с каждым годом только набирает обороты. По данным опроса retail.ru, ежегодно процент тех, кто выбирает покупки в онлайн, только растет. Сохранится тренд и в 2024 году.

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

Заказчик решил дополнить интернет-магазин мобильным приложением. Через него удобнее делать покупки на ходу и выбирать нужное за несколько тапов.

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

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

Уже на этапе предпроектной аналитики поняли, что потребуются значительные изменения в бэкенд и небольшие – в бизнес-процессах заказчика. Зачем? Чтобы пользователю было понятно, на какую кнопку нажимать и не совершать ошибок. И чтобы оформление заказа проходило без желания ударить молотком по экрану или просверлить его дрелью :)

Как мы этого достигли? Рассказываем далее.

Перед разработкой мы провели аудит дизайна, с которым пришел заказчик. До нас «‎Стройпарк‎» работал с другим командами, уже был готов вариант прототипа приложения. Но до релиза и запуска продукта разработка не дошла. 

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

Далее проанализировали Яндекс Метрику сайта «Стройпарка». По ней отследили поведение посетителей и поняли, что на сайт заходят преимущественно мужчины старше 25 лет через Android и iOS. Эти данные подтвердили нашу гипотезу: для реализации проекта нужно использовать кроссплатформенное приложение, которое удовлетворит всех, кто заходит со смартфонов. А это — 60,9 % по данным метрики.

После приступили к анализу конкурентов. Рассмотрели 8 приложений для строительных гипермаркетов. 

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

Кроме этого после анализа конкурентов внедрили в структуру несколько фич для удобства покупателей:

— отражение веса товаров в корзине,

— голосовой поиск, поиск по фото,

— штрихкод для начисления бонусов.

Следующий этап — детальная проработка структуры приложения. «Стройпарк» — это магазин с огромным количеством товаров. Потому при проработке структуры получили большое «дерево» с «ветками» страниц МП. 

Продумали логику главной страницы, разделов «Каталог товаров», «Хиты продаж», «Акции и скидки», «Мои заказы», «Мои карты и бонусы», «Наши магазины». 

Вынесли наверх поиск товаров и сканер бар-код. Вынесли в тап-бар кнопки перехода на главную страницу, в каталог, корзину, избранное и в профиль покупателя. Предусмотрели FAQ и карту с отметкой магазинов «Стройпарка». Детально проработали шаги авторизации в зависимости от типа пользователя: физическое или юридическое лицо. Прописали логику фильтрации товаров, карточку товара. 

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

Проектирование и разработку дизайна начали с ревью материалов, которые уже были у заказчика. Дотошно проверили пользовательские сценарии, UX и UI. Составили длинный список изменений и предложений и пошли с ними к заказчику. Объяснили, как сократить путь пользователя до покупки, сделать удобным оформление заказа. Подсветили проблемы с визуалом, рассказали каких экранов не хватает. И принялись за работу: 

— Вписали в дизайн-концепцию фирменный стиль клиента. Собрали UI-кит, доработали цвета и формы, отказались от устаревших подложек.

— Сократили объем информации и сгруппировали его.

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

— Переработали корзину и построили логичный путь пользователя к заказу.

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

— Добавили визуальных фишек.

Сделали 3D-иллюстрации для сплеш-скрина, велком-экранов. Приветственные окна помогают пользователю сориентироваться при первом запуске приложения: предоставляют подсказки по функционалу и полезные ссылки.

На велком-экранах «Стройпарка» мы сделали акцент на преимуществах: выгодная покупка онлайн, возврат товара в течение года, выгодные условия покупок для юридических лиц.

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

Минималистичный, в то же время яркий логотип отлично подходит для маркетинга и мерча. 

Его можно размещать и на больших форматах, и замостить как детали на чем-то небольшом.

Мы разрабатывали фронтовую часть. Бэкенд у заказчика свой; на нем сделана веб-версия магазина. Серверная часть сайта и приложения связаны: данные о заказах собираются в одной системе автоматизации. Потому синхронизировать работу 2 команд было очень важно.

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

Разработку вели на ReactNative. Это кросплатформенный фреймворк: его код можно использовать один раз для версий приложений и на iOS, и на Android. Так мы сократили затраты финансов и времени на разработку и обеспечили хорошую производительность продукта. 

Что сделали для продукта:

— Реализовали понятную покупателю загрузку данных приложения.

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

— Предусмотрели корзины для двух типов покупателей.

У физических лиц — стандартная корзина с данными о выбранных товарах и адресом доставки. Юридические лица могут создавать объекты и добавлять нужный товар к каждой из них.

— Подключили сканер баркодов.

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

— Интегрировали Яндекс Карты для точного просчета стоимости доставки.

В Томске и Томской области есть закрытые военные городки. Без карт система не видела их и не показывала пути объезда. Стоимость доставки из-за этого подсчитывалась некорректно.

— Настроили интеграцию с интернет-банком через СберБизнес ID.

Все документы и операции, проведенные в Sber API, можно увидеть и в веб-, и в мобильном приложении. А покупатели оплачивают покупки удобным им способом: через привязку карты или через QR-код.

Итак, продукт готов — время релиза в магазинах мобильных приложений. К сожалению, пользователям из России и Беларуси все еще сложно регистрировать приложения в Google Play и App Store. Потому на первом этапе вместе с заказчиком решили опубликовать МП сначала в RuStore. Если сразу предоставить все необходимые материалы, модерация проходит примерно за сутки, и приложение готово к работе на устройствах покупателей.

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

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

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

Вместе с коллегами-бэкендерами мы создали комфортную среду клиентам «Стройпарка» для онлайн-покупок, разработав кроссплатформенное мобильное приложение интернет-магазина.

Более 60 % клиентов ранее делали покупки через сайт, но со смартфонов. С веб-версии не всегда неудобно быстро выбирать, заказывать, оплачивать товары и доставку. С приложением делать покупки стало проще и приятнее.

— Путь пользователя от выбора до оплаты покупки стал короче и легче.

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

— Покупать в «Стройпарке» стало удобнее и юридическим лицам.

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

— Поиск нужного товара стал проще и на оффлайн-точках.

С помощью сканера бар-кодов покупатели могут выбрать товар в магазине, а купить его уже через сайт или в приложении, а продавцы в магазинах — оперативно проверить стоимость и наличие выбранного;

— Расчет стоимости доставки покупок проходит без ошибок.

Теперь он отражает точную сумму доставки, в том числе благодаря интеграции с Яндекс Картами.

 — ReactNative позволил оптимально использовать ресурсы и трудозатраты на разработку и поддержку приложения.

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

— Приложение стало ярче, при этом минималистичнее.

Доработав брендбук клиента, сделали гармоничный стильный дизайн, сохранив фирменные цвета и украсив велком-экраны и экраны загрузки 3D-иллюстрациями, чтобы покупателям не было грустно смотреть в одноцветный экран;

— Процесс разработки вошел в ранг особенных.

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