Crabbit

• Сайт

Стек технологий

Figma
Laravel
Orchid
MySQL
Redis
Docker
Nginx
NextJS
MobX
CSS Modules
TypeScript

Описание проекта

IT-оборудование — это фундамент цифрового бизнеса. Но как выделиться среди сотен поставщиков?

Наш клиент — не просто еще один дистрибьютор серверов и сетевых решений. Это партнер, который помогает компаниям и госструктурам строить надежную ИТ-инфраструктуру.

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

Что требовалось

Когда к нам обратился Crabbit, сайт уже не справлялся с задачами: пользователи жаловались на сложный поиск и неудобный интерфейс, а устаревший дизайн и отсутствие четких преимуществ снижали доверие — бренд растворялся среди конкурентов.

Мы получили вызов: «Сделайте не хуже, чем у Servermall». По иронии судьбы именно мы и создавали часть ключевых решений для этого сайта :)) Поэтому вместо «не хуже» предложили решение, которое превращает часовые поиски 5-минутную процедуру, а каждый второй просмотр — в заявку.

Что сделали

• Создали базовый функционал корпоративника: главную страницу, каталог с карточками товаров и поиском, страницу о компании, контакты, блок лучших товаров и т.д
• Продумали удобство и визуал: разработали концепцию с ностальгической ноткой, обновили логотип, предусмотрели адаптивную верстку, добавили пасхалки, светлую и темную темы
• Сделали интуитивный конфигуратор с игровыми механиками для вовлечения пользователей
• Разработали удобную админ-панель для управления контентом
• Провели SEO-оптимизацию и ускорили работу сайта

Аналитика

Без предпроектного анализа никуда, нам нужно было понять, что на самом деле беспокоит клиентов. Казалось бы, корпоративник — он и в Африке корпоративник, что в нем может быть сложного?

Так могут рассуждать только те, кто никогда не видел, как сисадмин в два часа ночи мечется между десятками вкладок, пытаясь найти сервер с нужным количеством слотов PCI-E.

Или как технический директор третий день подряд сравнивает почти идентичные конфигурации, боясь ошибиться в выборе оборудования. А госзакупщик, который должен за день проверить три десятка поставщиков на участие в тендерах?

Мы сами IT-компания, у нас тоже есть серверы, и мы знаем эти боли не понаслышке 🙂

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

А теперь попробуйте угадать, сколько из этих проблем осталось в новой версии сайта. Ответ вас ждет в разделе «Разработка» 🙂

Дизайн

Следующий этап — прототипирование и дизайн. «Сделайте не хуже Servermall» — попросил клиент. Но разве «не хуже» — это про нас? Мы замахнулись на лучшее решение в нише, с продуманной логикой, понятным интерфейсом и фирменным стилем, который точно запомнится.

Время креатива!

Концепция

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

В итоге решение принимается по принципу «лишь бы уже выбрать».

После изучения референсов у нас появилась идея: а что, если сыграть на ностальгии? Ведь серверное оборудование — это не просто сухие спецификации. Для многих клиентов это целая эпоха: первые RAID-массивы, культовые Cisco 2500, легендарные HP ProLiant… Почему бы не превратить сайт в путешествие по цифровому наследию?

Так родилась концепция на стыке ретрогейминга и 8-bit, которая идеально легла на название бренда: CRABBIT → CRA8BIT.

Клиент — человек сдержанный, но даже он не устоял перед обаянием пиксельного прошлого. Дизайн-концепция попала в десятку с первого раза, правок было минимум.

Краб в пикселях

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

«Серверы и hardware тематика ассоциируются с чем-то цифровым. С людьми, которые знают разницу между битами и байтами. Системные администраторы любят ретрогейминг, а в названии Crabbit отлично читается 8-bit. Отсюда и ассоциация с пиксельным крабом»

Антон Лисицкий, креативный директор Пиробайта

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

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

Новый краб, к слову, тоже круто смотрится на мерче:

Цвета, анимации и пасхалки

На мудборде клиенту понравились темные тона и фиолетовые оттенки (классика ретровейва), но мы понимали, что темная палитра может быть комфортна не всем. Поэтому добавили переключатель между светлой и темной темой по клику на тумблер в шапке сайта — пусть каждый выбирает под настроение.

