Автор: Иван Оленкевич
Любой проект мы начинаем с исследования и прощупывания территории. Смотрим сайты других производителей, их коммуникацию и рекламу. Анализируем, как они разговаривают с пользователем и чем отличаются друг от друга.
Все сайты как на подбор: крупный заголовок и красивый рендер-как-у-эпл. Нам будет сложно соревноваться на этой территории. Во-первых, потому что дизайн устройства не стремится быть уникальным. А во-вторых, Яндекс.Телефон — он же про пользу и эмоции.
Делаем первый заход и думаем над концепцией. Вот все показывают, как выглядит телефон. А что, если мы покажем мир глазами телефона и увидим эмоции человека? Покажем, как ты спросонья читаешь Дзен. Или удивляешься незнакомому звонку с указанием «Спам».
Показываем ребятам из продукта. В целом подход нравится.
Вообще, процесс работы над большим проектом у нас выработался такой. Сначала встречаемся с внутренними заказчиками, узнаем все про продукт, его цели и задачи, собираем материалы. Да про сайт и другие каналы — зачем они, что там должно быть и какое сообщение хотим донести. Важно, чтобы сообщение было одно. Сложно сделать рекламу с сообщением «Наш продукт быстрый, веселый, стоит дешево и каждую третью субботу месяца его можно выиграть в конкурсе». Это просто перечисление фичей. Сообщение должно быть коротким и емким, например «Наш продукт самый безопасный». Или «Только в нашем продукте есть емкость для льда». УТП, прости господи.
Важно договориться в самом начале о метриках успеха. Как мы после запуска сайта, лендинга или рекламы определяем удачу или неудачу запуска? На сайте нам важны только клики на «купить»? Или мы хотим, чтобы люди подольше изучали сайт?
После этого мы думаем над концепцией сайта — это непроработанные дизайн-макеты или прототипы, которые демонстрируют основную идею сайта. На очной встрече мы ее презентуем заказчику и обсуждаем подход. Если все хорошо, то мы уходим дорабатывать дизайн макетов. И начинается рабочий процесс: собираем контент, думаем над визуалом, дизайним макеты и утверждаем с заказчиком.
Вернемся к телефону. Обсуждаем необходимость нового подхода.
Думаем над идеей сайта и пока ждем рендеры с текстами, используем фотки других телефонов и тексты из головы. Может, посмеяться над другими сайтами телефонов, которые так и сочатся эпитетами? И сделать выключатель «Без пафоса»?
Забавная приколюха, но концепцию на этом не вывезешь. Что, если показать на одном телефоне сразу все фичи: и камеру, и внутренности с процессором, и экран?
Сложно масштабировать, можем себя загнать в рамки, а потом будет тяжело из них выбираться. Например, аксессуары сюда уже не добавишь.
Пробуем разделить сайт на две половины: про Яндекс и про телефон. Яндекс — про софт, а телефон — про железо. Как раз справа говорим «Отличная камера», а слева — «Безлимитный Диск».
Выглядит дробно, глаза разбегаются. Думаем дальше.
Всегда хочется повертеть телефон в руках перед покупкой. Машины пробуют на тест-драйвах. У духов есть пробники.
Может у телефона тоже будет пробник?
Нажал кнопку и вуаля — телефон у тебя в руках, в телефоне. Правда, чуть меньше и с ограниченным функционалом. Ну и показываем сценарии использования, добавляя прикольные эффекты. Например, параллакс в режиме фото или вот это — для того чтобы посмотреть, как выглядит телефон сзади, нужно реально перевернуть свой девайс. Получается, мы за ручку ведем пользователя по нужному нам пути.
Придумываем, чтобы на десктопе нужно было параллельно открыть мобильную версию, где в пробнике будет только телефон, а вся информация выводилась на десктопе. Получается связная интерактивная история.
Пробник всем нравится, но это, скорее, одноразовая история, нам же нужен фундамент понадежнее. Думаем, во что можно завернуть идею с пробником.
Что если сделать простую продающую страницу с рендерами телефона, а пробник сделать его частью? И сам пробник упростить. Изначально это был какой-то сценарий, а теперь это 3d-модель телефона, которую можно крутить пальцем и на которую наложены хотспоты с фичами. Исследуешь, крутишь-вертишь и находишь фичи. А при клике показываем попап с демонстрацией фичи. Получается супергибко (можно удалять и менять фичи) с тем же эффектом.
Делаем пробник частью сайта, думаем, как рассказать про фичи телефона в более привычном виде. Думаем над десктопом.
Пробуем всегда сбоку держать пробник, а слева традиционно рассказывать про фичи.
Утверждаем макеты, начинаем верстать и допиливать.
Начинаем параллельно думать над рекламным постером в точках продаж. Пробуем показать только интерфейс без рамки.
Или может снова на пробнике сыграть?
Отрывные объявления?
Глупо и смешно. А может не глупо?
Да и сайт может быть таким. Яркие стикеры с пользой для пользователя.
Тут запускается новый айфон с промкой, где можно покрутить телефон: experience.apple/iphone/
Грустим, что не сделали раньше, но радуемся, что у нас получился гораздо более широкий сценарий.
Пробуем добавить навигацию по плашкам с помощью меню-фильтров.
Вроде все складывается, заказчик принимает, несмотря на почти сверстанную предыдущую версию.
Но мы что-то упускаем. Получается какой-то скучный блочный сайт, который не обыгрывает суть телефона. Как этот сайт сделать про Яндекс.Телефон?
Ну конечно же. Телефон как раз и состоит из этих блоков. И кое-где он проглядывает через эти плашки.
Собираем макеты, унифицируем стили и прописываем правила перестраивания блоков.
Сайт перестраивается в четыре, три или одну колонку. И еще на сайте аж три кнопки купить, мечта!
Наконец, мы придумали концепцию визуальной коммуникации.
Наполнение Телефона важнее его самого
То есть само устройство — не самоцель. Важно, что у Телефона внутри и как он помогает пользователям. Такой вот философский идеализм.
Теперь гораздо проще придумать рекламный постер. Вернемся к нему. Пробуем показать яркие стикеры с сервисами и фичами, а телефон как лупа — раскрывает их пользу. Пробуем разные варианты компоновки.
Финализируем плакат. Придумываем фирменное расположение телефона в аксонометрии.
Продумываем остальные ракурсы для других форматов.
Рендерим.
Доделываем сайт. К сожалению, идею про сайт-телефон не удается сохранить, потому что при таком подходе было бы сложно менять порядок отображения блоков. Пишем тексты, тюним, заливаем контент и запускаемся.
Промосайт: phone.yandex.ru
Команда дизайна Яндекса: арт-директор Илья Михайлов, дизайнеры Иван Оленкевич, Андрей Семёнов, менеджеры Наташа Москалёва, Денис Новиков.
