Красное & Белое

Чем крут проект?

Свою работу компания начала в 2006 году. Сейчас это без сомнения одна из самых больших федеральных сетей. В 2016-м она насчитывает почти 3000 магазинов в 39 регионах.

В 2014-м «К&Б» запустили новый сайт. Но, несмотря на его постоянное усовершенствование, через два года ресурс потребовал серьезных изменений. Количество пользователей постоянно растет, конкуренты норовят опередить…

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

Решение

  • Провести анализ конкурентов.
  • Изучить федеральных лидеров в сфере интернет-торговли.
  • Провести юзабилити-тестирование текущей версии сайта.
  • Составить портреты пользователей.
  • Проработать пользовательские истории.
  • Продумать карту путешествий с описанием проблем и решений.
  • Резюмировать предложения по улучшению.
  • Подготовить интерактивные прототипы.

Только крупные сети

Никаких алкомаркетов. Только крупные продуктовые ритейлеры. Для объективности оценки я определяю пять параметров: удобство, производительность, адаптивность, контент-стратегия и технологии. Проставляя по ним баллы, я составляю объективное мнение о качестве сайтов.

< 1 / 3 &rt;
< 1 / 3 &rt;

Лучшие из лучших

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

Такие разные юзеры

Определяю тех, кто активно пользуется сайтом. Удивительно, но публика довольно разношерстная. Кое-как «упаковываю» группы пользователей в шесть самостоятельных портретов юзеров.

Компанейский Антон

Любит весело проводить время. Вместе с друзьями выбирает алкоголь на тусовку. Пока не определился: заказать что-то что «проверенное» или «поэкспериментировать».

Уставший Павел

Задержался на работе. Возвращается домой. Жена попросила купить молока и печенья, а рядом с промзоной нет продуктовых магазинов. Вспоминает, что по дороге есть магазины «К&Б», нужно уточнить адреса.

Экономная Марина

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

Активная Ирина

Организовывает свадьбы и прочие меропрития. Одна из ближайших свадеб будет проходить в шатре. Необходимо точно просчитать, сколько алкоголя и воды понадобиться и сразу сделать предварительный заказ.

Скромный Артём

Познакомился с девушкой в сети. Несмотря на свою застенчивость пригласил её в гости на романтический ужин. Сам студент, в напитках не разбирается совсем. Хочет разобраться, какой напиток лучше приобрести и сколько это будет стоить.

Занятой Михаил

На днях идет к одному из крупных клиентов своей компании на встречу. Нужно прикупить хороший алкоголь в качестве презента. Времени на посещение магазинов нет. Быстрее найти и заказать в интернете.

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

На 50 страницах — подробное описание каждого типа пользователей. А главное — конкретные предложения по решению возможных проблем на каждом из этапов взаимодействия с интерфейсом.

Как улучшить?

Чтобы понять, в каких именно улучшениях нуждается сайт, провожу его юзабилити-тестирование. Смотрю на него глазами пользователя и выполняю стандартные операции. Провожу детальный анализ всех доступных метрик. Почему пользователи уходят с сайта? Что не нравится посетителям мобильной версии? Как улучшить ресурс? После нескольких дней излучения резюмирую свои наблюдения и делюсь интересными мыслями.

«Новичкам» не нравится

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

Посмотрим почему

Внимательно просматриваю все короткие визиты в вебвизоре, пытаясь найти закономерность в действиях пользователей.

Проблема с мобильными

¾ посетителей с «отказами» заходят на сайт с мобильных устройств. Вывод очевиден: текущая мобильная версия непригодна для использования.

В чем дело?

Проблем слишком много. Да и отдельная мобильная версия сейчас ни к чему. Нужно просто заменить её качественным адаптивом.

Самое важное

Изучаю самые посещаемые разделы сайта. Им нужно будет уделить особое внимание. Также важно повысить посещаемость непопулярных разделов.

Изучаем карты

Смотрю, на какие элементы пользователи кликают чаще всего. Эти сведения очень важны.

Что интересует?

Определяю основные точки входа — разделы каталога. Популярностью пользуются «Магазины» и «Дисконтная карта».

Важные проблемы

Получаю доступ в админку и читаю все отзывы из «Обратной связи». Сразу определяются самые острые проблемы сайта, вызывающие негатив.

Мнение в сети

Гуглю мнение о бренде и корпоративном сайте. Возможно, взглянув на ресурс глазами потребителя, мне удастся почерпнуть что-то новое.

Положительное впечатление

Изучив сотни отзывов, делаю вывод: о «К&Б» отзываются действительно хорошо. Многие приходят туда именно за продуктами. Всех радуют дешевые цены.

Четыре десятка рекомендаций

Примерами лидеров отрасли вдохновилась. Фишки конкурентов изучила. Ключевых пользователей определила. В их проблемы и задачи вникла.

Теперь резюмирую всю собранную информацию. Формулирую конкретные рекомендации. Всего более сорока страниц. На каждой — информация по улучшению одного из моментов от иконки до логики навигации по разделам.

Проще найти

Вношу рекомендации по внедрению на сайт интеллектуального поиска.

Выбрать лучшее

Предлагаю добавить в каталог новые разделы с новинками, акционными и тематическими товарами.

Ничего не забыть

Рассказываю об удобном функционале похожих и сопутствующих товаров и модуле «Недавно просмотренные».

Выбрать удобное время

Корректирую логику оформления предварительного заказа.

Найти классный рецепт

Говорю о необходимости создания нового информационного раздела.

Поделиться своим выбором

Предлагаю ввести механизм шаринга своей корзины с заказом.

Быстро отыскать

Рассказываю об улучшениях относительно выбора магазина.

Выгодно купить

Вношу предложения по акционным товарам.

Ещё круче!

Приступаю к применению рекомендаций на практике. Исторически сложилось, что у «К&Б» два разных сайта — каталог товаров и брендовый. Объединяем их в один. Упрощаем структуру, убрав дублирующиеся разделы. Меню разбиваем на два логических блока.

Выносим на главную страницу нового «общего» сайта каталог — это самый популярный раздел. Трансформируем баннера. Изменяем блок с контактной информацией. Размещаем в футере новостную ленту.

Теперь сайт будет не только визуально выглядеть чище , но и станет более простым и понятным.

Скетч

Дьявол кроется в мелочах

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

Вход на сайт

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

Выбор города по алфавиту

Планируется подключение корректного модуля определения геолокации. Но если вдруг город требуется сменить принудительно, нужно сделать эту возможность удобной.

Выбор города по региону

Вариант выбора города можно переключить прямо на плашке. Главное в таких списочных выборах — внятная логика группировки элементов.

Список категорий

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

Список товаров

Прорабатываем фильтры, вводим параметры сортировки. Продумываем два варианта отображения товаров: плиткой и списком. Акцент — на большие фото товаров, цену и метку спец.предложения. Остальную информацию показываем при наведении.

Выбор магазина

Для уточнения наличия товара, нужно выбрать магазин. В списке и на карте рядом с каждым из магазинов выведется кол-во. Можно ранжировать магазины по удаленности от пользователя, определив его местоположение автоматически.

Один магазин

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

Карточка товара

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

Посмотрите вживую

После завершения работы над прототипами я подготовила обоснование.

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

Для удобства проставлены ссылки на скриншоты и данные из Яндекс.Метрики (сводки, карты кликов и т.д.).

Понравился проект?

Давайте обсудим