Какие задачи решает мобильная версия сайта на примере кейса Торговой Сети ТЕХНОНИКОЛЬ (ТСТН)

Более 30% посетителей tstn.ru используют сайт с мобильных устройств, и более 20% заказов относительно всего объема онлайн – продаж приходится также на мобильные устройства.

✓ Бизнес-цель заказчика – увеличить процент заказов с мобильных устройств.

Торговой Сети ТЕХНОНИКОЛЬ важно предлагать своим клиентам омниканальную и бесшовную коммуникацию с покупателями, а использование сайта с мобильного телефона позволяет повысить качество клиентского сервиса: пользователи смартфонов смогут без затруднений ориентироваться в интерфейсе, находить нужные функции для заказа и оплаты.

Команда Progressive Media предложила три варианта решения:

- создать мобильное приложение;

- сделать адаптивный дизайн;

- выпустить мобильную версию сайта.

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

✓ Перед Progressive Media стояла задача по разработке функциональной мобильной версии сайта для покупки строительных материалов.

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

Плюсы мобильной версии сайта

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

• Оптимизация бюджета – является плюсом для заказчика, создание мобильной версии сайта стоит дешевле и быстрее в реализации, чем разработка приложения. Также не придется регулярно тратить деньги и время разработчиков на поддержку и тестирование приложения, операционные системы Android и iOS постоянно развиваются, появляются изменения, на которые надо оперативно реагировать.

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

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

• Функциональный дизайн – одно из ключевых требований, которое стояло перед командой разработки. Удобный для пользователя дизайн приводит посетителя сайта к целевому действию.

• Скорость загрузки сайта – сайт с адаптивным дизайном загружается медленнее, чем мобильная версия сайта. Это связано с тем, что загружается код для всех устройств.

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

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

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

В стек технологий разработки входит CMS 1С-Битрикс на PHP с библиотекой jQuery.

Для мобильной версии tstn.ru было сделано 16 макетов страниц, а с учетом различных состояний и поведений пользователей, попапов, форм обратной связи отрисовано более 60 уникальных дизайн-макетов. В макетах использованы лучшие практики сайтов e-commerce. Команда проекта стремилась перенять опыт ux/ui-дизайна компаний в сфере производителей строительных материалов.

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

2. Концепция и дизайн — следующий этап. За основу взят официальный сайт и брендбук. И, конечно, приняты во внимание отзывы пользователей. Команда дизайнеров подготовила UI-kit с фирменными цветами и логотипом — элементы легли в основу дизайна мобильной версии. В подготовке концепции было две основных цели:

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

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

При этом в подходе к дизайну клиент остался верен основной идее: на первом месте – функциональность.

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

Благодаря созданию UIkit-а получилось ускорить процесс сборки экранов.

3. Разработка

Команда проекта сохранила и адаптировала действующий функционал сайта tstn.ru и внедрила новый дизайн для мобильной версии.

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

Также командой разработки проведена большая работа на стороне административной панели: функционал добавления товарных позиций в сделки из интерфейса интернет-магазина, с учетом указанных параметров клиента, возможность оформления заказа на дефолтного пользователя с параметрами компании, реализация была проведена со связкой: CRM - КешБД - Сайт, механизм доплаты по онлайн-заказу через эквайринг.

После успешного тестирования функционал выгружен на сайт, где исправно работает.

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

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

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

Карточка товара минималистична и не перегружена элементами, что положительно влияет на пользовательский опыт. Посетитель всего в 2-3 клика может ознакомиться с фактурой, материалом, декоративными элементами, технической информацией, рассчитать доставку и количество материала. Особенности товара раскрыты и доступны при открытии карточки товара.

Добавлен раздел «‎Вам могут пригодиться» - сопутствующие товары, пользователь имеет возможность перейти и посмотреть следующую модель, также доступна информация о готовых решениях и последних просмотренных товарах.

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

Удобное расположение блоков в корзине помогает пользователю смартфона совершить конверсионное действие.

Для мобильной версии разработана страница «‎Клуб ТСТН» с информацией о клубе, акциях и сервисах Торговой Сети ТЕХНОНИКОЛЬ.

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

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

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

Также создан и внедрен новый дизайн страниц авторизации, оформления заказа и оплаты.

Команда Progressive Media реализовала мобильную версию сайта tstn.ru с нуля. Все задачи, требования и пожелания заказчика выполнены и учтены. На выходе получился простой и понятный интерфейс, который значительно упростил взаимодействие пользователей с ресурсом.

По итогам первых трех месяцев после релиза число активных пользователей мобильной версии сайта выросло на 50%.

Изначально заявленная заказчиком бизнес-цель — ‎повышение конверсии в мобильной версии сайта была выполнена, количество отказов сократилось, а по ключевым метрикам конверсия выросла более чем в 2 раза.

Мобильная версия сайта получила высокую оценку покупателей продукции ТЕХНОНИКОЛЬ и положительный отзыв заказчика.

В настоящее время команда РМ ведет разработку web-приложения PWA и продолжает поддерживать и развивать сайт tstn.ru: оптимизировать роботу, улучшать дизайн интерфейса и основные пользовательские сценарии, опираясь на отзывы пользователей и заказчика.