ESMA International Network

The brief

ESMA has connected manufacturers, distributors and agents in packaged consumer goods since 1976: more than two hundred member companies in sixty-two countries. Membership is by invitation only, screened by the CEO and approved by the Board, and what members pay for is the network itself — the endorsement, the visibility, the introductions.

Loco Digital took on a new platform for them: a public website, a members' dashboard and a native app for iOS and Android. My part was the design of all three — the wireframes and the responsive UI for the site, the app's UI, the design system they share and its documentation — working with Adam, Loco's project manager. Loco built it: the website on Laravel, and the apps natively.

Where I started

There was no analytics data to work from, so I started from what ESMA already had: their previous website, read page by page as a member, a buyer and an applicant would read it. Three problems kept coming back.

• The network couldn't be searched. Two hundred companies sat in a flat list, with no way to find a distributor by country, sector or product.
• Membership was hard to justify. Members paid for visibility, and nothing showed them what that visibility returned.
• Joining ran on email. An application, the CEO's screening, the Board's decision and the onboarding lived in inbox threads, with no state anywhere.

So the job wasn't a new brochure site: it was a product, with the directory at its centre.

One system for three products

The site and the app were going to be built separately, by different hands, on different technologies. If each had its own visual language, they'd drift apart within a release. So I designed one foundation for both: one set of tokens — colour, type, spacing, radius — and one set of components, organised atomically, from the smallest pieces up to whole templates.

The site and the app use them differently, but they're the same components underneath, which is why the public site, the members' dashboard and the app read as one organisation. Every component was drawn in every state it would hold, not just the happy path: empty, loading, error, disabled, selected.

The documentation went into Notion, alongside annotations in Figma: how each component behaves, its effects and transitions, the flows it belongs to — with real references I'd researched, so the developers could see what I meant rather than guess.

Accessibility was part of the brief I set myself: the design targets WCAG 2.1 AA, in contrast, focus states and target sizes. I didn't audit the build, so that's a statement about the design, not the live site.

The directory and the profiles

The parts I enjoyed most were the ones members use every day. The home page's hero leads straight into the network. The member search filters the directory across categories, countries, trade sectors, product categories and brands at once, with the filters always visible and each removable on its own.

Each member's profile works as a business record a buyer can assess in a minute — the company's story on one side, the hard facts on the other: trade sectors, brands, product categories, addresses and named contacts. And every profile connects to its company's own dashboard, which I designed too: where members keep their profile up to date and see how often it's being found and contacted.

The hard part: events of every size

ESMA runs conventions, seminars, webinars and trade fairs, and their pages have nothing in common. Some events have a single paragraph. Others have a programme over several days, speakers, sponsors, venues and galleries. One template would either be empty for the small ones or overflowing for the big ones.

So instead of designing one event page, I designed its sections, and proposed that the admin decides which ones each event shows. A one-day webinar gets a short page; a four-day convention gets the whole set — and both look like they were designed for exactly what they hold. Loco built it that way.

Joining, as a process

Exclusivity is what ESMA sells, so joining was designed as a governed process rather than a contact form: each application moves through clear states, from request to onboarding.

Result

The website and both apps are live, built by Loco on the design and the system I handed over. Not every detail made it into the build exactly as designed, but the structure did: a directory that can be searched, profiles that work as records, events that fit their content, and one visual language across the web and the app.

The team

At Loco Digital: Adam, the project manager, kept the project moving between ESMA, design and development; I designed the site, the app, the system and its documentation; and Loco's development team built the website and the apps.