Skip to work
Melbin Kuriakose
Back to work
A

Alternicq

The corporate platform for India’s largest rigid plastic packaging manufacturer

  • Project lead
  • Product
  • UX
  • Design direction
  • Engineering
  • Delivery

A 45-year-old company changed its name. The website had to change without losing the trust, the search identity, the regulatory information, the usability for buyers, or the client’s ability to run it themselves. I led the scope, the structure, the design direction and the build.

  1. Manjushree Technopack

    45 years of coverage, links and citations

  2. MTL

    The short form people also search for

  3. Alternicq

    The name the company uses now

The user’s problem

Someone searches for a company that no longer exists under that name. They need to know, immediately, that they are in the right place.

The rebrand was not only a visual identity problem. It was an information and discoverability problem.

36
route files
One corporate ecosystem
79
React components
One visual language
11
REST endpoints
A backend with a real user
6
content types
A CMS the client can operate
My role
Project lead - product, UX, design direction and delivery
The client
India’s largest rigid plastic packaging manufacturer, listed
Status
Live at www.alternicq.com, run by the client’s own team
Stack
Next.js 16, TypeScript, Tailwind v4, headless WordPress
The Alternicq site - the corporate platform as it shipped

Why this wasn't just a website

Four constraints, and what each one forced

Every one of these changed the product, not just the implementation.

01

A 45-year-old company was changing its name

Manjushree Technopack became Alternicq. Four decades of press coverage, backlinks and search results point at a name the company no longer uses. Get the launch wrong and the new brand starts from zero while the old one keeps ranking.

Consequence
Returning visitors search for a company that no longer exists under that name.
Response
Treat the rebrand as an information problem, before launch rather than after.
02

A listed company has obligations, not just pages

Quarterly results, board policies, disclosures, earnings-call notices, corporate governance filings. These are not marketing content - they are documents with legal publication deadlines, and they have to be findable and correctly dated.

Consequence
Without investor relations, the new site cannot legally replace the old one.
Response
Build IR in v1, designed as a filing cabinet rather than as marketing.
03

The team that runs it is not technical

Marketing publishes press releases. Investor relations uploads PDFs on a deadline. If either one needs a developer to publish, the site goes stale within a quarter - which is exactly what had happened to the old one.

Consequence
If publishing needs a developer, the site goes stale within a quarter.
Response
Design the CMS as a product, for a marketing executive on a deadline.
04

The hosting was decided before I was

GoDaddy shared hosting. No Node runtime, no container, no build server, a PHP upload limit measured in single-digit megabytes, and an Apache config that returns a 500 on several of the directives you would normally reach for.

Consequence
No Node runtime, no container, no build server.
Response
Design inside the constraint: a static export onto Apache.

TL;DRThe rebrand was not only a visual identity problem. It was an information and discoverability problem.

Carrying 45 years across

What was actually done about it, before launch rather than after.

Entity continuity

Organization schema declares Manjushree Technopack and MTL as alternate names, so a search engine or AI assistant resolves all three to one company instead of three.

Facts, structured

Capacity, plant count, founding year, patents, certifications and customers are expressed as data an answer engine can quote - not just as sentences in a hero section.

FAQ schema

Eight questions written to match what people actually ask about a packaging manufacturer, answered factually enough to be excerpted verbatim.

AI crawlers, explicitly welcomed

GPTBot, ClaudeBot, PerplexityBot, GeminiBot and Google-Extended are allowed by name in robots, because being absent from AI answers is now a way to be invisible.

Per-page metadata

Every route has its own title, description, canonical and OpenGraph tags. Industry and article pages generate theirs from the content they render.

Schema per page type

Breadcrumbs everywhere, Product schema on product pages, Service schema on each of the 11 industries, NewsArticle on every post, and a search action on the site itself.

Audiences

There is no single user of this site

Five groups, wanting genuinely different things - two of them on the public site and three of them inside the CMS.

What they came for

  • Products
  • Industries
  • Capacity
  • Certifications
  • Plant information
  • Specifications
  • Contact

Their path

  1. Industry
  2. Product
  3. Specification
  4. Enquiry

Arrives knowing their industry and their format - not the company’s plant structure.

TL;DRTwo audiences, one site - but they don’t need to navigate the same way.

Information architecture

Navigation built on what people came to do

Not on how the company is organised internally.

  • What we do

  • Products

    9 product pages

  • Industries

    11 industry pages

  • Innovation

  • Company

  • Sustainability

  • Investor Relations

    13 routes

  • News

  • Contact

