Crabbit. Сайт для компании по продаже серверного оборудования

Главное о кейсе

Сделали минималистичный, удобный веб-сервис для компании по продаже сервисного оборудования Crabbit.

• Разработали стильный и современный дизайн, сохранив фирменные цвета по пожеланию клиента. Обновили логотип компании.

— Геймифицировали выбор оборудования и добавили ретрогейминг и отсылки к культуре 90-х:
— Нажмите букву «С» на английской раскладке клавиатуры на странице сайта, чтобы кое-кого увидеть,
— Поиграйте за маскота Crabbit на странице 404 https://crabbit.ru/404,
— Проскролльте страницу до футера и соберите монетки.

• Усовершенствовали логику работы фильтров и конфигуратора. Клиентам Crabbit стало проще и легче подобрать нужное оборудование.

• Упростили и улучшили заполнение базы данных товаров из excel-документа менеджеров. Так специалисты систематизировали всю информацию по товарам: стало удобно оперативно обновлять и добавлять данные.

• Стэк: Figma, Laravel, Orchid, MySQL, Redis, Docker, Nginx, NextJS, MobX, CSS Modules, TypeScript.

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

• Проект полностью завершен, все доступы переданы клиенту для работы. Сейчас компания определяет дальнейшую стратегию развития, в том числе, сайта Crabbit https://crabbit.ru.


Перевод

We’ve created a minimalistic, user-friendly web service for Crabbit company that sells service equipment.

• At the client's request, we developed a stylish and modern design, preserving the corporate colors and updating the company logo.

• We’ve improved filtering logic and the configurator. It’s now easier for Crabbit users to choose appropriate equipment

• We’ve also gamified the way of choosing the equipment and added some retrogaming features and references to 90-s culture
— While on site, press “C” on your keyboard to witness something cool
— On 404 page, you can play as Crabbit mascot
— Once you scroll to the footer, you can collect the coins

Бизнес-задача и ее решение

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

Решение: Системные администраторы любят ретрогейминг, а в названии Сrabbit отлично читается 8-bit. Вдохновение пиксель-артом было неизбежно :)

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


• Задача 2: Реализовать удобный фильтр и понятную логику работы конфигуратора будущего оборудования.

Решение: Конфигуратор для подбора параметров сервера уже был в первоначальной версии сайта. Со своей стороны мы улучшили систему фильтров товаров по параметрам и статусам.

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

Прогресс-бар сделан в виде анимации тетриса. Выбирая нужные характеристики, клиент видит, как из блоков собирается единый элемент.


• Задача 3: Реализовать заполнение базы данных из excel-документа сотрудников Crabbit.

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

Таблицы загружают в админ-панель. Через нее можно импортировать данные в соответствующие ячейки сайта. Далее эта информация также автоматически выводится на сайте уже для клиента. Вручную заполнять карточки товаров и сверять наличие не нужно.


• Задача 4: Упростить и сократить путь клиента от выбора до покупки оборудования.

Решение: Часть сисадминов покупают сервисы, точно зная нужные параметры. Некоторым нужно кастомное решение или крупная партия оборудования.

Мы добавили форму связи с менеджером, чтобы клиент мог максимально подробно объяснить, какое оборудование ему нужно. Далее менеджер Crabbit уточняет детали, предлагает идеальные варианты и озвучивает стоимость.
С сайта Crabbit также можно скачать шаблон договора. Покупатель может оперативно заполнить его, вписать реквизиты и отправить на оплату.


Перевод

• Task 1: Develop a new design concept for the site. Keep it minimalistic and preserve corporate identity.

Solution: System administrators love retrogaming, and the name Crabbit clearly stands for 8-bit style. Inspiration from pixel art was inevitable.

While doing website redesign, we’ve preserved corporate colors and suggested updating the logo. Company’s mascot became pixelated


• Task 2: Implement convenient filtering logic for the configurator of future equipment

Solution: The configurator for selecting server parameters was already in the original version of the site. For our part, we have improved the system of product filters by parameters and statuses.

The user immediately sees the services if it’s in stock, can choose it himself or select it based on important characteristics, place an order, download all the necessary documents, and contact the company through.

We’ve intrigued users by the implementation of the configurator. The progress bar is made in Tetris animation style. By selecting the desired characteristics, the client sees how the blocks are assembled into a single element.

• Task 3: Implement populating the database from an Excel document of Crabbit employees

Solution: The client maintains an Excel document with a nomenclature that describes all options and connections between components and platforms. It also contains a list of parameters for selecting servers - configurator filters.

