Как мобильное приложение увеличило продажи строительного ретейлера на 34%

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

Стройпарк — крупный сибирский строительный ретейлер, на рынке с 1998 года. В оффлайн и онлайн-магазинах сети представлено более 56 000 наименований товаров для стройки, ремонта, дома и сада: от гвоздей и плинтусов до картин и садовых гномов. А еще специалисты Стройпарка оказывают более 20 сервисных услуг по ремонту, садовым работам и декору.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Два типа личных кабинетов: для физических и юридических лиц
   
• Покупатели-юрлица получили уникальную корзину. В ней можно создать объекты с раздельными списками и счетами
  
• Рассказали покупателям об акциях и бонусной программе

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

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