The product page mockup was approved with a four-word title, a square photo, and three bullet points of benefits. The first real product arrives. The trade name takes up two lines and includes a registered trademark. There are several sizes in two materials, each with its own code. The IFU and the surgical technique guide need a place the mockup didn't have. And there's no approved text for the three bullets: what can be said about the product is in the IFU, in a different form.
Designing without the real content is fast, and that speed is paid for later. In this industry, the cost is higher than in others.
What a manufacturer's content brings with it
Medical device product names are long and can't be shortened. They include the family, the system, the registered trademark, and sometimes the size. A card designed for “Product name” breaks with “Button Acromioclavicular Floop® AC2,” and that applies to a large part of the catalog, not just an isolated case.
The indications come from the approved IFU. On a website in any other industry, if a piece of text doesn't fit in a card, it gets shortened. On a medical device product page, the approved text stays as it is, and it's the design that has to make room for it.
Then there are the tables. A plating system can have dozens of SKUs, each with a code, size, number of holes, and side. That table is the most consulted part of the product page, and in a mockup with placeholder content it usually doesn't exist. Related documents come with their number and revision, and each product has a different number of them. And when the site is bilingual, the English version changes the length of every title.
None of this is discovered by looking at other companies' websites. It shows up when the company's material is opened and the page is written with it.
The order we follow
First, we understand what the company needs to say and to whom. Then we define the architecture: what a product page is at that company, what data it carries, and what each product relates to. Only then is the missing copy written, each team validates its part, and the design works on copy that already exists.
With the content written, the design resolves real hierarchies. If every product has a code table, the table is designed with the same care as the photo. If only some have a surgical technique video, the video doesn't take up a fixed block that stays empty on half the product pages. If a corporate headline needs three lines to say what the company does, it's designed for three lines.
At SAI, an Argentine orthopedic manufacturer and distributor, the process was reorganized to work first on the brand and its communication territories, then on content section by section, and only after that on design and development. The catalog, with nearly 270 products, had no copy for the web. There were technical data sheets from Engineering, congress presentations, and clinical judgment spread across different people. The content was written, validated with the right people, and the design was built on that material. The copy went back for review already applied to the screens, not loose in a document.
The cost of writing first
The client sees screens later. For a while, what gets reviewed is copy and structure, and that calls for a different kind of attention than looking at a mockup. Meetings at that stage are about what each page says and who confirms it, and it's worth making clear from the start that colors aren't on the table yet.
It also changes who sets the pace. With design first, the schedule is set by the design studio. With content first, it's set by the validation of technical content, which at a medical device company goes through people from different teams with their own calendars. That pace is harder to predict, and it's the project's real pace: with placeholder content, that validation still comes, only later, on approved screens that have to be redone.
If the design is already done
Many companies come to us with an approved design and the copy still pending. Before building, it helps to test the design against the catalog's edge cases: the product with the longest name, the one with the most SKUs in the table, the one with the most associated documents, the one without a single good photo, and the English version of each. Whatever doesn't fit is adjusted in the design before the rest of the catalog is loaded.
Services covered in this article
