Мобильное приложение «Мой Перекресток» 2.0

Дата запуска: май 2018 года

О клиенте

X5 Retail Group — одна из ведущих российских мультиформатных продуктовых розничных компаний. Управляет магазинами торговых сетей «Пятёрочка», «Перекрёсток», «Карусель» и магазинами «Перекресток Экспресс».

История взаимоотношений История

С 2016 года мы занимались развитием и поддержкой одного из онлайн продуктов компании — мобильного приложения «Мой Перекресток». За это время нам удалось глубоко понять бизнес клиента, построить эффективную совместную команду и подойти к решению сложной и амбициозной задачи.

Новая задача Задача

Вместе с клиентом нам предстояло фактически «с нуля» создать новое мобильное приложение, отвечающее трем основным требованиям:
  • 1. Удобство

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

  • 2. Преемственность

    нам предстояло сохранить в новой версии все полюбившиеся покупателю функции

  • 3. Инновации

    мы должны были интегрировать в приложение множество нововведений, которые должны сделать работу с приложением еще удобнее и проще

Команда Команда

Команду под проект была собрана «с нуля». Сперва мы проводили внутренний отбор и только после того, как убеждались в том, что сотрудник хорошо проявит себя на проекте, проводили знакомство с Product Owner. Обязательным критерием было знанием методик SCRUM: до начала работы новый сотрудник проходил краткий инструктаж о сути проекта и обязательно читал ScrumGuide.

Этапы работы Аналитика

Источники данных для разработки:
  • результаты, собранные с помощью Google Analytics

    какие экраны наиболее популярные, сколько появилось новых пользователей, их «портреты».

  • внутренние базы

  • магазины мобильных приложений

  • рейтинги

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

Для разметки нового приложения использовалась App Metrica. Этот инструмент позволил нам собирать «сырые» данные и отдавать их бизнес-аналитикам для дальнейшей работы.

Мы выявили наиболее популярные разделы приложения и результаты взаимодействия пользователей с ними.

Проектирование

Проектирование проводилось в несколько этапов:
  • 1.

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

  • 2.

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

  • 3.

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

Дизайн

Мы очень сильно переработали дизайн приложения.

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

Разработка

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

  • Внедрили кэширование и тем самым снизили нагрузку на сервер. Это позволило клиенту сократить затраты на закупку дополнительных мощностей;

  • Внедрили логирование и стали использовать его на всех платформах, сделав его доступным для всей команды. Это позволило быстро локализовывать ошибки;

  • Поработали над обратной совместимостью, чтобы пользователи при переходе на новую версию не испытывали проблем с сохранением данных;

  • Использовали микросервисы и теперь поломка чего-то одного не влияет на работоспособность в целом и система остается стабильной;

  • Провели рефакторинг кода: теперь он работает быстрее и с меньшими ошибками, а значит пользователь не ждет отклика и обработки запроса;

  • С помощью JSON Web Token решили проблему разлогина, оптимизировали работу приложения с медленным интернетом или вообще без интернета.

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

Тестирование

Было написано несколько сотен тест-кейсов, которые охватили почти все варианты взаимодействия пользователя с приложением.

Запустили многоуровневую систему тестирования:

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

Эксплуатация

Для разработки и доставки приложения мы использовали систему контейнеризации Docker — это позволило быть уверенным в том, что на всех этапах производства система будет работать корректно. За счет оперативного анализа, мониторинга и аудита мы могли заранее предугадывать, когда серверы перестанут справляться с нагрузкой, и своевременно увеличивать ресурсы для бесперебойной работы сервиса. Мы следили за работой приложения 24/7 и оперативно реагировали на возникающие проблемы, обеспечивая непрерывную доступность сервиса.

Результаты Результаты

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

Обновлена навигация и логика главного экрана. На главной странице показываются релевантные для каждого пользователя товары – что он чаще лайкает; пользователь сам формирует главный экран, добавляя товары по акции/купоны в избранное.

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

Обновлена навигация и логика главного экрана. На главной странице показываются релевантные для каждого пользователя товары – что он чаще лайкает; пользователь сам формирует главный экран, добавляя товары по акции/купоны в избранное.

  • Легкость и скорость: приложение стало «легче» в два раза за счет оптимизации кода; благодаря этому приложение работает быстрее и стабильнее.

  • Устранили критические баги. Например, теперь не происходит разлогина и пользователю не приходится заново входить в приложение в самый неподходящий момент.

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