B2BE-commerce

Crabbit

A server supplier website with a catalogue, configurator and CRA8BIT pixel identity.

5 monthson the project
80interface screens
1,500 hoursof development

Figures and scope of work at the time the original case study was published

Crabbit — project interface
Our work
Research · Branding · UX/UI · Next.js · Laravel

The equipment supplier task

The old Crabbit website was struggling: customers found search difficult, the interface was awkward and the design did little to distinguish the supplier from competitors.

Crabbit builds servers for individual customer requirements. We developed a corporate website with a catalogue, server configurator and company information, giving that custom-build approach a recognisable visual identity.

Crabbit — website prototype

How customers choose servers

Discovery focused on what actually makes equipment purchasing difficult.

A system administrator may be comparing dozens of tabs to find the required number of PCI-E slots.

A technical director may spend days comparing similar configurations, while a procurement specialist needs to check many suppliers against tender requirements.

Other obstacles included finding replacements for old equipment, inconsistent availability and delivery conditions that could only be obtained by leaving a phone number.

Crabbit — customer research and equipment selection flowsCrabbit — catalogue and product details

From Crabbit to CRA8BIT

Many equipment websites use nearly identical technology and premium visual cues. After days of comparing specifications, customers struggle to remember which supplier they are looking at.

The reference research suggested a different direction: the digital history familiar to the audience, from early RAID arrays to classic server hardware.

That led to a concept combining retrogaming and 8-bit graphics: CRABBIT became CRA8BIT.

The client approved the concept with very few revisions.

Crabbit — visual concept moodboardCrabbit — pixel visual language

The company already had a crab mascot with an established place in its brand identity.

Replacing it completely would have meant losing the connection to existing printed material, merchandise and souvenirs. At the same time, the old artwork did not fit the new concept.

We presented a compromise: the new pixel crab appears in the header, while the original mascot stays in the footer.

Crabbit — mascot evolutionCrabbit — identity on merchandise

Themes, animation and Easter eggs

The client liked dark colours and violet retrowave references. We also added a light theme so customers can choose the version they find more comfortable.

  • Clicking the crab on the homepage makes it jump
  • Completing the configurator fills a Tetris board that visualises progress
  • The 404 page contains a platform game featuring the crab
  • Customers can collect coins by scrolling to the end of the page

A hidden keyboard combination also reveals a spider-crab. The Easter eggs add character without interrupting the main equipment selection task.

Crabbit — interface componentsCrabbit — light, dark and mobile versions

We checked changes on Huawei, Xiaomi and iPhone devices from the studio test set.

Server configurator

Customers begin by selecting a server or storage system, then choose the manufacturer and form factor. The next steps cover processors, frequencies, cores, memory and drive requirements.

Suitable options appear as the parameters are entered. Tetris shapes fill the game field to show progress through the configuration.

Crabbit — configurator steps and game mechanic

Content, specifications and enquiries

We built the administration panel on Laravel Orchid. Staff can update product cards, sorting and specifications through Excel imports. A 1C integration was considered but replaced by file exchange to keep the implementation proportionate.

Crabbit — administration and equipment data

The initial plan included a basket and product comparison. Research showed that buyers rarely order standard configurations: servers are assembled for specific requirements.

Component availability also changes with suppliers. A fixed basket would not reflect that custom-build process.

We replaced it with an enquiry form for the selected configuration.

Crabbit — equipment enquiry form

The result

5 monthson the project
80interface screens
1,500 hoursof development

Figures and scope of work at the time the original case study was published

  • We optimised code and loading performance
  • Added editable page titles and descriptions
  • Introduced readable URLs and structured catalogue addresses

Seven team members worked on the project over five months. The delivery comprised 80 screens, 1,500 development hours and 1,380 commits.

The original request was a website refresh with a basic configurator. The finished product combines that functionality with a visual identity and game mechanics tailored to its technical audience.

CrabbitWatch videoVK Video

Client feedback

“A responsible approach and fast delivery.”

Development Director, Crabbit Group

Close-up of the Pyro desk monitor and cable