Новый сайт «Перекрёстка»: как AFFINAGE развивает десктопную версию торговой сети и доставку товаров
Раньше заказать экспресс-доставку можно было только в мобильном приложении, десктопной версии у торговой сети не было. При этом количество пользователей десктопов во всей стране составляет около 37% или 44+ млн человек. Команда «Перекрёстка» решила сделать сайт на домене perekrestok.ru, который бы показывал ассортимент офлайн-точек и давал возможность заказать экспресс-доставку или самовывоз из них.
Для ускорения работы «Перекрёсток» обратился к подрядчикам по дизайну, Frontend-разработке и контенту. Команда AFFINAGE отвечала за часть работ по продуктовой аналитике для онлайн-сервиса доставки товаров и верстку ключевых страниц.
Перед нами стояли три основные задачи:
1. Найти гипотезы по улучшению конверсии в карточке товара, листинге каталога и странице поиска.
2. Сверстать ключевые страницы торговой сети.
3. Запустить новую версию в срок совместно с инхаус-командой.
Мы понимали, какая большая ответственность лежит на нас как на продуктовых дизайнерах сервиса доставки товаров, ведь на сайт «Перекрестка» с мобильных устройств ежедневно заходят более 60% всей аудитории — 50 тысяч человек. Поэтому, прежде чем приступить к Frontend-разработке, мы все тщательно проанализировали.
Проводим продуктовое исследование
В ритейле огромная конкуренция, и каждой компании важно иметь собственное лицо, которое поможет выделиться на общем фоне и удержать покупателя. Чтобы добиться узнаваемости, мы с командой «Перекрестка» сделали следующее:
- Провели анализ рынка и целевой аудитории. Изучили мировые практики и конкурентов, поискали актуальные эффективные решения. Такой анализ помог понять, в каком окружении находится торговая сеть и чего ей не хватает.
- Предложили гипотезы по улучшению конверсии, создали прототип на основе аналитики и построили цепочку гипотез.
«Перекресток» пришел к нам за «свежим взглядом»: к моменту старта совместной работы аналитики торговой сети уже провели исследование прямых конкурентов — сетей продуктовых магазинов. Команда UX-дизайнеров AFFINAGE во главе с арт-директором Елизаветой Казанцевой предложили сосредоточиться на лучших практиках известных сервисов по доставке товаров.
С помощью «Вебвизора» анализировали оформление заказов и особенно обращали внимание на возможные причины «брошенных корзин». Формируя гипотезы, мы эмпатично встраивались в систему координат пользователя и представляли себя на его месте. К примеру, арт-директор Елизавета Казанцева представила себя клиентом, которому нужно молоко: проходила по каждому этапу и смотрела, что было удобно, и над чем еще предстояло поработать.
Еще одним нашим предложением были тематические списки и персонализированные предложения. К примеру, перед новым годом в каталоге мог бы появиться блок «Продукты на праздник», в преддверии майских выходных — «Наборы для шашлыков». В личном кабинете клиентов, которые раз в месяц покупают одинаковые наборы продуктов или бытовых принадлежностей, могут появиться персонализированные блоки с часто покупаемыми товарами — средствами для мытья посуды, набором резиновых перчаток, гелей для душа и так далее. Такая группировка позволит увеличить средний чек покупателя. Как мы можем заметить, в мобильной версии perekrestok.ru эта функциональность уже реализована.
Работаем над Frontend’ом
С самого начала работы проект курировал наш тимлид. Он изучил архитектуру проекта и вместе с тимлидом «Перекрестка» выбрал оптимальный стек — React.
За три месяца нам удалось сверстать все ключевые страницы десктопной и мобильной версии perekrestok.ru – главная, авторизация, все страницы личного кабинета, акции и многое другое.
Прокачиваем продуктовую команду perekrestok.ru
Такие проекты прокачивают не только команды, которым передают задачи, но и продуктовую команду заказчиков. Perekrestok.ru не стал исключением.
Для тех, кто собирается брать команды на аутсорс, Андрей рекомендует вот что:
Подключайте к проекту инхаус-тимлида. Он сможет быстро помочь команде освоиться на проекте и держать нескольких подрядчиков в тонусе.
- Пообщайтесь с разработчиками, которые будут работать на вашем проекте. Убедитесь, что у них есть необходимая квалификация. Уточните у команды, есть ли у них дополнительные ресурсы на случай если понадобится ускорить выполнение работ.
- Дайте небольшую задачу команде и проверьте, подходит ли вам совместная работа.
- Уточняйте реализуемость дизайна у Frontend-разработчиков.
#кейс #affinage #продуктоваякоманда #продуктоваястратегия #перекресток #ecommerce #доставка #frontend