Burner — Аппаратный кошелёк, который продают как вещь, а не как список характеристик
Burner — аппаратный кошелёк в форме карты: криптовалюту можно хранить, тратить и дарить. Сайт должен был продавать физический предмет людям, привыкшим покупать софт, поэтому первыми идут фотографии продукта, а технические детали — следом.
Задача
Аппаратные кошельки обычно продают через характеристики безопасности: это звучит как запугивание и у всех конкурентов выглядит одинаково. Burner должен был восприниматься как продуманная потребительская вещь — такую хочется подарить, — и при этом отвечать на вопросы о безопасности, от которых зависит покупка.
Подход
Мы построили страницу вокруг фотографий карты в руке в натуральную величину и заголовка с засечками, который больше напоминает журнал, чем криптосайт. Первый экран по очереди показывает всю линейку, так что каждая модель подана одинаково, а кнопки покупки стоят прямо на первом экране, а не в конце прокрутки.
Сначала — сама вещь
Первый экран — фотография карты в руке. Ничто не передаёт размер и отделку физического продукта быстрее, и это позволяет уйти от привычных для категории схем и иконок.
Варианты покупки стоят сразу под заголовком — прямая покупка рядом с маркетплейсом, — так что посетителю, который уже знает, чего хочет, не нужно прокручивать страницу.
Первый экран для всей линейки
У Burner несколько моделей, и отдельная страница для каждой разбила бы историю на части. Вместо этого первый экран — карусель: тот же макет, та же типографика, другой продукт и цвет, а из элементов управления — только точки переключения.
Макет общий, поэтому добавить модель — это правка контента, а не новая дизайн-задача.
Журнальная типографика вместо криптоканонов
Заголовок набран контрастной антиквой в размере, привычном скорее для печати. Основной текст короткий и простой — что это, как пользоваться, сколько стоит, — а технические подробности идут после того, как продукт уже увиден, а не перед ним.
Палитра взята с самого продукта, поэтому страница и предмет выглядят одним брендом, а не сайтом о какой-то вещи.
Разработка
Сайт — приложение на Next.js, опубликованное на Vercel. Фотографии продукта неизбежно тяжёлые, поэтому у изображений первого экрана явно заданы размеры и приоритет загрузки, а карусель заранее загружает только соседний слайд, а не весь набор.
Что сделали
- Главная страница вокруг продукта с покупкой прямо на первом экране
- Карусель на первом экране для всей линейки на одном общем макете
- Сборка на Next.js с публикацией на Vercel
Частые вопросы
Burner — физический предмет, и на вопросы о его размере, отделке и ощущении в руке фото отвечает сразу, а список характеристик — никогда. Технические детали на странице есть, просто после того, как продукт уже увиден.
У них один общий макет первого экрана, и они сменяют друг друга в карусели. Каждая модель подана одинаково, а добавить новую — это правка контента, а не редизайн.
Next.js, публикация на Vercel.
Как устроен сайт
«Нам не хотелось, чтобы Burner выглядел как очередной технический криптопродукт. Sakura сделала из него настоящую потребительскую вещь и при этом сохранила все важные детали. Очень довольны результатом.»