Кейс: как сделать сайт, после которого клиент получит заказ от HBO

Заказчик

Ultraviolet Way — калифорнийский сервис аренды премиальных автомобилей для продакшена.

Кейс: как сделать сайт, после которого клиент получит заказ от HBO

Задача

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

Целевая аудитория

Основные клиенты Ultraviolet Way — студии продакшена, которые арендуют автомобили для съёмок в клипах, сериалах и кино. Это продюсеры и топ-менеджеры, которые легко могут выделить место в смете под McLaren 720S, Ferrari 812 или Mercedes Brabus G550.

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

Анализ трендов

Мы регулярно мониторим Awwwards, где уже несколько лет среди главных трендов — стремление делать всё большим. Крупная типографика, масштабные визуалы и интерактивные элементы привлекают внимание и погружают посетителя в контент с головой.

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

Разработка сайта

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

Дизайн

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

Цель сайта — показать все автомобили и помочь пользователю заказать то, что ему понравится. Поэтому мы сделали сразу два меню с коллекцией:

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

Приятный пользовательский опыт — это не только красивые визуалы и удобная навигация. Многие интерактивные детали были добавлены специально для того, чтобы юзер получал удовольствие от каждого контакта с сайтом: «намагниченные» иконки и курсор, деформация слайдов в меню и анимация слайдера в галерее автомобилей.

Разработка

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

Прежде всего, Wordpress. Не самая оригинальная, но точно одна из самых удобных CMS для управления контентом. Плюс ACF для удобства редактирования данных. Валидацию полей ввода взял на себя vee-validate, а также маска ввода, созданная при помощи v-mask.

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

Оптимизация

Интерактивность и гипервизуализация сайта не могла не сказаться на скорости его загрузки. Для его ускорения и оптимизации мы реализовали целый комплекс решений во front-end и back-end разработке.

Front-end:

  • Responsive Images в вёрстке, чтобы адаптировать размер изображений под устройство.
  • Nuxt.js (vue.js), основной фреймворк проекта, помог собрать все стили и скрипты в минимальное количество файлов.

Back-end:

  • W3 Total Cache и WP REST Cache для кэширования данных, чтобы ускорить ответ от сервера
  • EWWW Image Optimizer для сжатия и кроппинга изображений

Итоги

Открытие нового сайта прошло на закрытой вечеринке с приглашением представителей крупных продакшенов и компаний. Мы не уверены, был ли на ней сам Дуэйн Джонсон, но вскоре после презентации автомобили Ultraviolet Way засветились в сериале «Игроки» (Ballers) производства HBO.

Кроме профессионалов продакшена, хорошие отклики мы получили и от коллег по веб-дизайну. uv-way.com получил награды:

  • Сайт дня на Awwwards
  • Сайт дня на CSS Design Awards
  • Номинация на сайт месяца в CSS Design Awards
1616
16 комментариев

Скажите, почему показывая Car Collection ( https://uv-way.com/cars/ ) вы выводите дикий листинг с непонятной прокруткой? Возможно, такова задумка, но что будет, когда машин будет 20-30-50+? Мобильный пользователь будет 5 минут играть в свайпы как в Тиндере, а пользователь с мышкой играть в кликер? Я уже не говорю о ситуации, когда надо будет вернуться с конца списка в начало, что даже сейчас выглядит нелепо. И тут даже не прикручен обработчик скролла мыши для удобства и простоты изучения перечня доступных машин.
 
Хорошие отзывы от профессионалов продакшена и веб-дизайна? Отлично! Сайт дня? Супер! Удобство пользователя/клиента? Сойдёт!

6
Ответить

UI > UX

3
Ответить

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

Мы постоянно на связи с нашими клиентами и если бы были пожелания что-то переделать или доработать в связи с тем, что клиенты UV не довольны - мы бы сделали. Но пока все хорошо и машины бомбят экраны телевизоров и мониторов;) Разве не это является объективной оценкой качества работы сайта?

1
Ответить

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

Responsive images - это что? Два css свойства на картинки или же использование srcset/picture? И то и то в любом случае стандарт для сайтов.

Использование великого и ужасного WP в качестве CMS в 2020 году - это выбор для сильных духом. Нет чтобы завести воркспейс в любой Headless CMS и дать аккаунт заказичку, который без видео разберется в том как добавлять машинки - мы будем страдать и добавлять плагины в WP для оптимизации™.

Хотя я знаю почему всё именно так, а не иначе и это будет второй тезис.

2) С точки зрения бизнеса вы всё делаете правильно - нанимать ребят с PHP-шным бэкграундом, которые смогли вкатиться во Vue.js это раза так в два, наверное, дешевле, чем искать и платить тем, кто применяет современные технологии для таких статических сайтов. 
Только после N месяцев поддержки такого сайта, его проще будет закопать и переписать с нуля, чем допиливать это исчадие ада (только клиентам главное на глаза не попадаться).

Вопрос: зачем же вы этим козыряете, если и писать-то тут нечего?

Сайт красивый, анимации медленные и плавные - всё по канонам "сайтов дня")

5
Ответить

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

Ответить

Комментарий недоступен

3
Ответить

Мы и не представляли тут "революционных" технологий. а сделали ставку на тренды дизайна понятные целевой аудитории клиента. И это было больше года назад - сайт 2019г. Поэтому и спорить даже не будем))

Ответить