В рамках проекта «Сделка здесь и сейчас!» команды технических специалистов М.Видео и Mobile Dimension разработали планшеты для консультантов торгового зала.

О компании

М.Видео – лидирующая российская розничная сеть, специализирующаяся на продаже электроники и бытовой техники в России. М.Видео является одной из крупнейших европейских компаний в этом сегменте. В 1 квартале 2017 года сеть насчитывала 399 магазинов в 165 городах России.

Задача перед Mobile Dimension

Не так-то просто быть продавцом-консультантом в М.Видео. Даже если ты настоящий эксперт с ярко выраженным энциклопедическим складом ума и феноменальной памятью, запомнить огромный ассортимент магазина – от блендеров до плазменных панелей, от мобильных чехлов до холодильников, насчитывающий около 20 000 наименований техники, сложно. А теперь представьте, что для каждого товара есть целый набор аксессуаров, и у каждого – свои технические характеристики, свои преимущества и недостатки. И это еще не все сложности: покупатель не просто ждет квалифицированный ответ, он ждёт его мгновенно, здесь и сейчас. И ведь покупатель – не один, покупателей много.

К счастью, в этом мире есть мобильные технологии и Mobile Dimension. Благодаря слаженной совместной работе технических команд Mobile Dimension и М.Видео у продавцов магазинов сети появился свой персональный электронный консультант, который знает все и получает данные онлайн. Причем не только об ассортименте в целом и каждом товаре в отдельности, но и немного о покупателе.

На старте задача звучала предельно четко: повысить объем продаж за счет внедрения «планшета для консультантов торгового зала» на 3%. По факту первых встреч и обсуждений стало очевидно, что планшет должен способствовать не только повышению эффективности продаж, но и росту up- и cross-sales. А еще он должен быть интегрирован в программу лояльности и уметь предложить покупателю дополнительную мотивацию приобретать больше товаров и увеличить свой средний чек. Для полного понимания функционала были проведены встречи с десятками консультантов, а также проанализирован процесс продаж в условиях реальных магазинов.

Каждый консультант магазина, взяв в руки планшет с нашим приложением, должен получить:

• Исчерпывающую информацию о товарном ассортименте магазина и сети в целом
• Полную информацию о технических характеристиках каждого продукта
• Возможность сравнить аналогичные товары
• Исчерпывающую информацию обо всех аксессуарах и сопутствующих товарах к каждому продукту
• Доступ к профилю клиента и бонусному счету в программе лояльности «М.Видео — Бонус»
• Возможность в несколько кликов зарегистрировать покупателя в системе лояльности
• Информацию о действующих скидках и акциях в магазине

Сложно? Да! Но для нас нет невыполнимых задач.

Решение Mobile Dimension

С целью реализации проекта на стороне Mobile Dimension была выделена проектная группа в составе 11 человек, включая четырех back-end разработчиков, трех тестировщиков, двух мобильных разработчиков и двух UX/UI-дизайнеров. Для повышения динамики работы группа технических специалистов Mobile Dimension работала непосредственно в головном офисе М.Видео бок-о-бок с проектной командой со стороны заказчика по методологии Agile-Scrum. Решение было реализовано на платформе UWP для целевых устройств — планшетов на базе Windows 10.

Удобный каталог товаров

• Полный каталог товаров
• Исчерпывающая информация о товарах
• Характеристики
• Наличие в магазине

Александр, старший бэк-енд разработчик Mobile Dimension:

В рамках back-end разработки был использован классический стек технологий, включая Java 8, Spring и Hibernate. Чтобы сделать дальнейшее развитие бизнес-логики решения модульным, гибким и легким, мы применили микро-сервисную архитектуру, построенную на Docker. Каждый сервис получился максимально изолированным благодаря API Gateway, проксирующему вызовы от приложения к сервисам, при необходимости агрегируя данные. Если сервис А нуждается в данных сервиса В, то он не забирает их напрямую, а использует выделенный маршрутизатор. С одной стороны, это несколько усложнило код, с другой – каждый сервис стал работать практически в изолированном окружении. Это позволяет легко писать unit-тесты уровня сервиса без мокирования. Такая ситуация позволяет ещё на этапе сборки понять, нарушили ли систему нововведения, и, таким образом, сэкономить время. Если сервис обращается к базе данных, то перед тестом происходит миграция относящихся к этому тесту данных, и, при необходимости, эти данные сразу вставляются в код.