Buyer path

  1. Industry
  2. Product
  3. Specification
  4. Enquiry

Investor path

  1. Investor Relations
  2. Quarter / document
  3. Filing

Two audiences, one site - but they don’t need to navigate the same way.

The product finder

The catalogue reorganised around what a buyer already knows.

How the company is organised

  1. Plant
  2. Process
  3. Product

Correct internally, and useless to someone who has never been inside the company.

How a buyer already thinks

Industry: The buyer arrives knowing the market they sell into.

The finder filters on what a buyer actually knows, rather than on the internal product tree.

Information hierarchy on a product page

What a procurement lead needs first, and what can wait.

  • Capacity
  • Certifications
  • Client logos
  • Plant map

Buyers scan first. Reading comes second. Every section was structured around that order.

Investor relations: designed for finding, not persuading

A fundamentally different job from the marketing site.

Marketing

  1. Explore
  2. Understand
  3. Trust
  4. Enquire

Persuasion is the job.

Investor relations

  1. Find
  2. Verify
  3. Download

Retrieval is the job. This section is not marketing and should not read like it.

What the IR section holds

  • Disclosures
  • Annual reports
  • Quarterly reports
  • Presentations
  • Policies
  • Governance
  • Earnings-call events
  • Investor contact

13 routes. Documents are uploaded, dated and categorised by the IR team - scannable in a table, because the person using it came for one specific PDF from one specific quarter.

The product decisions underneath

Two audiences, one site

A procurement lead at a beverage brand and an equity analyst want nothing in common. Rather than average them into one bland structure, the navigation splits early - "what we do" is built for the buyer, "investor relations" for the analyst and the regulator - and neither has to walk through the other.

Navigation in the buyer’s language, not the org chart

Internally the company is organised by plant and process. Buyers do not think that way - they arrive knowing their industry and their format. So industries and products became two parallel entry paths into the same catalogue, and the finder filters on what a buyer actually knows.

Investor relations designed as a filing cabinet

This section is not marketing and should not read like it. Documents are dated, categorised and scannable in a table, because the person using it arrived to find one specific PDF from one specific quarter - not to be persuaded of anything.

Built for scanning, then for reading

A procurement lead scans: capacity, certifications, client logos, plant map. Those are the first screen. The prose that justifies them sits underneath, for the smaller number of people who read on. Every section was structured around that order.

What we deliberately left out

No gated downloads, no chat widget, no newsletter interstitial. For a manufacturer selling on credibility to enterprise buyers, friction that converts a consumer site reads as amateur here. Scope discipline was as much of the job as scope definition.

The rebrand as a UX problem too

Returning visitors were looking for a company that no longer exists under that name. The old identity stays visible and explained rather than scrubbed, so someone who arrives searching for Manjushree Technopack knows immediately they are in the right place.

Design

A system before any screen was drawn

With 36 routes ahead, the system is what stops the site becoming a pile of pages.

Set before any screen was drawn

  • 16 brand colours, exposed as CSS variables
  • A type scale
  • A spacing scale
  • Shared component primitives

36 routes

36 pages that look different

36 routes

One coherent visual language

With 36 routes ahead, a system agreed on day one is the difference between a site and a pile of pages. Approved designs were then specced straight from the Figma file rather than eyeballed, so what shipped matched what the client signed off.

Four breakpoints, tested

Mobile-first, with elements that genuinely behave differently across them.

375px · Mobile

Elements that behave differently across these

  • Diagonal hero
  • Industries accordion
  • Case-study carousel

Mobile-first, and tested at all four of these widths.

The CMS is a product too

Its user is a marketing executive on a deadline

The backend had its own users, its own jobs and its own interface work - so it is not buried in the engineering section.

Can the client operate the site without me?

TaskWho does itDeveloper needed?
Publish newsMarketingNo
Upload quarterly resultInvestor relationsNo
Add product / spec fieldMarketingNo
Add plantMarketingNo
Read enquiriesSalesNo

The default WordPress widgets are gone. The client logs in to an overview, quick actions, products by segment, latest enquiries and recent products - the five things they actually came for. The backend is a product, and its user is a marketing executive on a deadline.

What the client owns, and what stays in code

Each section was sorted by who would edit it, and how often.

The client changes this

WordPress content

  • Products
  • Plants
  • News
  • Investor documents
  • Enquiries
  • Dynamic specification fields

The client never changes this

Code

  • Layout and components
  • Navigation structure

It renders faster in code, and cannot be broken by a bad paste.

