Новый сайт «Перекрёстка»: как AFFINAGE развивает десктопную версию торговой сети и доставку товаров
Раньше заказать экспресс-доставку можно было только в мобильном приложении, десктопной версии у торговой сети не было. При этом количество пользователей десктопов во всей стране составляет около 37% или 44+ млн человек. Команда «Перекрёстка» решила сделать сайт на домене perekrestok.ru, который бы показывал ассортимент офлайн-точек и давал возможность заказать экспресс-доставку или самовывоз из них.
Для ускорения работы «Перекрёсток» обратился к подрядчикам по дизайну, Frontend-разработке и контенту. Команда AFFINAGE отвечала за часть работ по продуктовой аналитике для онлайн-сервиса доставки товаров и верстку ключевых страниц.
Это наш второй проект с «Перекрестком» — до этого мы вместе запускали MVP vprok.ru на React, которое потом стало основным проектом X5 Group на ключевом домене https://www.perekrestok.ru , а старый сайт переехал на vprok.ru. Product Owner торговой сети «Перекресток» Андрей Носов остался доволен нашей совместной работой и предложил поработать над новой десктопной версией вместе.
Перед нами стояли три основные задачи:
1. Найти гипотезы по улучшению конверсии в карточке товара, листинге каталога и странице поиска.
2. Сверстать ключевые страницы торговой сети.
3. Запустить новую версию в срок совместно с инхаус-командой.
Мы понимали, какая большая ответственность лежит на нас как на продуктовых дизайнерах сервиса доставки товаров, ведь на сайт «Перекрестка» с мобильных устройств ежедневно заходят более 60% всей аудитории — 50 тысяч человек. Поэтому, прежде чем приступить к Frontend-разработке, мы все тщательно проанализировали.
Проводим продуктовое исследование
В ритейле огромная конкуренция, и каждой компании важно иметь собственное лицо, которое поможет выделиться на общем фоне и удержать покупателя. Чтобы добиться узнаваемости, мы с командой «Перекрестка» сделали следующее:
- Провели анализ рынка и целевой аудитории. Изучили мировые практики и конкурентов, поискали актуальные эффективные решения. Такой анализ помог понять, в каком окружении находится торговая сеть и чего ей не хватает.
- Предложили гипотезы по улучшению конверсии, создали прототип на основе аналитики и построили цепочку гипотез.
В условиях конкуренции требования потребителей постоянно растут, просто качественной услуги уже недостаточно. Важно не забывать, что товары и продукты клиенты должны получать удобным способом: есть те, кто привык к офлайну, и есть только онлайн-пользователи. Бизнес-модели меняются, и логично что некоторые онлайн-ритейлеры открывают офлайн-точки, в то время как привычные супермаркеты адаптируют свои услуги под потребности рынка и выходят в онлайн.
«Перекресток» пришел к нам за «свежим взглядом»: к моменту старта совместной работы аналитики торговой сети уже провели исследование прямых конкурентов — сетей продуктовых магазинов. Команда UX-дизайнеров AFFINAGE во главе с арт-директором Елизаветой Казанцевой предложили сосредоточиться на лучших практиках известных сервисов по доставке товаров.
В повседневной жизни я часто заказываю готовую еду и товары для дома в популярных сервисах доставок. А еще рядом с моим домом расположен «Перекресток», где я часто покупаю продукты. Все исследования я пропускала через парадигму собственного опыта и старалась сделать сервис по-настоящему удобным. Данные аналитики ритейлера включали только основных конкурентов продуктовых магазинов. Мы же пошли изучать пользовательский опыт тех компаний, которые «заточены» исключительно на доставку. Такой подход позволил нам выдвинуть 14 рабочих гипотез, которые бизнес в последствии протестировал и уже работает над их внедрением.
С помощью «Вебвизора» анализировали оформление заказов и особенно обращали внимание на возможные причины «брошенных корзин». Формируя гипотезы, мы эмпатично встраивались в систему координат пользователя и представляли себя на его месте. К примеру, арт-директор Елизавета Казанцева представила себя клиентом, которому нужно молоко: проходила по каждому этапу и смотрела, что было удобно, и над чем еще предстояло поработать.
Еще одним нашим предложением были тематические списки и персонализированные предложения. К примеру, перед новым годом в каталоге мог бы появиться блок «Продукты на праздник», в преддверии майских выходных — «Наборы для шашлыков». В личном кабинете клиентов, которые раз в месяц покупают одинаковые наборы продуктов или бытовых принадлежностей, могут появиться персонализированные блоки с часто покупаемыми товарами — средствами для мытья посуды, набором резиновых перчаток, гелей для душа и так далее. Такая группировка позволит увеличить средний чек покупателя. Как мы можем заметить, в мобильной версии perekrestok.ru эта функциональность уже реализована.
В любых сервисах доставки важен легкий поиск необходимых товаров: в офлайн-магазинах у каждого товара есть таблички, продукты разложены по категориям, и все интуитивно понятно. В онлайне важно продумать то же самое. От этого будет зависеть удобство и поиск. Когда поиск работает некорректно или не работает совсем, пользователь либо отвлекается и забывает о заказе, либо не находит товар и уходит.
После такого исследования я более осознанно смотрю на пользовательский опыт сервисов доставки и использую лучшие практики на наших проектах. Однако даже в популярных сервисах случаются неприятности: недавно я заказывала пасту в одном известном приложении доставки. Сервис предлагал два варианта специального предложения — самовывоз или доставка со скидкой. На дизайне мне показалось, что я оформляю доставку с 30% скидкой, на деле же скидка была на самовывоз. Фактически сервис ввел меня в заблуждение, хотя я опытный пользователь приложения и сама занимаюсь дизайном подобных функций. Я пыталась связаться со службой поддержки и передать комментарии разработчикам, которые отвечают за приложение. К сожалению, менеджеры не обработали мою обратную связь и вели себя не очень вежливо. После этого случая мое отношение к сервису испортилось. Это история о том, что на дизайне взаимодействие с пользователем не заканчивается, и бизнесу важно продумывать все шаги, чтобы клиент оставался довольным на всех этапах коммуникации с брендом.
Работаем над Frontend’ом
С самого начала работы проект курировал наш тимлид. Он изучил архитектуру проекта и вместе с тимлидом «Перекрестка» выбрал оптимальный стек — React.
Мы с командой проанализировали макеты и выявили повторяющиеся элементы, которые можно было бы выделить в компоненты. К React подключили дополнительную библиотеку и внутреннее хранилище. Затем завели общее пространство для работы в git и подняли площадки.
За три месяца нам удалось сверстать все ключевые страницы десктопной и мобильной версии perekrestok.ru – главная, авторизация, все страницы личного кабинета, акции и многое другое.
Весь продукт написан на TypeScript с использованием специального интерфейса для разработки и тестирования отдельных компонентов Storybook. В архитектуру нашего React-приложения отлично вписался Styled Components. Этот инструмент помог нам удобно связывать логику и стили — зависимость внешнего вида от «прокидываемых» внутрь данных.
Нам было важно сохранить все визуальные элементы, которые команда дизайнеров придумала для улучшения пользовательского опыта одного из ведущих ритейлеров страны. Дизайн становится дизайном только после верстки, ведь именно ее видят конечные потребители. Мы верим, что Design is Frontend, и закладываем это во все наши проекты.
Прокачиваем продуктовую команду perekrestok.ru
Такие проекты прокачивают не только команды, которым передают задачи, но и продуктовую команду заказчиков. Perekrestok.ru не стал исключением.
На этом проекте я усовершенствовал работу с несколькими распределенными командами так, чтобы они не мешали друг другу и действовали сообща. Мы отстроили процессы ревью и деплоя, которые успешно продолжаются спустя несколько месяцев после запуска.
Для тех, кто собирается брать команды на аутсорс, Андрей рекомендует вот что:
Подключайте к проекту инхаус-тимлида. Он сможет быстро помочь команде освоиться на проекте и держать нескольких подрядчиков в тонусе.
- Пообщайтесь с разработчиками, которые будут работать на вашем проекте. Убедитесь, что у них есть необходимая квалификация. Уточните у команды, есть ли у них дополнительные ресурсы на случай если понадобится ускорить выполнение работ.
- Дайте небольшую задачу команде и проверьте, подходит ли вам совместная работа.
- Уточняйте реализуемость дизайна у Frontend-разработчиков.
В 2022 году мы продолжаем совместную работу с AFFINAGE. В связи с периодом турбулентности периодически меняем роадмап и приоритеты. Команда Frontend-разработчиков быстро адаптируется под наши изменения и предлагает такие решения, которые помогут «Перекрестку» рационально использовать внутренние ресурсы разработки. В наших планах — запустить больше lifestyle-контента, добавить рецепты и рекомендации по блюдам.