FRAGMENT
Project Overview
Syrma Johari MedTech is one of the region's leading end-to-end MedTech partners — a CDMO spanning design, engineering, contract manufacturing and regulatory compliance. Sixteen production sites, four design and innovation centres, 2.1 million square feet of manufacturing space, serving global OEMs across the US, EU and India.
For a company operating at that scale, the digital presence told a different story. A dated, text-first WordPress build that read like a blog, generated two to three leads, and gave a global-calibre manufacturer the web presence of a local vendor. The objective: rebuild the entire platform — information architecture, design system, sixty pages, custom development, a real content engine, and an AI concierge — into an experience that matches the company's global standing and is engineered to convert.
Pages designed and developed — end to end,.
UX Research
Information Architecture
UI/UX Design
Custom WordPress Development
Mobile First Design
Mega Menu Engineering
CMS Architecture
Mobile-First Design
Native AI Assistant
CRO & HubSpot Integration
Increase in inbound leads
A unified platform across five pillars — Capabilities, Market Segments, Technologies, Resources and Company — anchored by a reusable component system and a content engine the team can grow without a developer.
Static Experience, Broken Architecture
No motion, no modern interaction, and an information architecture that made it hard for a visitor to understand what the company did or find what was relevant to them.
Fragmented, Inconsistent Design
Pages were built in bits and pieces. No shared system across type, colour, spacing or components, so the site never read as one brand.
Dated, Blog-Like Experience
The build carried the look of an older WordPress site — text-first and template-driven, with none of the polish a global manufacturer's buyers expect.
Underperforming Lead Engine
A global-scale CDMO was generating just two to three leads. The site captured, qualified and converted almost none of the OEM traffic it received.
No Visual Hierarchy
Wall-to-wall text with no weighting. Nothing guided the eye, every message competed with every other, so none of them landed.
What Do They Actually Do?
Capabilities were scattered across text pages with no structure, so a buyer couldn't quickly grasp the full scope of design, manufacturing and compliance.
Can I Trust Them at This Scale?
Proof of a global, regulated manufacturer — sites, certifications, awards, case studies — was buried in paragraphs instead of shown.
Where's What's Relevant to Me?
A diagnostics OEM and an aesthetics OEM saw the same undifferentiated site, with no segment or technology paths to their own use case.
Is This a Serious Global Partner?
The dated interface undercut the company's real standing, making a 2.1 million square foot manufacturer look smaller than it is.
A CMS for Blogs and Nothing Else
A single CMS powered the blog. News and events, case studies, whitepapers, webinars, thought leadership and media had no structured home — each was a manual, hard-coded page that couldn't scale.
How Do I Even Start a Conversation?
No clear, low-friction path from interest to enquiry meant motivated buyers had nowhere obvious to convert.
Project timeline - 12 Week
1.
STRATEGY
Goals and approach + Audit findings + Opportunity mapping + Scalability constraints of the WordPress environment
2.
RESEARCH
Existing-site content audit + Competitor benchmarking against global MedTech CDMOs + Buyer personas + User journey + Information-architecture gaps
3.
IDEATE
Information architecture + Category templatization + Design system + High-fidelity design across 60 pages + Reusable component library + Clickable prototypes
4.
DESIGN
Custom WordPress build + Reusable, editable components + Mega menu + Seven CMS engines + Native AI assistant + Performance rebuild
The build started with a full audit of the existing site and a benchmark against the world's leading MedTech CDMOs — mapping how top contract manufacturers structure capability, segment and technology content, where trust signals sit, and exactly where Syrma Johari was losing buyers to clutter and confusion. Those findings set the architecture, the templatization strategy, and the trust-and-conversion logic that runs through every page.
We conducted user research to identify 7-8 distinct user personas. This allows us to tailor the website experience for each unique audience segment.
Reorganised sixty pages into a clear, scalable hierarchy that lets any buyer find their path in a single move — and gives every category its own visual family.
1.
Structure the Full Scope
Organised the site into five clear pillars, so a buyer can grasp what the company does and go straight to what matters to them.
2.
Templatize by Category
Built a dedicated template per category. Every page shares a logic; so does every page inside Segments and Technologies.
3.
Educate and Convert on Every Page
Every page carries capability, proof and a clear next step, so exploration always has a route to enquiry — never a dead end.
4.
Build for Scale
Designed reusable, editable components and CMS-driven content, so the team can grow the site — new pages, new resources, new authors — without touching code.
Mapped the buyer's path from first impression to enquiry, then removed friction at every step.
Discover
Land and immediately understand what Syrma Johari does and at what scale.
Understand
Navigate by capability, segment or technology straight to the exact relevant expertise.
Evaluate
Read the proof — case studies, certifications, awards, test infrastructure — shown, not buried.
Engage
Convert through low-friction forms and an AI concierge that answers on the spot and books the call.
Each decision is read through the two lenses a product designer has to hold at once — the buyer's doubt it removes, and the business outcome it's built to drive. A single system of templates and components carries all sixty pages.
Open with scale, not paragraphs.
PROBLEM
A global manufacturer opened on walls of text. A first-time OEM visitor formed no impression of scale and had no obvious next step, so the most valuable traffic bounced before it engaged.
SOLUTION
A motion-led hero that leads with the one line that matters — "Accelerating Medical Device Innovation, Concept to Scalable Manufacturing" — backed by the numbers that prove it (16 production sites, 4 design centres, 2.1M sq ft) and a single, clear call to action.
Give every category one family.
PROBLEM
Capability pages were built in bits and pieces. A buyer reading Design & Engineering couldn't tell it belonged to the same company as Manufacturing or Compliance.
SOLUTION
A dedicated template per category. Every page under Capabilities shares the same rhythm — hero, intro, proof stats, integrated capabilities, labs and infrastructure, case studies, CTA — so the whole set reads as one coherent system and buyers know exactly where they are.
Weight the page so the eye knows where to go.
PROBLEM
With no hierarchy, every element carried the same weight. Nothing led, so buyers skimmed past the arguments that actually convert.
SOLUTION
A grid and type system that ranks each block by importance — proof surfaced, capability claims tied to outcomes, supporting detail stepped down — expressed through gradients, glassmorphism and bento layouts drawn from the same brand palette.
Make the proof scannable.
PROBLEM
The strongest arguments — 250+ devices designed, class I to III experience, global OEM partnerships — sat inside paragraphs nobody reads.
SOLUTION
Proof pulled out into scannable stat cards at the top of every capability page, so a buyer sees the evidence before the pitch.
Give each buyer their own path.
PROBLEM
A diagnostics OEM and an aesthetics OEM saw the same undifferentiated site, with no route to their own use case.
SOLUTION
Two new navigational dimensions — Market Segments and Technologies — each templatized, so every buyer reaches content built for their exact application, from Microfluidics to Radiofrequency to Critical Care.
Turn the resource library into a system.
PROBLEM
Only the blog had a CMS. Case studies, news and events, whitepapers, webinars, thought leadership and videos were manual pages that couldn't scale and never stayed consistent.
SOLUTION
Seven custom CMS engines, each with reading-time calculation, scalable cards and WYSIWYG content — built on a two-dimensional taxonomy of content type and author. A single article can live in multiple categories and carry a dynamic author and co-author.
Design the reading experience, not just the article.
PROBLEM
Long-form content was a single column of text with no way to navigate it or convert while reading.
SOLUTION
A two-column reading layout — the article on the left, a sticky rail on the right holding a get-in-touch banner, related articles and a live table of contents — so every read stays oriented and one click from enquiry.
Let case studies work across the site.
PROBLEM
A case study proving a capability couldn't be shown on the capability page it supported.
SOLUTION
A cross-posting model that surfaces any case study on the relevant capability, segment or technology page, so proof appears exactly where the argument is being made.
Put a concierge on the site.
PROBLEM
Buyers arriving after hours, or with one specific question, had no immediate way to get an answer or start a conversation.
SOLUTION
Sygma AI — a native voice and chat assistant trained on Syrma Johari's own database — that answers questions about the company and books a consultation on the spot. A twenty-four-hour front desk built into the page.
We rebuild MedTech and B2B platforms from the architecture up — design system, custom development, a real content engine and on-site AI, all engineered to convert.
