Интернет-магазин техники с функцией аукциона и комплексное маркетинговое сопровождение для бренда Alo-Alo

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

На выходе получили максимально полное представление о ситуации на рынке интернет-магазинов техники. Результаты аналитики структурировали в Mind Map и перешли к прототипам.

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

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

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

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

На основе всех собранных данных, продумали структуру и спроектировали 11 макетов страниц интернет-магазина.

1. Главная страница. Учитывая особенности восприятия контента целевой аудиторией и привычные алгоритмы взаимодействия пользователей с интернет-магазинами — со старта поиск конкретного товара или категории, регулярные предложения и уведомления о скидках, однозначная навигация — решили не перегружать главную страницу большим количеством блоков. Каждый блок воздействует на разные психологические триггеры ключевых сегментов ЦА: товары с максимальной уценкой; новые товары; сезонные баннеры (лето — время для занятий спортом на свежем воздухе, а у нас как раз есть смарт-часы для более эффективных тренировок!); товары, которые участвуют в аукционе.
2. Каталог. Каталог разбили на 5 категорий с кастомными системами фильтрации для максимально удобного и быстрого поиска.
3. Шаблоны страниц категории и карточки товара. При разработке шаблонов держали баланс между информативностью и юзабельностью: было важно разместить всю ключевую информацию о характеристиках товара, способах оплаты, вариантах доставки, при этом четко расставить акценты, чтобы плавно провести пользователя по процессу и подвести к переходу на следующий шаг.
4. Доставка. Одно из ключевых возражений ЦА — возможность и скорость доставки. Собрали всю информацию в удобном формате в рамках отдельной страницы.
5. Пункты выдачи. Для юзеров, которым удобнее забрать товар самовывозом, собрали сведения о каждом пункте на странице «Пункты выдачи». Страница точечно закрывает конкретную боль и не заставляет пользователя искать ответ по всему сайту.
6. Топовые предложения. Аналитика показала, что значительная часть пользователей хорошо реагируют на спецпредложения, товары недели, акции и прочие маркетинговые офферы. Поэтому спроектировали страницу, где раз в несколько дней обновляются самые выгодные позиции.
7. Техподдержка. Страница, которая отвечает на частые вопросы пользователей и превентивно закрывает возможные опасения. Также в рамках страницы можно задать свой вопрос менеджеру любым удобным пользователю способом.
8. Уведомления. Здесь аккумулируются все уведомления системы, а непрочитанные подсвечиваются акцентной иконкой — все максимально нативно, по аналогии с соцсетями, где много времени проводит целевая аудитория.
9. Корзина. Реализовали понятную корзину с маркетинг-фишками, которые удерживают внимание и гармонично подталкивают завершить процесс покупки: прогресс-бар, визуализирующий изменение статуса заказа, акцентная цена со скидкой, количество людей, отслеживающих тот же товар.
10. Страница оформления заказа. Добавили на страницу только нужные инпуты, не перегружая интерфейс бесполезными функциями, усложняющими флоу. Так пользователь может быстро указать нужные данные и зафиналить оформление, не запутавшись в логике.

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

Для удобной навигации вкладки личного кабинета разбили на категории:

• личная информация,
• финансы,
• покупки,
• управление аккаунтом,
• сервис и помощь.

Кратко расскажем про каждую вкладку.

1. Главная. Здесь собрана приоритетная для пользователя информация: ближайшие доставки, важные уведомления, персональные предложения на основе анализа его личных предпочтений.
2. Уведомления. Вкладка, на которой собраны все уведомления, при этом важные подсвечиваются отдельно.
3. Мои платежи. Транзакции пользователя с указанием номера заказа, фото товара, даты, суммы, способа оплаты и статуса (оплата/возврат) — максимум информации для того, чтобы пользователю было легко ориентироваться в том, когда, сколько и за что он заплатил.
4. Банковские карты. Список привязанных банковских карт, которыми пользователь может оплачивать товары онлайн. Здесь же можно добавить новую карту.
5. Мои покупки. Перечень всех заказов с датой получения, стоимостью, способом доставки и фильтрацией по категориям: ожидают оплаты, в работе, выполненные, отмененные. Так поиск нужного заказа не требует никаких дополнительных усилий и занимает несколько секунд.
6. Мои возвраты. Вкладка построена по принципу предыдущей. В ней пользователь может отслеживать статус возвратов — на рассмотрении, в работе, выполненные.
7. Электронные чеки. Для улучшения пользовательского опыта реализовали функционал электронных чеков: пользователь может оформить заказ, получить уникальный QR-код и показать его курьеру при получении товара. Все QR-коды хранятся в отдельной вкладке.
8. Смена пароля. В любой момент пользователь может сменить пароль на новый. Предусмотрели 2 способа, чтобы юзер мог выбрать наиболее удобный для себя: с помощью электронной почты или номера телефона.
9. Безопасность. Здесь пользователь может дополнительно защитить свой аккаунт, включив двухфакторную аутентификацию. Кроме того, во вкладке собираются активные сеансы с указанием наименования устройства, с которого был совершен вход в аккаунт, местоположения, даты и времени. Предусмотрено управление аккаунтом — выход из него на этом или всех устройствах.
10. Ответы на частые вопросы. База знаний, в которой собраны самые частые вопросы пользователей и ответы на них. Этот раздел помогает разгрузить техподдержку и дает возможность клиенту закрыть все вопросы в рамках личного кабинета без дополнительных коммуникаций со специалистами.
11. Чат с техподдержкой. Онлайн-чат, в котором можно пообщаться с менеджером и задать любой интересующий вопрос.

Для попиксельного переноса макетов в код создали HTML-шаблоны, для стилизации HTML-элементов использовали CSS.

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

Провели комплексное тестирование:

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

Интегрировали верстку с серверной логикой, обеспечивая корректное взаимодействие фронтенда с API и базой данных. Задали управление товарами и ценами, программирование конфигураторов, обработку заказов, расчет стоимости доставки, интеграцию интернет-магазина с платежными системами. Настроили тестовую среду, еще раз протестировали и, наконец, релизнули в прод.