Так как все запросы принимает на себя Gateway API, к нему предъявляются повышенные требования по надёжности и производительности. Так как на период ожидания ответов от других сервисов уходило немало времени, мы применяли асинхронную схему взаимодействия, доступную в 8-й версии Java. Для выполнения запросов мы использовали библиотеку AsyncHttpClient, которая используется и в средстве для нагрузочного тестирования gatling. С помощью Swagger у нас всегда была актуальная информация об API нашего приложения, а благодаря MapStruct мы смогли легко модифицировать данные между сервисами.

Немалую часть приложения занимает общение с сервисной платформой — общим API, скрывающим за собой все бизнес-системы типа CRM. По сути, это единственное, что нам приходилось мокировать в тестах.

Быстрый поиск, сравнение и заказ товаров

• Сравнение товаров
• Быстрое оформление покупки

Виктория, UX/UI-дизайнер Mobile Dimension:

В чем была главная сложность при создании этого планшетного решения? Нам надо было создать инструмент, интересный не только продавцу, но и покупателю! Корпоративное и пользовательское решение в одном приложении! Это challenge!

Это был проект, который мы создавали бок-о-бок с консультантами магазинов. Мы работали не столько в офисе, сколько «в полях». Мы ездили в магазины М.Видео, общались с продавцами и консультантами, собирали информацию, обсуждали удобство будущего интерфейса. Собранная информация ложилась в основу концептов, которые вновь тестировались в условиях живого общения с конечными пользователями. Мы намеренно выбирали различных специалистов: опытных консультантов и новичков. Посещали разные точки: например, я узнала, что магазины в торговых центрах и отдельностоящие отличаются друг от друга количеством покупателей и целями их визита – и все это нужно было предусмотреть в решении и отразить в дизайне. Для проверки самых безумных идей создавались интерактивные анимации в Principle: сначала мы обсуждали их внутри команды, затем – с командой заказчика, и обязательно — несли показывать продавцам. Одним словом, мы проверяли интерфейсные решения по мере их создания, что помогло вовремя корректировать и совершенствовать интерфейсы, избежать крупных ошибок и больших затрат ресурсов.

Описанные работы проводились в рамках первого этапа, в ходе которого мы собрали воедино, с одной стороны, требования бизнеса, с другой – пожелания продавцов. В основу оформления лег бренд-бук М.Видео и требования Windows. Дизайн разрабатывался с помощью Sketch. Из первых макетов интерактивные прототипы создавали в Marvel App, открывали их на планшете и тестировали пользовательские сценарии. В настоящее время работа над интерфейсом продолжается. Мы получаем новые отзывы, думаем над новыми решениями и стремимся сделать приложение еще более удобным и функциональным.

Программа лояльности

• Информация о покупателе
• Калькулятор бонусов

Ян, UWP-разработчик Mobile Dimension:

Выбирать технологию UWP (Universal Windows Platform) необходимо всем компаниям, для которых главной экосистемой является ОС Windows 10. М.Видео — в их числе. UWP позволяет разворачивать созданные приложения не только на мобильных устройствах или планшетах, но и на ПК сотрудников компании. Сохранив и улучшив наследие WPF – MVVM из коробки, богатые средства по разработке, стилизации и расширение контроллов – UWP фокусируется на решении насущной задачи, а именно на разработке приложений, которые при минимальной плате могут разворачиваться на всех типах устройств на ОС Windows 10.

