Разработали для Стройпарка мобильное приложение. На его примере рассказываем о трендах, которые будут актуальны для e-commerce в 2025 году и в особенности — для строительных и отделочных материалов и DIY-рынка.

Несколько слов о клиенте

Стройпарк — крупный сибирский строительный ретейлер, на рынке с 1998 года.

В оффлайн и онлайн-магазинах сети представлено более 56 000 наименований товаров для стройки, ремонта, дома и сада: от гвоздей и плинтусов до картин и садовых гномов.

А еще специалисты Стройпарка оказывают более 20 сервисных услуг по ремонту, садовым работам и декору.

Зачем Стройпарку понадобилось приложение?

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

А это — более 60%, как показала Яндекс Метрика.

К слову, мебель и товары для дома — одна из самых популярных категорий онлайн-покупок в России

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

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

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

Работу начали с аудита прототипа

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

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

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

Далее приступили к предпроектной аналитике:

• Проанализировали поведение посетителей интернет-магазина Стройпарка. Через сайт покупают преимущественно мужчины старше 25 лет с разных устройств. Убедились: для реализации проекта нужно выбрать кроссплатформенное приложение, которое удовлетворит всех, кто заходит со смартфонов

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

• Разработали подробную структуру будущего приложения

Особенно объемной получилась структура каталога товаров: почти 60 тысяч наименований товаров это вам не шутка! 

Что сделали на этапе дизайна

Здесь тоже особое внимание уделили ревью исходных материалов клиента. И основательно поработали с контентом:

• Разработали краткие версии карточек товаров — для быстрого считывания информации и принятия решений

• Сгруппировали информацию о товаре в блоки

• Разделили путь от просмотра карточки товара до покупки на последовательные шаги, чтобы покупатель не запутался при проверке данных

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

Так он быстрее принимает решение о покупке или снова возвращается в каталог и выбирает другой товар

Артем, дизайнер

Проработав UX, приступили к дизайну. Хорошей базой для работы стал подробный брендбук клиента. Мы слегка доработали его:

• Обновили дизайн форм, кнопок и подложек

• Гармонизировали основные и дополнительные цвета

• Подобрали аккуратные шрифты, удобно читаемые с разных устройств

• Добавили динамики: разработали 3D-анимации для экранов приветствия

На экранах приветствия рассказали покупателям о преимуществах Стройпарка:

Какой функционал реализован

На разработке первым делом решили проблему долгой связи приложения с ПО при сборе данных о заказе. Занимало это длительное время: до 20 секунд пользователь видел пустой экран.

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

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

Что реализовали после:

• Два типа личных кабинетов: для физических и юридических лиц

• Покупатели-юрлица получили уникальную корзину. В ней можно создать объекты с раздельными списками и счетами

• Рассказали покупателям об акциях и бонусной программе

• Внедрили сканер штрихкодов. Через него покупатель сканирует код на товаре и получает подробную информацию в карточке через приложение.

Работает как часы. Фичу оценили и продавцы оффлайн-магазинов: стало быстро и легко уточнять количество товара в наличии и его точную стоимость:

• Интегрировали Яндекс Карты для точных адресов доставки. Приложение определяет закрытые дороги и корректно просчитывает стоимость доставки. Интеграцию сделали через WebView — если бы мы взяли мобильную версию карт, заняли бы много памяти и сделали приложение «тяжелым»

• Интегрировали CберБизнес ID для удобной оплаты покупок. В планах интегрировать и другие платежные системы

Приложение разрабатывали на кроссплатформенном фреймворке React Native. Его код можно использовать одновременно и на iOS, и на Android. Этим значительно сократили время и стоимость разработки для клиента.

Интересно, что разработкой занимались две команды. Мы отвечали за фронтенд, а за бэкенд — разработчики, которые уже занимались веб-сайтом гипермаркета

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

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

Принимаем работу: покупатели прибывают, наш клиент доволен

Приложение получилось функциональным, легким и стильным — все, как и задумывали
( ˘⌣˘)♡

После релиза в RuStore в декабре 2023 года его скачали уже более 10 тысяч человек!

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

Уникальное предложение получили покупатели-юрилица: корзину с раздельными списками покупок и чеками для разных объектов.

Но на этом работу не закончили.

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

Регистрируем в других магазинах приложений: Apple Store, Google Play; рассматриваем регистрацию в Huawei AppGallery, Samsung Galaxy Store.

Чуть позже планируем внедрить чат поддержки покупателей, покупки без регистрации, интегрировать платежные системы других банков (сервис Долям от Т-Банка).

Скачать приложение в RuStore