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

Исследование, дизайн и разработка сайта

Задача

Перезапустить сайт крупной сети торговых центров. Придумать новый визуальный язык и повысить эффективность сайта для бизнеса.

Схема работы

Два потока: разработка и исследования

Чтобы сэкономить время заказчика и быстро выпустить готовый продукт, мы запустили два параллельных потока задач. Начали с аналитики и большого исследования, потом подключили разработку и сделали редизайн с адаптивом и новым «look & feel» — фейслифтинг сайта.

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

Дизайн и digital-стратегия

Мы сделали три подхода, три разных дизайн-концепции.
Первая, с которой выиграли тендер, как часто бывает, не была использована в реальной работе.

Концепция №1/ Тендерный вариант

Первую дизайн-концепцию мы нарисовали, не зная нюансов проекта. Наша цель — нащупать новый визуальный язык, понять, на каких принципах мы будем работать дальше. Как упростить подачу и сделать адаптив.

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

Наш ход мысли оказался верным — мы выиграли тендер с этим вариантом.

Концепция №2/ Мода и минимализм

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

Мы сформулировали три главных принципа дизайна проекта:

Универсальность /  Динамичность / Адаптивность

Новые вводные от бренда — скандинавские цвета.

Автор концепции Евгений Новажеев позже выложил ее на Behance и получил награду Featured work in Interaction/UX UI

Посмотреть на Behance

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

Концепция №3/ Баланс

Третья концепция впитала весь опыт первых подходов и новые вводные от клиента, а также первые результаты работы команды аналитиков. Была принята клиентом и пошла в работу. Арт-директору удалось найти баланс и нащупать модный образ, оставаться актуальным, оставаясь ближе к аудитории.

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

Попить кофе и перекусить

Устали? Подкрепитесь в наших ресторанах и кафе

Рестораны и кафе

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

Покататься на коньках

Ледовая площадка в любое время года для вас

8:00-23:00
Посмотреть кино

Все новинки кино в нашем кинотеатре

9:00-24:00 Расписание сеансов

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

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

Гайдлайн

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

Исследования

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

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

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

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

5 000

Ответов в онлайн-опросе

1 000

Ответов на вопросы офлайн в центрах

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

Для того чтобы эти данные было удобно использовать всей команде, — описали персоны и составили CJM для каждой из них. Мы многое узнали о логике покупателя, его привычках проводить время и потребностях.

На этом этапе у нас появилась масса инсайтов о том, что можно было бы изменить не только онлайн, но и офлайн.

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

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

Я хочу сдавать покупки в одном месте, а не бродить по всему центру все эти километры между магазинами! Это утомляет.

Представляете, парковка для инвалидов всегда была закрыта на замок, в нее вообще нельзя было попасть!

А я не знал, что карта торговых центров может быть не только кредитной, но и дебетовой...

Юзабилити-тестирование

На основании знания о поведенческих сегментах мы рекрутировали представителей аудитории на юзабилити-тестирование сайта и на включенные наблюдения. По результатам мы выявили набор интерфейсных проблем для последующего исправления. Включенные наблюдения дали информацию о том, как пользователи взаимодействуют с ГИГОЙ офлайн, какой информации или функционала не хватает на сайте для решения офлайн-задач.

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

Аватар

Олег Рудаков

Директор по развитию направления аналитики

Все данные в итоге мы свели в 200-страничный отчет. В нем было описание всех сегментов пользователей, шагов клиентского опыта и рекомендации для бизнеса. Мы описали все боли, которые нам удалось выявить.

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

Разработка / Rest API

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

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

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

Результаты

  • Новый сайт с современным адаптивным дизайном
  • Приоритизированный бэклог задач, построенный на основе реальных потребностей и барьеров покупателей
  • Гайдлайн для всех digital- и офлайн-коммуникаций (социальные сети, баннеры, рассылки и проч.)
  • Rest API, универсальная шина для мобильного приложения

Над проектом работали

  • Виталий Дощенко

    Руководитель проектного офиса

  • Татьяна Болдырева

    Руководитель проекта

  • Мария Кинаш

    Руководитель проекта

  • Денис Шепелев

    Арт-директор

  • Евгений Новажеев

    Дизайнер

  • Дмитрий Бубонец

    Моушен директор

  • Олег Рудаков

    Ведущий веб-аналитик

  • Кирилл Бушев

    Ведущий веб-аналитик

  • Артем Кулбасов

    Web-аналитик

  • Мария Крутько

    UX-аналитик

  • Юлия Суворова

    Ведущий UX-аналитик

  • Виталий Болатаев

    UX-аналитик

  • Ольга Черникова

    UX-аналитик

  • Ильяс Базаров

    UX-аналитик

  • Артем Гриценко

    Проектировщик

  • Андрей Колоденскийй

    Проектировщик

  • Иван Мищенко

    Team Leader разработки

  • Роман Кондрашов

    Php-разработчик

  • Евгений Бабурин

    Php-разработчик

  • Егор Кададинский

    Php-разработчик

  • Игорь Яковлев

    Frontend-разработчик

  • Дмитрий Соболь

    DevOps

  • Дарина Гордеева

    QA Team Leader

  • Ирина Елсукова

    QA-инженер

  • Анна Коротаева

    QA-инженер

  • Иван Косарев

    Тестировщик автоматизатор

  • Сергей Король

    Копирайтер

Вам понравилось? Поделитесь в соцсетях.

+7 495 981-01-85 + Стать клиентом
Услуги Кейсы Контент-хаб