Интерактивная проекция
Корпоративный сайт в стиле ретровейв
Интерактивная проекция
Корпоративный сайт в стиле ретровейв
Неоновые яркие цвета, парящие в воздухе образы, магические жесты — вы в мире интерактивной проекции, а ООО «Интерактивная проекция» — его создатель (еще производитель и поставщик оборудования и программного обеспечения для интерактивных игр с проекцией, да и сами игры они тоже создают).
Их основная аудитория — как бюджетные организации (детские сады, школы, музеи), так и владельцы частных образовательных и развлекательных учреждений для детей (ТЦ, развлекательные комнаты, парки). Среди клиентов-гигантов: McDonald’s, Burger King, Coca-Cola, Балтика, Unilever. Как видно из списка, с коммерческими организациями все ОК, решили подтянуть и рынок образования.
Их основная аудитория — как бюджетные организации (детские сады, школы, музеи), так и владельцы частных образовательных и развлекательных учреждений для детей (ТЦ, развлекательные комнаты, парки). Среди клиентов-гигантов: McDonald’s, Burger King, Coca-Cola, Балтика, Unilever. Как видно из списка, с коммерческими организациями все ОК, решили подтянуть и рынок образования.
Задачи
1
Обновить корпоративный сайт, максимально сохранив структуру старого сайта
2
Выделить сайт среди конкурентов
3
Завершить оба этапа работ для релиза сайта
Аналитика
Старый сайт существовал уже несколько лет и к нему были подключены метрики — золотой кладезь для аналитики и подтверждения гипотез о целевом использовании сайта и его пользователях. Кроме того, заказчик четко знал, для кого и зачем будет новый сайт.
Что важного рассказала метрика:
(анализ сайта с 26.02.2019 по 25.02.2020)
Что важного рассказала метрика:
(анализ сайта с 26.02.2019 по 25.02.2020)
- Ключевые интересы пользователей сосредоточены вокруг бизнеса, в большой степени интересны электроника, образование, дети и финансовая тема.
- Трафик является целевым, случайные посетители заходят относительно редки (об этом говорит небольшой процент отказов до 12%).
- Среднее время на сайте составляет 3:43, что достаточно для поиска контактов, но едва ли указывает на сценарий изучения информации о компании и продукте.
- Большую часть посетителей составляют пользователи ПК, что подтверждает гипотезу об использовании сайта с рабочих компьютеров. Доля пользователей мобильных устройств довольно мала: около 17%. Однако за последний год есть тенденция к росту доли пользователей мобильных устройств среди посетителей сайта до 30% (адаптивная версия не обязательна, но есть смысл реализовать ее на перспективу). Этот рост скачкообразный, сезонный.
- Когда пользователи приходят из поисковых систем, они ищут конкретный товар — необходимы проработанные посадочные страницы под ключевые продукты.
- Пользователи интересуются ценами, важно их наличии на сайте.
Агрегация требований ту мач
На этапе аналитики после агрегации требований структура и функционал сайта разрослись сильно — это означало, что срок релиза получался сильно позже того, чем нужен был заказчику.
Первоначальной задачей был релиз сайта в июне, т.к. у нас оборудование для детских образовательных учреждений: школ, садов, и к сентябрю все стараются определиться с выбором оборудования и согласовать бюджет. Поэтому сроки публикации нового сайта для нас очень важны. Тогда Антон предложил разделить проект на два этапа, поскольку первоначальные сроки завершения всех работ нам не подходили. Пока мы со своей стороны наполняли сайт контентом для завершения первого этапа, второй уже был наполовину готов. В итоге решили дождаться завершения обоих этапов и назначили релиз на август.
Наталья
Куратор проекта со стороны клиента
В первый этап вошли те задачи, которые необходимы для базового рабочего варианта сайта:
Во второй этап вошли:
- разработка ТЗ и прототипирование,
- главная страница, страница 404, типовая текстовая страница,
- раздел «Новости»,
- раздел «Продукция» (фильтр, список продуктов, детальная страница),
- калькулятор (для детальной карточки интерактивного стола и панели),
- форма заявки, адаптивная версия и прочие сервисные элементы.
Во второй этап вошли:
- поиск по сайту (выпадающие подсказки и страницы с результатами поиска),
- страница «Контакты»,
- страница списка проектов,
- детальная страница проекта,
- страница списка игр,
- детальная страница игры,
- страница «Партнеры»,
- импорт новостей со старого сайта на новый.
Вот почему скрам круче других методов реализации проекта — он гибок, можно по ходу проекта вносить изменения и работать небольшими спринтами. Что произошло в проекте «Интерактивных проекций»: после агрегации мы поняли, что полный набор желаемых функций будет готов тогда, когда рынку это будет уже не нужно. Поэтому выделили список обязательного функционала и сформировали из него первый релиз, который будет готов к нужной дате и сможет приносить деньги. Прочие, безусловно крутые, но не первостепенные функции и возможности вывели во второй релиз, но начали работать над ними уже в параллель с первым. Когда обязательный функционал уже верстался и программировался, мы рисовали и согласовывали макеты для следующего этапа. Между первой и второй, как говорится, промежуток небольшой ;)
Антон
Менеджер проекта
Дизайн
На анализе конкурентов раскладка сайтов выглядела так, будто это скрины одного и того же сайта: все на белом фоне, в пестрых мультяшных цветах и с обилием промороликов с одинаковыми сценариями (вот дети играют в это, в вот они играют в то) — казалось бы, все логично и ожидаемо, поэтому в дизайне сделали все в точности до наоборот.
Я люблю бывать в игровых зонах, где с самых дверей ты погружаешься в неоновый лабиринт аркадных автоматов. Такие места переносят не только детишек, но и даже самого угрюмого взрослого в ретровэйв.
Для пущего антуража у меня был плейлист в этом же стиле, который тоже повлиял на цветовые версии проекта.
Для пущего антуража у меня был плейлист в этом же стиле, который тоже повлиял на цветовые версии проекта.
Кристина
Дизайнер
На чем мы сделали акцент:
Меню ненавязчиво всегда следует за пользователем. На старом сайте оно также всегда было с пользователем, на каждой странице сайта, но это раздражало и при переходе на другие страницы было непонятно, где ты находишься и что делать дальше.
- Темная тема
- Анимация вместо видео
- Эффект свечения по ховеру
- Параллакс
- Светящийся анимированный лоадер
- Анимационные элементы
- В разделе «Продукция» есть интерактивный «ховербол» (так его назвал наш разработчик).
Меню ненавязчиво всегда следует за пользователем. На старом сайте оно также всегда было с пользователем, на каждой странице сайта, но это раздражало и при переходе на другие страницы было непонятно, где ты находишься и что делать дальше.
Мы сохранили эту идею, но сделали меню более удобным :)
Разработка
На первом этапе разработки гвоздем программы стал калькулятор конечной стоимости товара и 3D-модели.
Как бы калькулятор, но как бы фильтр
Для продуктов интерактивной панели и интерактивного стола есть несколько опций внешнего вида и функций. При выборе тех или иных опций, конечная стоимость продукта меняется.
Чтобы рассчитать цену, нужен калькулятор. Изначально предполагали, что один параметр товара — это одна SKU. Так насчитали около 400 SKU, но когда начали реализовывать поняли, что не учли еще один опционный параметр, а вместе с ним уже насчитывалось 800 SKU.
Число 400 складывается не только из умножения всех параметров друг на друга, но учитывая их исключение — нельзя выбрать просто набор параметров. Например, тонкий корпус с диагональю 55″ есть только в двух цветах, а малый стол может быть только одной высоты. Чтобы все это свести в один калькулятор, нужно было бы сгенерировать все возможные комбинации, где не будет малого стола с неподходящей высотой — очевидно, логично, но слишком трудозатратно. Если бы не было условий исключения, то мы бы сгенерировали 800 SKU или создали бы одну и со всеми параметрами сразу.
Тогда мы сформировали всего пару SKU с несколькими параметрами, и калькулятор работает с ними, как фильтр. То есть он не собирает товар из нескольких заданных параметров, а ищет или исключает эти параметры в товаре.
Число 400 складывается не только из умножения всех параметров друг на друга, но учитывая их исключение — нельзя выбрать просто набор параметров. Например, тонкий корпус с диагональю 55″ есть только в двух цветах, а малый стол может быть только одной высоты. Чтобы все это свести в один калькулятор, нужно было бы сгенерировать все возможные комбинации, где не будет малого стола с неподходящей высотой — очевидно, логично, но слишком трудозатратно. Если бы не было условий исключения, то мы бы сгенерировали 800 SKU или создали бы одну и со всеми параметрами сразу.
Тогда мы сформировали всего пару SKU с несколькими параметрами, и калькулятор работает с ними, как фильтр. То есть он не собирает товар из нескольких заданных параметров, а ищет или исключает эти параметры в товаре.
3D-моделят все!
В детальной карточке товара можно выбрать цвет корпуса. Чтобы не привязывать отдельную модель в цвете к каждой SKU, мы сделали для каждого типа основного корпуса свою 3D-модель, и для всех этих 3D-моделей задали одинаковые названия своих внутренних объектов. Теперь можно менять цвет модели в реальном времени прямо на странице.
Еще 3D-модель можно вставить в любую галерею сайта.
Еще 3D-модель можно вставить в любую галерею сайта.
Как это работает:
- Инфоблок галереи содержит необходимые файлы, чтобы вывести их в слайдере на странице: картинку, видео или 3D-модель.
- Если в инфоблоке есть 3D-модель, срабатывает скрипт, который мы написали специально под формат изготовленных для проекта 3D-моделей.
- Благодаря скрипту браузер понимает и выводит 3D-модель на сайт.
В нашем случае произошла полная синергия с заказчиком. Нужно было в короткие сроки реализовать проект, не теряя в качестве. Мы действовали синхронно и оперативно.
Заказчик взял на себя анимации для промоблока и 3D-модели. Наш дизайнер давал советы по цветовым решениям и следил, чтобы все элементы органично вписывались в новый дизайн сайта.
Еще хочу отметить момент коммуникации: согласование, подписание документов и обратная связь — все делалось быстро. Хочу выразить благодарность Наталье Зыковой, куратору проекта со стороны заказчика, и Денису Бочкареву, директору компании. Это и их заслуга в таком прекрасном и быстром результате!
Заказчик взял на себя анимации для промоблока и 3D-модели. Наш дизайнер давал советы по цветовым решениям и следил, чтобы все элементы органично вписывались в новый дизайн сайта.
Еще хочу отметить момент коммуникации: согласование, подписание документов и обратная связь — все делалось быстро. Хочу выразить благодарность Наталье Зыковой, куратору проекта со стороны заказчика, и Денису Бочкареву, директору компании. Это и их заслуга в таком прекрасном и быстром результате!
Антон
Менеджер проекта
Готовый результат
