Shuttle — Обмен файлами, который начинается ещё до регистрации
Shuttle — сервис обмена файлами, главный аргумент которого — контроль: ваши файлы, ваши правила. Сайт ставит на первый экран настоящую зону загрузки, чтобы продуктом можно было воспользоваться раньше, чем прочитать о нём.
Задача
Обмен файлами — давно решённая задача с укоренившимися лидерами, и у новичка есть несколько секунд, чтобы показать, чем он отличается. Объяснять позицию о приватности текстом долго; быстрее дать человеку сразу отправить файл.
Подход
Первый экран и есть продукт: пунктирная зона загрузки с бесплатным лимитом прямо внутри, кнопка аккаунта и ссылка «Что такое Shuttle» для тех, кто хочет сначала разобраться. Всё это лежит на светлом небесном фоне, чтобы служебный сервис не выглядел как серверная инфраструктура.
Первый экран — это приложение
Вместо маркетингового первого экрана с регистрацией ниже страница открывается самой зоной загрузки: иконки типов файлов, бесплатный лимит простым текстом и одна кнопка аккаунта под ними.
Если у посетителя есть файл, он может начать сразу. Если он сначала хочет понять позицию сервиса, для этого есть одна ссылка. Оба пути — в один клик, и ни один не мешает другому.
Лимит — внутри самого предложения
Бесплатный лимит написан прямо в зоне загрузки, а не на странице тарифов. Сервисы хранения теряют людей из-за неясности, что входит в «бесплатно», а ответ в момент действия избавляет от необходимости уйти и проверить.
Светло там, где принято темно
Большинство инфраструктурных продуктов по привычке используют тёмную техническую палитру. Shuttle работает на мягком небесном градиенте со скруглёнными неконтрастными элементами: это подходит сервису для обычных людей и визуально отделяет его от сервисов, которые будто продают ИТ-отделам.
Разработка
Сайт — приложение на Remix со стилями на Tailwind CSS и раздачей через Cloudflare, оплату тарифов обрабатывает Lemon Squeezy. Подход utility-first держит маркетинговые страницы и интерфейс приложения на одном наборе токенов, поэтому зона загрузки на главной — тот же компонент, что и внутри продукта.
Что сделали
- Рабочая зона загрузки на первом экране
- Бесплатный лимит указан в момент действия, а не на странице тарифов
- Светлая пользовательская палитра в категории, где принято тёмное
- Сборка на Remix и Tailwind CSS с раздачей через Cloudflare
Частые вопросы
Потому что воспользоваться продуктом быстрее, чем прочитать о нём. Если у посетителя есть файл, он может начать сразу, а для тех, кому сначала важна позиция о приватности, есть отдельная ссылка.
Сервисы хранения теряют людей из-за неясности, что входит в бесплатный тариф. Ответ в момент действия избавляет от необходимости искать страницу с ценами.
Remix и React с Tailwind CSS, раздача через Cloudflare; набор токенов общий с интерфейсом продукта.
Как устроен сайт
«Лучшее в том, что сайт по-настоящему ощущается как продукт. Сразу видно, что делает Shuttle, и не нужно продираться через стену текста. Именно этого мы и хотели.»