E-commerce
Мобильные приложения
Мобильное приложение для сети строительных гипермаркетов
Разработать кроссплатформенное мобильное приложение для Аndroid и IOS;
Организовать единый бэкэнд с существующим сайтом;
Реализовать каталог строительных товаров;
Реализовать функционал заказа продукции компании;
Упростить выбор товара и сократить путь пользователя до корзины и совершения оплаты;
Интегрировать приложение с платежной системой;
Опубликовать в магазинах приложений.
Выстроили работу двух независимых команд — взяли ведущую роль с распределением зон ответственности нашей команды фронтенд-разработчиков и бэкендеров со стороны «Стройпарка»;
Провели аудит структуры приложения и прототипа — наработки другой команды, с которой работал до нас клиент;
Провели конкурентный анализ, предложили новый функционал;
Подготовили новую структуру приложения, спроектировали прототип;
Улучшили UX/UI в карточках товара: проработали короткую версию блоков, добавили заголовки, предусмотрели размеры шрифтов;
Обновили UI-кит, подготовили дизайн;
Реализовали два типа покупателей: физических и юридических лиц. Для вторых разработали корзину с возможностью раздельных заказов для нескольких объектов;
Реализовали два типа покупателей: физических и юридических лиц. Для вторых разработали корзину с возможностью раздельных заказов для нескольких объектов;
Настроили интеграцию с Яндекс Картами;
Реализовали возможность оплаты покупок через SberPay;
Внедрили сканер баркодов и штрихкодов;
Опубликовали приложение в RuStore.
На Стройпарке работали две команды. Это обсудили с клиентом еще на этапе переговоров.
Мы разрабатывали фронтенд. Команда бэкенд-разработчиков у клиента уже была. Она разработала веб-сайт гипермаркета.
Серверная часть сайта и приложения связаны: данные о заказах собираются в одной системе автоматизации. Любое изменение на серверной части требует проверки и изменений клиентской части продукта, в нашем случае приложения.
До нас Стройпарк работал с другими командами, которые подготовилили вариант прототипа приложения. Но до релиза и запуска продукта разработка не дошла. Чтобы понять, в чем возникли трудности и что необходимо усилить, в первую очередь мы провели аудит дизайна, с которым пришел клиент.
Сопоставив прототип с задачей, обнаружили несколько неучтенных важных функций. Например, не было сортировки информации о заказах в корзине. Из-за этого покупателю было сложно проверять данные обо всем сразу и последовательно проходить путь от выбора до оплаты покупок.
Отследили поведение посетителей: на сайт заходят преимущественно мужчины старше 25 лет через Android и iOS. Данные подтвердили гипотезу: для реализации проекта нужно выбрать кроссплатформенное приложение, которое удовлетворит всех, кто заходит со смартфонов. А это — 60,9 % по данным метрики.
Здесь рассмотрели 8 приложений для строительных гипермаркетов: Леруа Мерлен, Hoff, Петрович, Твой дом, Стройландия, Baumarkt, Bauhaus.
Первое, на что обратили внимание — долгий путь регистрации пользователя в некоторых приложениях. Предложили сделать его в 2 шага. На первом экране покупатель вводит номер телефона и e-mail, на втором экране — код из смс для подтверждения данных. Другую информацию о себе клиент заполняет уже в личном кабинете приложения. Так новый пользователь не тратит время при первом касании на внесение сразу всех данных (ФИО, адреса, данных карты). А, значит, быстрее приступает к покупкам — задаче, для которой клиент открыл приложение магазина.
После анализа конкурентов внедрили в структуру несколько фич для удобства покупателей:
— Отражение веса товаров в корзине;
— Голосовой поиск и поиск по фото;
— Штрихкод для начисления бонусов.
Стройпарк — магазин с огромным количеством товаров. При разработке структуры мобильного приложения учли все страницы, категории фильтров товаров и другие параметры, которые важны для эффективной навигации пользователей.
Так выглядит лишь часть параметров для сортировки товаров в каталоге
Чтобы не упустить ни одной детали, составили майндмап — интеллектуальная карту. На ней визуализировали и отразили связи блоков друг с другом.
Проработали структуру каждого раздела: панели навигации и велком-скринов, страниц регистрации и авторизации для каждого из типов пользователей, описания товаров, отзывов, блоков сопутствующих товаров, корзины, акций и всех остальных.
Особенно объемной получилась структура каталога товаров: важно было учесть все категории, подкатегории, единицы товаров и проверить, что они соответствуют общей базе данных.
Перед этим этапом мы провели ревью исходных материалов клиента. Предложили варианты оптимальных пользовательских сценариев и визуальных решений.
Блоки в карточке товаров не были обособлены. Нельзя было скрыть часть данных, и нужно было просмотреть всю страницу прежде, чем добавить товар в корзину.
«Мы сделали на это упор, и в результате получили аккуратные карточки. Контент блоков в них теперь не сливается между собой. Это сделали за счет внешних и внутренних отступов»
Артем, дизайнер Пиробайта
Чтобы решить проблему, сделали упор на перекомпоновку контента:
Озаглавили блоки
Этим решением добились легкого считывание контента при прокрутке экрана
Сделали краткие версии блоков
В исходном прототипе блоки с описаниями были достаточно большими. Мы сократили их и сделали так, чтобы часть информации при необходимости развертывалась по табу пользователя.
В краткой версии упор сделали на ключевом контенте: названии и артикуле товара, фотографии, стоимости, рейтинге и отзывах, количестве товара в наличии, добавили возможность сохранить товар в избранном и перейти к оформлению кредита.
При таком подходе покупатель считывает самую важную для покупки информацию и может быстрее принять решение, выбирает этот предмет или снова возвращается в каталог и выбирает другой.
Продумали расположение блоков
Сохранили логику и разместили зависимые блоки между собой рядом друг с другом и последовательно: «Характеристики», «Описание», «Наличие на складах», «Информация о доставке», «Отзывы».
Проработали таблицы с характеристиками товаров
Чтобы информацию было легче считывать, разбили ее на два столбца. Предусмотрели единую ширину ячеек для всех строк. Если бы она была разной, блок был бы более трудным для визуального восприятия.
Добавили разделительные линии
Они помогли сохранить связь между названием и значением в характеристиках товаров.
В версии прототипа, с которым пришел клиент, все данные о выбранных товарах, способе оплаты и адреса доставки были на одном экране. До кнопки «Оформить заказ» покупателю нужно было дойти через заполнение абсолютно всех полей. Иногда из-за этого возникали ошибки при заполнении данных.
Процесс оформления заказа распределили на три экрана. На первом покупатель проверяет выбранные товары: их количество, стоимость. Здесь же — способ получения: самовывоз или доставка, заполняет данные адреса.
На следующем экране покупатель выбирает способ оплаты, возможность воспользоваться дисконтной картой, потратить накопленные бонусы, заполняет данные получателя и финально сверяет стоимость заказа.
По нажатию кнопки «Оформить заказ» покупателю открывается третий экран: с подтверждением статуса заказа.
Стройпарк — крупная сеть, представленная на рынке с 1998 года. В гипермаркетах представлено более 56 000 наименований товаров для стройки, ремонта, дома и сада. У клиента уже был подготовлен подробный яркий брендбук с фирменными цветами и шрифтами, когда было решено создать мобильное приложение.
Мы проанализировали фирменный стиль, сравнили его актуальность в современном дизайне и предложили клиенту, как можно улучшить фирстиль. Изменили формы, сделав их аккуратнее, отказались от устаревшего стиля подложек под текст.
Гармонизировали основные и дополнительные цвета. Убрав контрасты, добились баланса и легкого восприятия дизайна.
Все решение упорядочили и оформили в UI-кит, с которым далее будет удобно при необходимости создавать новые экраны.
Яркий и минималистичный фирстиль Стройпарка отлично переносится на типографию и мерч
Онбординг — важная часть взаимодействия пользователя с приложением. Если покупатель открывает его впервые, он не знает о всех преимуществах и фичах продукта. Из онбординга клиент понимает, как работает навигация, получает подсказки по функционалу, информацию о преимуществах, полезных разделах.
В мобильных приложениях онбординг реализуется через велком-экраны — приветственные окна. Для Стройпарка мы сделали на них акцент на преимуществах: выгодная покупка онлайн, возврат товара в течение года, выгодные условия покупок для юридических лиц.
Анимации делали в Spline — 3D-редакторе для графических дизайнеров. Любой проект, созданный в программе можно интегрировать на сайт либо как эмбед (встраиваемый со сторонних ресурсов элемент), либо через готовый код на JavaScript. Кроме того, у Spline упрощенный интерфейс, благодаря которому в программе легко разобраться и получить качественный результат даже без большого опыта в 3D-моделировании.
У мобильных телефонов небольшие экраны относительно мониторов стационарных компьютеров и ноутбуков. При адаптиве контента иногда возникают трудности с прочтением: один и тот же шрифт по-разному воспринимается в зависимости от размера экрана.
Поэтому мы заранее подобрали и протестировали на устройствах несколько шрифтов и их размеров, чтобы не создать проблем при чтении у части аудитории.
Бэкенд-разработкой занималась та же команда, что делала сайт для Стройпарка. С его серверной частью связана система автоматизации. В ней собираются данные заказов и с сайта, и с мобильного приложения.
Мы отвечали за разработку фронтовой части приложения. Поэтому важно было синхронизировать работу двух независимых команд, четко передавать данные, не растягивать сроки разработки и оперативно вносить корректировки.
В работе вели два бэклога. Внешний вели совместно с бэкендерами. В него вносили изменения, добавленные на фронте, получали корректировки, дорабатывали систему, если было необходимо. Аналогично контролировали и изменения в бэкенде, влияющие на нашу часть работы. Кроме этого фиксировали и описывали выявленные баги. Во внутреннем бэклоге фиксировали задачи и прогресс нашей команды фронтенд-разработчиков.
Мы наладили эффективную коммуникацию трех сторон: в работу активно включался менеджер Стройпарка для утверждения деталей разработки. Благодаря этому работа шла последовательно с соблюдением таймлайна.
Разработку приложения вели на React Native, его код можно использовать одновременно и на iOS, и на Android. Это значительно сократило время и стоимость разработки.
В процессе оптимизации был нюанс. Долго откликалась ПО при сборе данных о заказе. Это занимало длительное время (до 20 секунд). Пользователь видел пустой экран.
Мы реализовали скелетную загрузку. Во время загрузки пользователь видит серые блоки — примерный контент. Так он понимает, что приложение откликается на его действие и обрабатывает информацию, не обновляет страницу и не уходит с нее.
Теперь в приложении есть два типа регистрации и два типа корзин — для физических и юридических лиц. Это стало конкурентным преимуществом.
При регистрации физлицам достаточно указать номер телефона и почту. Юрлицам нужно внести чуть больше данных: форму собственности, название компании, должность, ИНН, КПП, область сотрудничества.
Корзина для физических лиц стандартная, без дополнительных фичей. В ней покупатель видит информацию о выбранных товарах, проверяет количество и стоимость, выбирает способ доставки и оплаты, оформляет и оплачивает их.
Для юрлиц разработали функционал нового уровня: в них можно создать отдельные корзины для разных объектов. Покупки пройдут по двум разным спискам и счетам.
Так выглядит корзина для юридических лиц. Красота, удобство и порядок!
Функция полезна при покупках в оффлайн-магазинах. Ее оценили и покупатели, и продавцы Стройпарка.
Покупатель может отсканировать код на товаре и прочитать подробную информацию о нем в карточке через приложение. Продавец быстро и легко уточняет количество товара в наличии и его точную стоимость.
Яндекс Карты — для точного просчета стоимости доставки
В Томске и Томской области есть закрытые военные городки. Без карт система не видела их и не показывала пути объезда. Стоимость доставки из-за этого подсчитывалась некорректно.
Мы написали код для карты и интегрировали ее в приложение через WebView. Это системный компонент, который отвечает за открытие веб-страниц внутри других приложений. Таким образом интеграция Яндекс Карт работает через встроенный браузер. Если бы мы взяли мобильную версию карт, заняли бы много памяти и сделали приложение «тяжелым». А еще благодаря ним удобно показывать адреса магазинов.
CберБизнес ID — для удобной оплаты покупок
Это технология позволяет продукту напрямую интегрироваться с интернет-банком и мгновенно обмениваться платежными данными. Все документы и операции, проведенные в Sber API, отражаются и в веб-версии магазина, и в мобильном приложении. Покупатели оплачивают покупки удобным им способом: через привязку карты или через QR-код.
Сейчас приложение работает только на платформе Android. Чтобы удостовериться в совместимости и адаптивности, вручную проверяли его на 10 смартфонах с разной производительностью, версией операционной системы и размером.
Также сделали сниффер-тестирование: через него анализировали отправку информации на бэкенд и перехватывали ошибки. С помощью инструмента Postman заранее увидели, как бэкенд обрабатывает информацию, какие данные присылает, как реагирует на действия, не приводящие к целям.
Благодаря этой проверке мы предотвратили несколько ошибок. Например, перед запуском приложения нашли баг в расчетах стоимости доставки на этаж. Доставили данные бэкенд-разработчикам и оперативно устранили выявленные несоответствия.
Продукт готов. Вместе с клиентом приняли решение сначала опубликоваться в RuStore. Модерация проходит примерно за сутки, и приложение можно устанавливать на телефон.
Регистрация приложение в App Store и Google Play для российских разработчиков занимает чуть больше времени. Потому релиз в этих магазинах перенесли на второй этап.
Более 3 000 человек скачали приложения в RuStore после релиза в декабре 2023 года;
Ускорили процесс покупки: путь пользователя от выбора товара до покупки стал короче, проще, логичнее и удобнее;
Реализовали удобный способ оплаты через Сбер ID;
Сделали корзину для юридических лиц с возможностью разделить товары по объектам и формировать раздельные чеки;
Доработали и улучшили UX в карточках товаров: краткие блоки позволяют быстро добавлять предмет в корзину.
Сейчас в мобильном приложении Стройпарка покупатели могут:
Найти необходимые строительные товары;
Оформить доставку выбранных товаров;
Узнать наличие/количество на складе выбранного товара;
Оплатить заказ через приложение;
Сканировать штрих код и искать по нему товар в каталоге;
Зарегистрироваться в роли физического или юридического лица;
Выбирать и заказывать строительные услуги.
Регистрируем приложение в Apple Store и Google Play;
Внедряем чат поддержки для клиентов;
Добавляем возможность покупать без регистрации;
Добавляем возможность разделять платежи клиентов через Тинькофф-Долями и платежные системы других банков.
Хочется выразить благодарность команде компании Pyrobyte за огромный блок работ, проделанный над мобильным приложением Стройпарк. За год совместной работы у нас сложились прекрасные слаженные отношения. Любые проблемы и вопросы решались оперативно, менеджеры всегда на связи, готовы помочь 24/7. Сроки выполняются четко, техническое задание максимально точное, работа с Pyrobyte максимально комфортная. Надеемся на дальнейшее продуктивное сотрудничество!
Беленков С.Б.
Генеральный директор УО ООО «СтройПарк»
