The Brief
Medac Pharma UK's injectable methotrexate pen, sold under the Metoject brand, had no dedicated digital presence in the UK market. With a growing patient population managing rheumatoid arthritis and psoriatic conditions via self-injection, and a prescribing community that needed fast access to clinical resources, the case for building something genuinely useful was clear.
I was brought in to own the UI/UX design and medical copywriting end-to-end: from audience research and journey mapping through to a complete design system, interactive Figma prototypes, and SEO-informed clinical copy, before liaising with the development team through to launch.
The Challenge
The core challenge was a genuine dual-audience split. Healthcare professionals, including rheumatology nurses and prescribing physicians, needed rapid access to prescribing information, dosing guides, the SPC, and condition-specific clinical resources across both rheumatology and dermatology indications. Patients, often newly prescribed and navigating self-injection for the first time, needed something structurally different: clear guidance on how to use the pen, storage, side-effect management, condition-specific FAQs, and signposting to support materials.
Both audiences needed to arrive at the same branded property and immediately find their path, without either journey compromising the other. A declarative HCP gateway was a regulatory requirement, and it had to function as a professional tool rather than a bureaucratic obstacle.
Pharmaceutical digital marketing in the UK is governed by the ABPI Code of Practice, which controls how prescription products can be promoted, what claims require substantiation, and how content must be categorised by intended audience. All copy was submitted to Medac's legal and regulatory team for ABPI compliance review, a constraint that shaped every content decision from the outset.
Approach
Audience Research and Journey Mapping
Before any design work began, I mapped both user journeys independently. The HCP pathway was structured for speed: get clinicians to the resources they need within as few steps as possible. The patient pathway was built around the sequence patients actually follow: what this medicine is, why it was prescribed, how to administer it correctly, what to expect, and how to report adverse effects. That sequencing informed the information architecture directly.
Design System from Brand Foundations
Medac provided the Metoject logo and the existing pen industrial design. From those foundations I built the entire website design system, covering colour, typography, component library, spacing, and iconography, then produced interactive Figma prototypes covering both user journeys. The system was designed to accommodate the content density a regulated pharmaceutical property requires without sacrificing clarity or visual coherence.
Medical Copywriting and SEO Research
Copy was grounded in published research on methotrexate, with specific attention to clinical outcomes from studies using the subcutaneous Metoject pen. Alongside accuracy and regulatory alignment, SEO keyword research was conducted independently to shape how content was structured and where emphasis was placed. Rather than targeting high-competition generic terms dominated by NHS guidance, research identified condition-adjacent queries where a branded property could realistically compete and where user intent aligned with what the site could actually offer.
Development Handoff and Launch
Following design sign-off, I liaised with the development team through the build and launch process to ensure fidelity to the approved prototypes and resolve implementation questions as they arose.
What I Learned
Regulated industries impose a useful kind of rigour. When every claim requires substantiation, you are compelled to understand the evidence base properly, and that pressure tends to produce genuinely better content than environments where copy can be written more loosely.
Designing for a split audience at this level of content complexity also reinforced how much information architecture shapes user experience before visual design enters the picture at all. The clearest wins on this project came from journey mapping and structural decisions made before a single frame was opened in Figma.