Мобильное приложение для CMstore: умный поиск и удобный UX

К кейсам

О проекте

CMstore — сеть салонов цифровой техники, интернет-магазин с товарами ведущих мировых брендов и сервисный центр. Компания основана в 2012 году и с тех пор активно развивается, ориентируясь на удобство покупателей: есть рассрочка, Trade-in, акции, оперативная доставка и поддержка.

Наша задача

Вместе с командой клиента создать мобильное приложение со стильным дизайном и необходимыми фичами, которое станет удобным инструментом для покупки техники.

Ситуация

Мы начали работу с backend существующего сайта, сделали личный кабинет пользователя и провели интеграцию с умным поиском elasticsearch, который упрощает подбор товаров. Например, если в поиске ввести «дайсон», система «поймет» запрос и покажет результаты по запросу «Dyson», а при вводе текста в поиске предложит варианты завершения запроса на основе популярных, уже существующих товаров или категорий.

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

Реализация

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

Авторизация

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

Профиль

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

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

Также мы добавили адреса магазинов, FAQ, «О нас», ссылки на социальные сети компании и актуальные вакансии.

Оформление заказа

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

«Через 15 минут» — отображается, если на складе магазина хотя бы один товар из заказа есть в наличии.
«Через 1-3 дня» — отображается, если на складе магазина товара нет в наличии, но он находится на одном из складов.

Сам процесс оформления заказа разделен на четыре этапа:

1. Для самовывоза мы создали карту точек выдачи с функцией геолокации.

2. Далее происходит ввод данных получателя и выбор способа оплаты. Здесь можно указать промокод и посмотреть итоговую стоимость заказа.

3. Мы подключили ЮКассу — пользователь может оплачивать товары и услуги, удобным способом: банковской картой, электронным кошельком, через СБП и др.

4. На финальном экране система сообщает об успешно оформленном заказе с указанием статуса доставки или сроков хранения при самовывозе.

Сравнение

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

Акции и Новости

Чтобы повысить вовлеченность пользователей и упростить доступ к информации, мы добавили акции и новости:

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

Диплинки

Мы реализовали диплинки для товаров и акций. Теперь:

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

Для товаров — на страницу с детальной информацией о конкретном товаре.
Для акций — на страницу с подробностями об акции.

Настроена логика возврата:

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

Корзина

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

Пуши

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

Результаты

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

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