The content model was designed around the people who maintain the product.

What shipped

The public site

Home, company, leadership, sustainability, innovation, 9 product pages and 11 industry pages - all mobile-first and tested at 375, 768, 1280 and 1440.

Investor relations

13 routes covering disclosures, annual and quarterly reports, presentations, policies, governance, earnings-call events and investor contact. Documents are uploaded, dated and categorised by the IR team.

A product catalogue with editable specs

Products carry segment, technology and material taxonomies. The client can add an entirely new spec field from the WordPress admin and it appears on every product and in the finder - with no code change.

A product finder

Filter the catalogue by what the buyer actually knows: industry, material, technology, capacity - rather than by the internal product tree.

Newsroom

Blogs, press coverage and events, each with its own listing, category filters, pagination and article pages generated from WordPress.

An India plant map

Locations are content, not a hard-coded SVG. Plants and offices are added in WordPress and the interactive map picks them up.

Contact and enquiry handling

A validated form with file attachments that stores every enquiry as a record in WordPress and sends a transactional email, so nothing depends on someone watching an inbox.

A custom WordPress dashboard

The default widgets are gone. The client logs in to an overview, quick actions, products by segment, latest enquiries and recent products - the five things they actually came for.

Designed inside the constraint

The hosting was decided before I was

Taking that as fixed shaped the architecture - and it did not cost the launch date.

  • GoDaddy shared hosting
  • No Node runtime
  • No container
  • No build server
  • PHP upload limit in single-digit MB
  • Apache 500s on several standard directives

The architecture that came out of it

  1. Next.js
  2. Static export
  3. Apache
  4. WordPress on its own subdomain

A fast public site with no database and no PHP on the public domain, and a CMS the client can still edit. The constraint shaped the architecture rather than delaying the launch.

Security, as it actually went

A launch-ready site, stopped for one more pass.

  1. Front-end pass
  2. Second server pass
  3. Real issue found
  4. Fixed
  5. Production

What was found

Apache serving an open directory listing over the uploads folder.

Why it mattered
The contact form accepts file attachments, including CVs - every one enumerable and downloadable by anyone.
The fix
An index file dropped into every folder, re-applied nightly, because WordPress creates a new upload folder each month.
Outcome
Closed before launch, rather than after a disclosure.

The engineering calls behind it

Security headers in .htaccess, not middleware

A static export never executes the framework’s header configuration - it is just files on disk. Leaving the headers in code would have meant a site that passed every local check and shipped with none of them. They are declared in both places, and the one that actually runs in production is the Apache config.

An index file instead of a config directive

The textbook fix for a listable folder is one Apache directive - which this host rejects with a 500. So the fix drops a silence file into every folder instead, re-applied nightly, because WordPress creates a new upload folder each month.

A password gate that disappears on its own

The client needed to review the site privately before launch. The gate is an HMAC-signed cookie checked at the edge, with constant-time comparison and a brute-force delay - and it switches itself off entirely when its secret is absent, so launch day was removing an environment variable rather than shipping a code change.

Sanitise on the way in, not on the way out

WordPress HTML is rendered into the page, so a compromised editor account is a script-injection path. Every field passes an allow-list sanitiser before it reaches the DOM - an allow-list rather than a block-list, because the list of dangerous things is never finished.

The decision log

Eight calls, each with the option I did not take

A decision without its alternative is just a description.

01

Scoped a platform when the client asked for a website

The moment
The brief was a redesign. But the site being replaced had gone stale within months of its own launch, for one reason: every change needed a developer.
What it bought
The client publishes news, filings and products themselves. The site stays current without a retainer, which is the only reason the enquiry channel stays alive.
02

Designed inside the hosting instead of fighting it

The moment
Hosting was already bought and already decided - GoDaddy shared hosting. No Node runtime, no containers, and an Apache config that rejects several standard directives.
What it bought
Launched on the original date with no new hosting spend - and ended up with a public domain that runs no database and no PHP, which is a smaller attack surface than the migration would have produced.
03

Chose the CMS the client already knew, not the one I preferred

The moment
The content backend needed picking. A modern headless CMS would have been considerably nicer to build against.
What it bought
Zero training cost and zero new spend, and - more importantly - the team actually uses it. A better CMS nobody logs into is worth less than a familiar one they do.
04

Built the investor-relations section in v1, not phase two

The moment
Investor relations is a third of the routes, has no visual appeal and produces no marketing story. It was the obvious thing to defer.
What it bought
The old site could be switched off at launch instead of running in parallel. The IR team uploads filings on their own deadlines, with no developer in the chain.
05

