200 members. 62 countries. One source of truth.
A fifty-year-old FMCG network with no way to show its own value. We built ESMA a custom platform (public site, member dashboard and native app) where every company, event and connection finally lives in one structured, searchable, provable place.
At a glance ESMA International Network
In short
Overview
The network was the product. The website wasn’t.
ESMA has connected manufacturers, distributors and agents in packaged consumer goods since 1976. Two hundred-plus member companies. Sixty-two countries. Membership by invitation only, screened by the CEO and approved by the Board. Fifty years of that produces something rare: a room where introductions actually convert. What it did not produce was a way to find anyone in it. We rebuilt ESMA as a product: one public platform, one members’ area, one native app, one design system underneath all three.
1976
Founded
200+
Member companies
62
Countries
3
Products, one system
The challenge
A membership problem, not a website problem.
Every member joins ESMA for three things: an endorsement that carries weight, visibility with the right buyers, and access to a room they can’t get into. None of the three shows on a brochure site. A member could be listed for a decade and never know if one distributor had looked them up. The network’s own data (who makes what, sells where, in which sectors, under which brands) lived in spreadsheets and in the CEO’s head.
The foundation
Three products. One vocabulary.
Before a single page was designed, we built the system all three products would speak. Atomic naming, three breakpoints, every component drawn in every state it would ever hold, well past the happy path. Form fields ship in six states, calendar days in eleven, the profile-edit flow in forty-eight. It’s the reason the app, the dashboard and the public site look like one organisation rather than three vendors.
185
Component sets
530
Icon variants
50
Colour tokens
3
Breakpoints
~110
Designed screens
The centrepiece
A directory that thinks in taxonomies.
The directory is the asset the whole network is built on, so we modelled it properly rather than listing it. Six filter facets work simultaneously over two hundred companies: company name, member category, product category with a nested sub-tier, country, trade sector and brand. A buyer looking for organic beverages, chilled, sold into Iberian supermarket chains gets there in four clicks instead of one email.
Step 01
Model the network
Every member resolves across five axes at once. Product categories nest, so “Food products, then Frozen” filters without duplicating the record.
Step 02
Filter, don’t browse
Six facets, applied live and combinable. Selected filters stay visible and individually removable, so nobody loses their way three refinements deep.
Step 03
Profile as business record
Headcount, trade sectors, brands, product categories, temperature class, multiple mapped addresses and named contacts with direct lines.
Step 04
Built to be maintained
Members edit their own record through a guided six-step flow. The directory stays accurate because keeping it accurate is in the member’s interest.
The profile
Everything a buyer needs. Nothing they don’t.
A member profile does two contradictory jobs: read like a company’s best foot forward, and function as a structured record a stranger can assess in ninety seconds. We split it in two, narrative and imagery on one axis, hard facts on the other. Identity, company numbers, named points of contact, mapped locations, classification, and links whose every click is tracked back to the member’s dashboard.
Events engine
Every shape a programme can take.
ESMA runs conventions, seminars, webinars and trade fairs across dozens of countries. Single-day and four-day, one stage and three in parallel, free and ticketed. Rather than force the association to fit one template, we designed the engine to absorb all of it.
Knowledge layer
Open enough to attract. Gated enough to matter.
Four content types, each with its own archive, template and filtering. News stays open and indexable, doing the work of acquisition. Reports, documents and regulatory updates sit behind membership, doing the work of retention. One shelf, two jobs.
Membership
Invitation only. Rendered as a process.
ESMA’s exclusivity is the mechanism itself. Applicants are screened by the CEO and confirmed by the Board, and the resulting endorsement is precisely what members are buying. So we built the funnel as a governance workflow with real states behind it.
Step 01
Request an invitation
Applications are accepted from the web and the app alike, into one governed queue.
Step 02
Review & CEO screening
The CEO screens each applicant, the same authority the endorsement is built on.
Step 03
Board decision
Confirmed by a Board decision. Exclusivity is the mechanism.
Step 04
Onboarding & profile
Approved members are onboarded straight into a guided profile setup.
The payoff
Membership, with the receipts.
Members have always paid for visibility. Now they can see it. Every member’s dashboard reports how their profile is actually performing: clicks on the website link, on each named contact, on the map and on every social channel, filterable by year and month. A renewal conversation stops being a matter of faith.
Some content is blurred to protect client and member data.
Under the hood
Bespoke because the shelf had nothing on it.
A five-axis member taxonomy, a governance workflow with real states, per-member analytics, four gated content types, a multilingual front end and a native app on the same data. There is no plugin for that. We built it as a custom Laravel application so ESMA owns its own system of record, with no licence dependencies, no platform tax, and a data model that can still be extended in twenty years.
Engineered
Custom Laravel application on a purpose-built data model. No plugin does this.
Member taxonomy across five simultaneous axes, with nested product categories.
Membership lifecycle as first-class states: applied, screened, approved, onboarded.
Per-member click analytics across links, contacts and social channels.
Role-based member area with team user management.
A front end built for translation, with copy held apart from the interface.
Native iOS & Android on the same data, with push and guest-mode browsing.
Applications accepted from web and app alike, into one governed queue.
Designed
One system, three products.
An atomic design system of 185 component sets and 1,421 variants, with three breakpoints applied to pages and components, every interactive element drawn in every state, a centralised modal system, and QA sign-off tracked component by component. Accessibility designed to WCAG 2.1 AA across both grounds (designed to that standard; an audit has not been run).
Stack
The result
One network. Three products. Zero seams.
ESMA now runs on a platform it owns outright. Two hundred member companies are searchable across five axes instead of scrollable in one list. Applications arrive as a governed workflow rather than an inbox thread. Members maintain their own records, manage their own teams, and see for themselves what their membership is returning. And it’s the same product in a browser, in the members’ area and in the hand, because it was one system from the first component.
110+
Screens designed
185
Component sets
3
Products shipped
62
Countries served
Across surfaces
One product, four ways in.
The same data and the same design system, seen through every surface a member touches, from the public website on desktop and on mobile to the native app and the member dashboard behind the login. Open any frame to read the page in full.
Some content is blurred to protect client and member data.
See it live
Seen enough? Go and use it.
The platform is live on the web and on both app stores. Take a look, or pass it on to someone who should.
Let’s talk
Got a project
in mind?
Prefer a call?
Book a free 30-minute callOpens a booking panel here, or a new tab if scripts are blocked. Cookie Policy.