Так совпало, что во время разработки «планшета консультанта» для М.Видео вышло решение Visual Studio 2017, которое также расширило наши возможности работы с UWP. Чего стоит только возможность редактирования разметки приложения в режиме Debug без необходимости перезапуска для просмотра изменений — это значительно ускорило скорость разработки приложения!

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

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

Зона покупателя

• Спидометр бонусов
• Информация о баллах и бонусах

Александр, ведущий инженер по автоматизации тестирования Mobile Dimension:

В рамках проекта в задачи тестировщика входили настройка CI, написание автотестов для frontend (UWP – java+ appium) и backend (java), а также проведение нагрузочного тестирования.

В начале стояла задача настройки CI. Требовались сборки артефактов бекенда и фронтенда, а также автотестов на бекенд. Для этого мы выбрали TeamCity. Сделав конфигурации для сборки артефактов, я занялся конфигурациями для развертывания приложения. В итоге артефакты стали собираться в одной сборке и развертываться несколькими сборками в Docker-контейнеры (Dev, Test, Front Test). Для отладки в dev-сборках и мокирования сторонних сервисов в автотестах также в докер контейнере был выбран Wiremock. Далее была сделана сборка для тестирования всех коммитов, в которой приложение собиралось, развертывалось, тестировалось и, при отсутствии проблем после тестирования, удалялось. Следующим шагом стали конфигурации для релизных артефактов. В них приложение собирается в докер-контейнер для продакшен-сервера и прод-лайк тестового стенда. Хранятся контейнеры в докер-репозитории, обновление продакшен-сервера занимает не более 5 минут, но с учетом двух нод – проходит бесшовно. Фронтенд написан на C#(UWP), собирается на сервере CI с помощью msbuild в конфигурациях х64 и х86.

Теперь о тестировании. Все тест-кейсы и результаты запусков тестов ведутся в TestRail. Автотесты бекенда написаны на java с применением фреймворков – testng, rest-assured, hibernate, spring.

Перед каждым запуском очищается тестовая база и маппинги wiremock. Тесты запускаются в несколько потоков параллельно по классам. После выполнения тестов результаты собираются и добавляются в TestRail. В автотестах фронтенда используется другой стек в соответствии с требованиями заказчика, а именно java и junit+cucumber. Сами тесты написаны на скриптовом языке gherkin, они хранятся в TestRail, во время запуска забираются оттуда и прогоняются. Также были использованы spring, hibernate и appium. Для автоматической установки последней сборки приложения были написаны скрипты на powershell.

Отзыв со стороны заказчика

Евгений Джамалов, куратор проекта со стороны М.Видео:

«Планшет консультанта» — это сложный проект сразу по нескольким причинам. Во-первых, из-за многозадачности. В ТЗ был включен обширный функционал для обслуживания множества бизнес-процессов и задач, стоявших перед компанией, а также HR-работа с продавцами. Во-вторых, в определенный момент мы осознали необходимость интеграции разработки с уже существовавшим на тот момент решением m_mobile, которым активно пользовались консультанты в зоне смартфонов и цифровой электроники. Это потребовало постепенной доработки и изменения интерфейса. По сути, мы решали нелегкую и очень интересную задачу интеграции приложений, когда нужно избежать дублирования функций и сохранить для пользователя единый user flow. В-третьих, масштаб, обуславливавший повышенные требования к нагрузкам и безопасности данных.
Команда Mobile Dimension продемонстрировала гибкость, оперативность и полное соответствие профессиональных навыков сложной технической задаче. Выбранный формат работы Agile позволил нам тесно взаимодействовать друг с другом, быстро адаптироваться к изменениям и динамично двигаться к цели. Первоначальная задача по выпуску минимального жизненного функционала выполнена успешно. Теперь перед нами новая цель – как можно быстрее предоставить нашим пользователям полнофункциональное приложение, чтобы продавцы «М.Видео» оперативно сопровождали полный цикл покупателя в розничном магазине — от помощи в выборе техники и совершения покупки до пост-продажного сопровождения.