Overview
Uroclinic Craiova is a private urology clinic with dedicated obstetrics and gynaecology services, seeing patients from Dolj county and the wider Oltenia region. The clinic offers consultations, imaging, minimally invasive surgery, kidney stone treatment, prostate procedures, incontinence treatment, and gynaecological care. The previous website provided general information, but its services and fees were difficult to navigate and to keep up to date. We rebuilt it from scratch around a structured fee system — every service has its own entry with an indicative price, all browsable through accordion components that let patients explore before they pick up the phone.
The Challenge
On this project, the absence of clear fee information was one of the main information problems to solve. Patients didn't know what things cost. They called, they asked, they got vague answers, they hung up frustrated.
Uroclinic had the numbers — they just didn't have a way to present them. A flat price list would have been hard to read: dozens of services across several categories, with a wide spread of prices. A list typed straight into a page would have been awkward to update and to check as the services changed. And an off-the-shelf component would not have matched the clinic's category structure or its editing workflow.
The deeper challenge was making the site feel warm enough to match the clinic's actual reputation. Urology is a sensitive specialty, so the interface had to be clear, discreet and free of drama. A sterile, corporate site would push patients away. A clinical-but-human one helps them through the door.
The Approach
We treated the fee structure as a content type, not a table. Every service is a structured entry with a name, a price range, an optional description, and a category. The categories themselves are accordion containers — consultations, endocrinology, obstetrics and gynaecology, surgical procedures — each opening to reveal the services within. Patients can scan the category they care about, open it, read the fees, and keep moving. The structure can grow without making the page harder to navigate.
The published fees are indicative: the final cost depends on the complexity of the case and is confirmed by the clinic. The site says so plainly, so the information is useful without promising a price that cannot be settled before a medical assessment.
For the rest of the site, we used a warmer visual direction without losing clinical credibility. Teal as the primary colour with an orange accent — closer and less rigid than a cold blue, with contrast and legibility checked. Real doctor portraits with academic titles. Plus animated counters carrying the figures the clinic provided: 15+ years, 30,000+ patients, 34 doctors.
The Solution
- A custom-coded website built on our in-house
tangled-designarchitecture - An accordion-based fee system, with the categories and ranges published at launch:
- 30 consultations priced from 80 to 2,800 RON
- 6 endocrinology services priced from 100 to 450 RON
- 31 obstetrics and gynaecology services priced from 60 to 6,050 RON
- 79 surgical procedures priced from 490 to 15,000 RON
- A clear note that the fees are indicative, with the final cost depending on the complexity of the case
- A blog with filtering that avoids full page reloads, organised at launch into Procedures / Conditions / Tests / Gynaecology
- Three featured doctor profiles, linking through to the full clinical team page
- Animated counters carrying the figures the clinic provided: 15+ years of experience, 30,000+ patients treated, 34 doctors on staff
- 21 patient testimonials with a 5.0 star rating, displayed inline at launch
- JSON-LD structured data for the clinic, the local business and the organisation
- A responsive hero image served as
<picture>with WebP/JPEG sources - Locally hosted Inter typeface (Latin + Latin Extended subsets) for performance
- Google Maps integration on the contact page
- Two phone numbers prominently displayed: appointments and general enquiries
Key Moments
The accordion fee system
The old site treated prices like a footnote. The new one makes them a central part of the services page. A patient lands there and sees four clear accordion categories. They tap the one they care about — say, "Surgical Procedures" — and it expands to show the procedures in it and their indicative fees, without leaving the page.
Warmth without gimmicks
The teal-and-orange palette is a deliberate choice. We picked it to avoid the cold, impersonal look that makes an already uncomfortable topic feel worse, while keeping contrast and legibility: teal as the primary, an orange accent that reads as approachable rather than aggressive, real doctor portraits and generous whitespace.
The reusable in-house architecture
This site shares the same tangled-design architecture as hopenodrugs.eu (an EU-funded NGO) — two very different clients, two very different designs, the same foundation underneath. Reusing tested components and practices cuts repeated work, but every implementation is adapted and verified separately.
The Stack
Custom-coded website (tangled-design in-house architecture)
Locally hosted Inter (WOFF2, subsetted)
Accordion pricing components (vanilla JS)
Dynamic article loading (AJAX)
Schema.org structured data (clinic, local business, organisation)
Responsive <picture> with WebP + JPEG fallback
Speculation Rules API for prefetch
The Result
A modern clinic website that brings services, indicative fees, clinicians and contact details into one coherent structure. Patients find the fees in the category they care about, see the clinicians they would be working with, and have the phone number to hand along the same route. And the clinic's team maintains the fee data themselves through structured fields.
