TradePharma Import — Website

The problem

TradePharma Import is a Brazilian distributor of hospital medicines that also advises on importing medicines not available in Brazil. It serves hospitals, health insurers, the public health system, prescribers, and patients. The company needed a site that explained how the service works and gave each of these audiences a clear way to start a conversation.

The constraint was language. The company advises on the import process, so the site had to read as advisory, not as a store: no purchase, price, or cost.

Discovery and constraints

• Sources: the company’s presentation, a review of competitor sites, and review meetings in which the client walked through the site section by section and dictated corrections.
• Only information the company confirmed could go to production: legal name, registration, address, contact channels, and regulatory wording.
• The first version kept six pages, with contact as the main conversion. No catalog, document upload, client area, blog, or e-commerce.
• Before launch, the client asked for a list of medicines to help people find the company through search. It became a bounded addition, built from the company’s own spreadsheet.

Key decisions

Advisory tone, not a store

The copy explains the process and who it serves. It never talks about buying, prices, or costs, so the site describes what the company actually does.

Pages assembled from a design system

Tokens, components, and page templates live in one design system, and each route assembles a template. Corrections from the review rounds land in one place and stay consistent across pages.

A medicine list for discovery, not a catalog

A static table shows name, active ingredient, and indication, with local search, a letter filter, pagination, and one page per medicine. There is no stock, price, or cart.

Staging first, then the company’s domain

A staging site on Cloudflare Pages carried a visible notice and blocked indexing. Production on the company’s domain switched to indexing, canonical URLs, and a sitemap.

A form that says what it does

The contact form sends through an email service only when its key is configured. Until then, it says on screen that it is a preview and does not send, while WhatsApp and email stay available as direct channels.

Solution flow

Company presentation, competitor review, and client meetings
-> confirmed content and regulatory wording
-> design system: tokens, components, page templates
-> six pages plus a medicine list from the company's spreadsheet
-> static export, validated at build time
-> staging with a visible notice and no indexing
-> client approval
-> production on the company's domain

Engineering and reliability

• Next.js, React, and TypeScript, exported as static HTML, CSS, and images, with no server.
• A build-time check validates the environment configuration before the export.
• Environment flags separate staging (notice, no indexing) from production (indexing, canonical URLs, sitemap).
• Every push to the main branch redeploys on Cloudflare Pages.
• Changes went through pull requests, including each round of client corrections.
• Photo credits and licenses are recorded for every image.

Outcome and evidence

• The site is live at www.tradepharmaimport.com.br, approved by the client before launch.
• The sitemap lists the main pages and about a hundred medicine pages.
• Contact runs through WhatsApp today. The web form remains an explicit preview until the company decides who receives it.

Traffic, leads, and sales have not been measured for this case.

What I learned

With a client in a regulated field, the most valuable discovery was not a feature list but a vocabulary: what the company can say, what it must not say, and who confirms each claim before it goes live.

What I would improve next

• Connect the form once the company decides who receives it, and confirm a real message end to end.
• Run a full accessibility audit. Responsive checks covered 320 to 1440 px, but a complete accessibility audit is not on record yet.
• Measure which pages bring contacts before adding new sections.