Crabbit

Задача поставщика оборудования

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

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

Как выбирают серверы

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

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

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

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

От Crabbit к CRA8BIT

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

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

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

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

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

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

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

Темы, анимации и пасхалки

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

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

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

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

Конфигуратор серверов

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

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

Контент, спецификации и заявки

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

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

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

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

Результат

Показатели и объём работ на момент публикации исходного кейса

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

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

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

CrabbitСмотреть видеоVK Видео

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

«Ответственный подход и высокая скорость работы».

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