Treated the rebrand as a search problem before launch, not an SEO cleanup after

The moment
The company was changing its name after 45 years. Four decades of coverage, links and citations point at "Manjushree Technopack" and "MTL".
What it bought
The old name resolves to the new company rather than to a dead end, and the facts are in a form answer engines can quote. Search authority moved with the brand instead of being rebuilt from zero.
06

Made the product schema editable rather than hard-coding it

The moment
A packaging catalogue grows attributes constantly - neck finish, resin grade, barrier type. Hard-coding them is faster to build and a permanent tax afterwards.
What it bought
A new spec field appears across every product page and in the finder with no deploy. The catalogue grows at the speed of the marketing team, not the speed of my availability.
07

Cut the conversion tricks and left one clear way to make contact

The moment
There was pressure to add the usual growth furniture: gated PDFs, a chat widget, a newsletter interstitial.
What it bought
Specs, certifications and plant data are open to anyone, and the enquiry form is the single unambiguous next step - which is exactly where the increase in enquiries shows up.
08

Stopped a launch-ready site to run a second security pass

The moment
The front end had already been hardened and the site was ready to go. Running another pass over the server meant admitting the work was not finished.
What it bought
Found Apache serving an open directory listing over the uploads folder - every attachment, including CVs, enumerable and downloadable by anyone. Closed before launch instead of after a disclosure.

The process

Understand, structure, system, design, build, ship

Ten stages, in the order they happened. Pick one.

01

Read the business before the brief

A packaging manufacturer selling to Coca-Cola, L’Oréal and Nestlé is not selling to consumers. The site’s job is credibility with procurement teams and compliance with the regulator - not conversion. Getting the client to agree on that first is what made every later decision easy.

The result

What changed

The headline number is the client’s. The rest is what that number sits on.

 BeforeAfter
UpdatesA developer was requiredThe client publishes independently
NavigationThe company’s internal organisationThe buyer’s mental model
IdentityManjushree Technopack / MTLAlternicq, with continuity
The thing itselfA static corporate presenceSite, catalogue, finder, IR, CMS and enquiries

+40%

Enquiries through the site rose 40% after launch

Not from adding conversion furniture - from removing it. Open specifications, a product finder built on what buyers already know, and one unambiguous path to making contact.

The old site could be switched off on day one

Because investor relations shipped in v1 rather than phase two, there was no period of running two sites in parallel and no gap in statutory disclosure.

Publishing no longer needs a developer

Marketing, investor relations and sales all work from the WordPress admin. Nothing on the content side comes back to me, which is what keeps the site current after the invoice is paid.

The rebrand did not cost the company its search identity

Both the old and new names resolve to one entity in structured data, so 45 years of coverage still leads buyers to the current company.

A real data exposure closed before it was public

The pre-launch security pass caught an open directory listing over uploaded files, including CVs sent through the contact form. It never reached production.

What I actually did

Product

  • Scope
  • Information architecture
  • Content model
  • Stakeholders
  • Product decisions

UX

  • Buyer journeys
  • Investor experience
  • Product finder
  • CMS experience
  • Information hierarchy

Visual design

  • Design direction
  • Design system
  • Responsive behaviour
  • Components
  • Figma → production consistency

Engineering

  • Next.js
  • React
  • WordPress
  • REST API
  • Static deployment
  • Security
  • SEO / GEO
The full list of responsibilities
  • Project lead - owned the scope, the sequence, the timeline and what shipped when
  • Client and stakeholder management - requirements and sign-off across marketing, investor relations and leadership
  • Product decisions - what got built, what was deliberately cut, and in what order
  • Information architecture - the navigation, the section structure, and the path a buyer takes through it
  • Design direction - briefed and reviewed the designer, and owned the design system the screens were built on
  • Team - directed the other developer on the project and reviewed what went in
  • Front-end engineering - Next.js 16 App Router, TypeScript, 79 components, server and client split
  • Backend engineering - a custom WordPress plugin: content types, taxonomies, REST API, admin UI
  • Content modelling - deciding what the client owns and what stays in code
  • Security, SEO and GEO - hardening, structured data, and carrying the rebrand across without losing authority
  • Deployment and operations - static export, host configuration, launch and handover

A redesign brief became a platform the client runs themselves.

Understood the business, structured the product, designed the experience, set the visual system, built the front end and the backend, solved the hosting, carried the rebrand across, and handed over a platform the client operates without me.