Tables are uploaded to the admin panel. Through it you can import data into the corresponding cells of the site. Moreover, this information is also automatically displayed on the website for the client. There is no need to manually fill out product cards and check availability.

• Task 4: Simplify and facilitate the customers path from selection to purchase of equipment.

Solution: Some system administrators buy services that they need according to the required parameters. Some need a custom solution or a large batch of equipment.

We have added a contact form with the manager so that the client can explain in as much detail as possible what equipment he needs. Next, the Crabbit manager clarifies the details, offers the perfect options and tells the cost.

Крафт (мастерство), реализация, технические детали

• Стэк
Backend: Laravel, Orchid, MySQL, Redis, Docker, Nginx
Frontend: NextJS, MobX, CSS Modules, TypeScript

— Laravel стабилен и безопасен. Именно на нем мы уже сделали большинство проектов студии.

На нем же работает Open Source панель администратора Orchid. Этот набор инструментов позволяет быстро и легко реализовывать интерфейсы и дорабатывать их под узкие задачи.

— Docker — спец ПО для автоматизации развёртывания приложения. Помог быстрее выложить и протестировать код.

— Redis хранит данные в виде ключей, связанных со своими значениями. Благодаря этому легко настроили интеграцию информации в личный кабинет из Excel-таблиц. А MySQL позволил оптимизировать данные и облегчил работу сайта.

— Программное обеспечение Nginx помогло предотвратить падение производительности и другие сложные проблемы при развертывании сайта на сервере.

— Фронтенд разработан на Next.JS. Фрейворк значительно упрощает разработку и повышает производительность работы многостраничных и гибридных веб-сайтов.

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

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


• Stack
Backend: Laravel, Orchid, MySQL, Redis, Docker, Nginx
Frontend: NextJS, MobX, CSS Modules, TypeScript

The Laravel framework was chosen because it is stable and secure. It is on it that we have already made most of our studio projects are made on it..

It also runs the Open Source Orchid admin panel. This is a set of tools that allows developers to quickly and easily implement interfaces and modify them for specific tasks.

Docker is a special software for automating application deployment. It helps to update and test code faster.

Redis stores data in the form of keys associated with their values. Thanks to this, it was easy to set up the integration of information into your personal account from Excel tables. And MySQL allows you to optimize data and make the site work easier.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

• Основные задачи выполнили, но и про интересные фичи не забыли.

Какой русский, выросший в 90-е, не помнит звуков любимой игры? Мы помним и внедрили их на сайт компании.

• Прогресс-бар конфигуратора на главной странице превратили в ретрогейм-анимацию: тетрис. Пользователь выбирает параметры оборудования, и рядом соответствующие фигурки собираются в единый элемент. Быстрый, простой и наглядный выбор нужного сервера или СХД.

• Если открыть любую страницу сайта и нажать букву «С» на английской клавиатуре, можно кое-кого увидеть. Но будьте осторожны, не допускайте укуса!

• Те, кто попадут на страницу 404, не расстроятся. Там — мини-игра, после которой захочется переиграть любимый платформер.



Перевод

Main tasks are done, now ready to implement interesting features

• The configurator's progress bar on the main page was turned into a retrogame animation: Tetris. The user selects equipment parameters, and nearby corresponding figures are assembled into a single element. Quick, simple and clear selection of the desired server or storage system.

• If you open any page of the site and press “C” on the keyboard and you will see something interesting. Don’t get bitten, we warned you!

• For those who found themselves on the 404 page. There is a mini-game that will make you want to replay your favorite platformer.

Прочая информация о кейсе

Окунулись в ретрогейм на проекте благодаря компании Crabbit. Компания с 2015 года реализует и настраивает серверное оборудование на территории РФ. Имеет большой опыт работы с крупным бизнесом и госсектором.


Перевод

Thanks to the Crabbit project, we plunged into retrogaming. Since 2015, the company has been selling and setting up server equipment in the Russian Federation. Has extensive experience working with large businesses and the public sector.

Скриншоты

Видео

Комментарий заказчика

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

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

Перевод

“We’ve contacted Pyrobyte Pyrobyte to develop a website. We chose a team from the top 15, and expectations were justified. The team works at a high level, no problems arise on the project, issues are always resolved promptly, tasks are completed on time, which cannot but please the management. Manager Evgeniy always professionally monitors the entire development process and promptly provides all information. Responsible approach and high speed of work. We were extremely pleased with the result"

Dmitry Tsarev, development director of CRABBITT GC LLC