Разработали для Стройпарка мобильное приложение. На его примере рассказываем о трендах, которые будут актуальны для 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.
Чуть позже планируем внедрить чат поддержки покупателей, покупки без регистрации, интегрировать платежные системы других банков (сервис Долям от Т-Банка).
ссылка на оригинал статьи https://habr.com/ru/articles/858408/
Добавить комментарий