---
title: "Flat HTML mockups, rebuilt into a reusable Drupal component system for INX International"
description: "How Specbee turned INX International's HTML mockups into a Drupal component system, including a product catalog buyers can search by substrate and application."
url: https://www.specbee.com/work/inx-international
type: "Case Study"
published: 2026-09-21
updated: 2026-09-21
---
# Flat HTML mockups, rebuilt into a reusable Drupal component system for INX International
Specbee had already been maintaining INX's site for over a year, so the two teams weren't starting cold. INX still evaluated other Drupal agencies, then chose to stay with Specbee for its enterprise Drupal experience and its ability to handle UX design and backend architecture together.
Staying on Drupal was deliberate. It gave INX's internal teams the flexibility to manage content on their own. The rebuild also left room to grow: better location and distributor locators, multilingual groundwork, and an early layer of AI capability.
INX's mockups arrived as static HTML, not Figma files. Specbee's teams reverse-engineered them into reusable Figma components, then built from those. It kept the project on schedule and gave INX a design system it didn't have before. Every design review since has used Figma.
## The client didn't hand over layered design files. They handed over HTML.
INX International Ink Co. is a global manufacturer of printing inks, coatings, and color management solutions for the packaging, commercial, and digital print industries.
INX International sells food packaging, labels, corrugated, and specialty print. Buyers arrive looking for a formulation that matches their requirement. The old site made them hunt for it.
There was also the question of scale. INX ran multiple regional platforms, each with its own structure, content, and editorial habits. The rebuild had to pull them into one enterprise Drupal platform that every region could publish into, in the languages their markets read.
The specific problems INX brought to Specbee:
- Outdated UI and poor mobile responsiveness
- Fragmented site architecture with inconsistent branding and content hierarchy
- Complicated editor experience due to outdated CMS setup
- Slow performance and weak SEO from unoptimized templates
- Product pages did not support product discovery
## Finding the right ink took more effort than it should
HTML mockups transformed into a flexible Drupal system with product search by substrate and application.
## A Drupal component system for smarter product discovery
[Visit Website](https://inxinternational.com/)
## Modular
### Component library delivered
INX's marketing team builds and updates pages without developer support.
## SDC + Tailwind
### Performance rebuilt
Legacy templates replaced with a lean, fast front end.
## WCAG 2.1
### Accessibility tested
Every redesigned page validated against WCAG 2.1 standards.
## Figma system
### Reusable design system
HTML mockups reverse-engineered into components used for every page since.
## A website that finally matches the scale of a global ink brand
Measured across content authoring speed, product discovery, and site performance.
Self-serve via modular components
Rebuilt with SDC and Tailwind
Product selector and taxonomy-driven navigation
Tested against WCAG 2.1
Unified UX/UI aligned to INX's global brand
Unoptimized templates
Limited search and comparison
Inconsistent, dated UI
INX handed over HTML mockups rather than layered design files. The design and frontend teams rebuilt those mockups as clean Figma components. From there they redesigned the site's pages against INX's updated brand guidelines and accessibility standards, then built them out as responsive Drupal templates.
- Full UX and UI redesign of the corporate site
- HTML mockups converted into a structured Figma prototype
- Design work validated against WCAG 2.1 accessibility standards
- Responsive behavior defined properly at every breakpoint
### UX/UI redesign built on INX's global brand guidelines
We built the site around reusable Paragraph-based components using Single Directory Components (SDC) and Tailwind. New page types get assembled from these components, so INX's marketing team can build new pages without waiting on a developer.
- Modular, reusable components built to support flexible content authoring
- New components developed specifically to speed up the creation of new pages
- A timeline component built to showcase the company's product history
### Modern component-driven architecture
INX sells across multiple markets and product lines, so findability mattered as much as design. Our team set up a taxonomy and category architecture behind the scenes and added a product selector to help visitors search the catalog directly.
- Product, brand, and category taxonomy built for structured navigation
- A new product selector to improve product search
- An enhanced filtering system added after early usability feedback to make navigation more intuitive
- URL structure refined against SEO analysis
### Structured navigation and smarter product discovery
We used SDC and Tailwind to keep the new templates lean. Legacy content and assets were migrated and cleaned up, so old technical debt didn't carry into the new build.
- INX location and distributor locators rebuilt for faster, clearer results
- AI capability introduced into the platform
- Performance optimization using SDC and Tailwind
- Regional sites consolidated into a single enterprise Drupal platform
- Shared component library and governance model across regions
- Multilingual publishing supported across regions from one platform
### One platform, locators, AI, and performance
The team paired manual verification with automated checks so the redesign could be validated page by page, not just at launch.
- Cross-browser and responsive testing across major breakpoints
- WCAG 2.1 accessibility testing
- Component-level QA checked against the Figma prototypes
- Automated visual testing comparing old and new page designs
- User acceptance testing (UAT) with INX's marketing and product teams
### Testing built into every stage of the release
### A component-driven rebuild, designed from mockups and built for editors
- [Dr. Reddy’s 72-Site Enterprise Multisite: Launches, Support & Upgrades](https://www.specbee.com/work/dr-reddys-laboratories)
- [HCG’s Platform Consolidation: 2 Sites, 25+ Hospitals, 1 AI Search](https://www.specbee.com/work/hcg-hospitals)
- [An Intelligence Hub for Flipkart's Seller Network, Zero Scroll Required](https://www.specbee.com/work/flipkart-trendstalk)