А благодаря нашим пасхалкам сайт получился еще более живым и игривым:

• Если на главной странице кликнуть на крабика, он подпрыгнет
• При заполнении конфигуратора будет заполняться игровое поле Тетриса, отображая прогресс
• Даже битая ссылка не повод для раздражения — вместо скучного «Страница не найдена» — игра-платформер с тем самым крабом, чтобы немного отвлечься от поиска серверов
• Можно пособирать монетки, проскроллив страницу до конца

А если ввести волшебную комбинацию (какую именно — большой вопрос, потому что мы сами ее забыли), сверху спускается забавный спайдер-крабик. В конце концов, идеальные пасхалки — те, которые не так-то просто обнаружить :))

Адаптивная верстка

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

Каждое изменение мы проверяли на рабочих устройствах (Huawei, Xiaomi, iPhone) из нашего тестового стенда, чтобы убедиться в корректности.

Разработка

Конфигуратор с элементами геймификации

С помощью конфигуратора выбрать нужное оборудование стало проще, чем заказать пиццу.

Сначала выбираешь тип железа — сервер или СХД. Затем указываешь базовые параметры вроде производителя и форм-фактора. Третьим шагом вводишь количество процессоров, их частоту, число ядер, объем нужной памяти, количество накопителей и т.д.

Система сразу показывает подходящие варианты. А сам процесс превращается в игру: по мере заполнения параметров фигурки Тетриса заполняют экран, показывая прогресс в подборе сервера.

Административная панель

Для администраторов создали гибкую панель управления на Laravel Orchid: теперь можно легко обновлять карточки товаров, настраивать сортировку и загружать спецификации через Excel (интеграцию с 1С решили не делать — вышло бы дороже, поэтому ограничились файловой выгрузкой):

Корзина

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

К тому же наличие комплектующих постоянно меняется в зависимости от поставщиков. Просто так «добавить в корзину» не получится. Фактически, Crabbit работает по принципу конструктора: не держит склады с железом, а собирает серверы строго под запрос клиента.

Поэтому вместо корзины мы сделали удобную форму заявки:

SEO и скорость работы

Чтобы сайт лучше ранжировался в поиске, мы воспользователись сервисом Google PageSpeed. Он анализирует производительность сайта, выставляя оценку от 0 до 100. Чем выше показатель, тем лучше сайт будет ранжироваться в поисковиках.

Следуя пошаговым рекомендациям, наши разработчики:

• Оптимизировали код и тем самым скорость загрузки
• Добавили настройки метатегов (заголовки, описания) для каждой страницы
• Сделали человекочитаемые URLы + проработали URLы в каталоге

Результат

5 месяцев 7 человек из команды Пиробайт ностальгировали по ретрогеймингу и ламповым платформерам 90-х. Создали 80 экранов, затратили 1500 часов разработки, отметили 1380 коммитов.

Что в итоге? Сайт получился не просто функциональным, а по-настоящему запоминающимся — с душой и фирменным стилем, который оценила целевая аудитория. Даже в сугубо техническом B2B-сегменте можно (и нужно!) создавать эмоциональную связь с клиентом.

Клиенту требовался стандартный апдейт сайта и базовый конфигуратор, но мы пошли дальше (нам повезло — он дал полную свободу действий) и подключили элемент геймификации, превратив подбор серверов в запоминающийся цифровой опыт.

Отзыв клиента

Обратились в компанию Pyrobyte за разработкой сайта. Выбирали команду из топ-15, и ожидания были оправданы. Команда отрабатывает на высоком уровне, никаких проблем на проекте не возникает, вопросы всегда решаются оперативно, задачи выполняются в срок, что не может не радовать руководство. Менеджер Евгений всегда профессионально контролирует весь процесс разработки, предоставляет оперативно всю информацию. Ответственный подход и высокая скорость работы. Мы остались крайне довольны результатом.

Дмитрий Царёв, Директор по развитию ООО «ГК КРЭББИТ»

Команда проекта

Екатерина К — аналитика, проектирование
Кирилл М — бэкенд-разработка
Антон С, Евгений Ф, Сергей Ш — фронтенд-разработка
Никита З — project-менеджмент
Антон Л — креативный директор