Sole designer and developer, start to finish
This was client work for a regulated medtech company, and I was the only designer or developer on it, so the whole chain below is mine:
- Brand identity — the logo and visual identity the company still uses across its site, product and conference presence.
- UX & content architecture — structuring content that keeps growing (the publications database, the news archive) rather than a fixed set of pages.
- Interface design — sketches through lo-fi and hi-fi wireframes to six finished templates.
- Design system — the Figma tokens and components the templates are built from.
- Front-end development & deployment — the responsive build, a staging environment for stakeholder review, and shipping it myself.
The whole chain, one person
A regulated medtech company needed one website for two audiences who want different things. Clinicians are evaluating whether a diagnostic tool is credible enough to use on patients. Investors and research partners are assessing whether the company behind it is worth backing. Both need the evidence, but they weigh it differently, and neither should have to wade through the other's material to find theirs.
I did the whole thing: sketches, lo-fi and hi-fi wireframes, prototypes, the Figma design system, the responsive front-end build, a staging environment for review, and deployment.
The brand identity is mine too. The logo I designed is the mark the company now uses — on the site, in its product interfaces and on its conference stand.
Working as the only designer meant every decision had to survive contact with the next stage myself. A wireframe I was vague about became a component I had to build. That closed the usual gap between design intent and what actually ships, and it is the part of this project I would point at first.
One site, two audiences who want different proof
Clinicians visiting the site are deciding whether a diagnostic tool is credible enough to use with patients. Investors and research partners are deciding whether the company behind it is worth backing. Both groups need evidence, but they weigh completely different things — clinical validation versus commercial traction — and neither should have to dig through content aimed at the other to find theirs. The site had to serve both without becoming generic enough to convince neither.
Sketches to deployment
One person, the whole chain. Each stage had to be finished enough that the next one could be built on it without going back.
- Page-level layout options on paper
- Section order and what each one has to prove
- Cheap enough to throw away
- Block layout, heading hierarchy, content order
- Information architecture across the full site
- Mobile-first breakpoint planning
- Figma design system and component library
- Type scale, colour and spacing tokens
- Every template drawn to production fidelity
- Clickable prototypes for desktop and mobile
- Navigation, dropdowns and form states wired up
- Used to walk stakeholders through the site before build
- Rounds of review against the prototype
- Content hierarchy and call-to-action placement reworked
- Changes made in the system, not screen by screen
- Reviews with the founding and commercial teams
- Scientific and regulatory copy verified with the people who own it
- Decisions recorded so they stayed decided
- Staging environment set up for review before release
- Changes checked in place rather than described in a meeting
- A release path that did not touch the live site
- Responsive front-end build of every template
- Interaction and state work: menus, filters, forms
- Accessibility, cross-browser checks and launch
What the site had to hold
A medtech company site is not a brochure. It carries regulated product information, a research evidence base, press coverage and a publications archive, and all of it keeps growing after launch. The structure had to make room for that, and it had to let a clinician and an investor each reach their own evidence without reading the other's.
| Section | What it carries | Design consideration |
|---|---|---|
| Home | Positioning, the product portfolio, clinical validation, awards, conference schedule and contact | Long page, many audiences. Ordered so each block resolves on its own and the page can be entered from any anchor |
| About | Mission, values, research and development, management team, partner institutions | Credibility page. Named people and named institutions do the work, so the layout stays out of the way |
| Solutions | One page per product — features, clinical evaluation, reimbursement, technical and infrastructure requirements, FAQs | The densest templates on the site. Tabbed and accordion patterns so a clinician can reach one table without scrolling past four others |
| Publications | A searchable database of peer-reviewed papers with abstracts, links and BibTeX | Four filter dimensions — year, type, tag, author — plus free text and pagination. The hardest interface problem on the site |
| News articles | Press coverage and announcements, with detail pages | Archive, category and tag filtering, pagination, and a sidebar of recent items that stays useful as the archive grows |
| Contact | General and product-specific enquiry routes, postal address, assistance hours | Separate addresses per enquiry type so messages reach the right team, with one form rather than a choice to make first |
| Global | Navigation, demo request, compliance and certification marks, legal | The certification row is load-bearing in this sector — designed as content, not as a footer afterthought |
The parts that keep growing
Three areas of the site are not fixed pages but systems the company adds to without a designer involved. Those needed to be designed as patterns — a record type, a list state, an empty state, a filter set — rather than as a layout that happens to fit today's content.
The publications database holds peer-reviewed research with abstracts, external links and citation exports, filterable by year, type, tag and author at the same time. The news system carries press coverage with archives, categories and tags. The partner grid and the awards and conference blocks on the home page work the same way. Each one had to look considered at three entries and still work at fifty.
Two audiences, different paths through the same site
The information architecture above exists so these three journeys don’t collide. A clinician and an investor can land on the same home page and never need each other’s evidence to get where they’re going.
Structure first
Every page began as a lo-fi wireframe: block-level layout, heading hierarchy and the order of the argument, with no colour, imagery or type decisions to hide behind. That is where the dual-path structure was settled — which audience each section speaks to, what it has to prove, and where the two tracks separate. Visual design only started once the skeleton held up on its own.
What has to hold up past the happy path
Most of these come from the same place: three of the site’s sections are systems the company keeps adding to without a designer involved, so the edge of the content range had to be designed for, not just the middle of it.
A clickable prototype, before it was a build
All six templates existed as a wired-up Figma prototype before any front-end code did — desktop and mobile both, navigation and dropdowns behaving the way they would live, form states included. That prototype is what the founding and commercial teams actually reviewed and signed off against, not a set of static mockups.
There’s no git history behind the live WordPress build, so the Figma file is this project’s real source of truth — the same way the click-through under Final Design below is the closest thing to a working copy of the site as it actually shipped, rather than a redraw of it.
Six templates, end to end
Home, about, articles, article detail, publications and contact. Click through them below — each page is the full length of the real thing, archived here so this walkthrough keeps working whatever happens to the live site. The two product names are redacted — that work is under NDA — and everything else is the design as shipped.
Scroll inside the frame · switch pages above
Click through the pages as they shipped. Client and product names are replaced throughout.
One token set for content that keeps growing
The six templates share one Figma design system: colour, type, spacing and a component set built around the same idea as the site’s information architecture — content that grows on its own rather than through a redesign. The publications database, the news archive, and the partner and award blocks are all built from these components, which is why they’ve kept working without a designer touching them since launch.
What I shipped
Six page templates — home, about, articles, article detail, publications and contact — and the systems behind them: a publications database filterable on four dimensions at once, a news archive, and the partner and award blocks on the home page. The mark on the site is the logo I designed, and it is still the company's. I built and deployed the front end myself.
What happened next
The site went live and became the company's main digital presence. The parts built as systems rather than pages — the publications database, the news archive, the partner and award blocks — have been added to since without a designer being involved, which was the point of building them that way. The Figma design system and component library remain the reference for the company's digital work.
What I learned
Designing something I then had to build changed how I design. Details I would once have left to the developer — an empty state, a filter with four dimensions active, a card at fifty entries instead of three — became my problem at the next stage, so I started resolving them at the wireframe. I carry that into work I hand off now: the specification is finished when there is nothing left for someone to guess.
The other lesson was about review. Once there was a staging environment, stakeholder conversations stopped being about interpretations of a mockup and started being about the thing itself. Decisions got made faster and stayed made.
Brand identity design, information architecture for content that keeps growing, interface design from sketches through lo-fi and hi-fi to prototypes, a Figma design system, stakeholder management, a staging and release workflow, and the responsive front-end build and deployment behind it — a project taken end to end by one person.