Fraunarts Website - Case Study

Project Overview:

Designed and developed a modern website for a gynecology clinic in Hamburg, Germany. The goal was to create a trustworthy online presence that makes it easy for patients to learn about the clinic, explore services, and book appointments online.

The Challenge:

The clinic needed a website that reflected professionalism and compassion while making appointment booking simple. The previous online presence lacked a modern design, clear service information, and an intuitive user experience.

The biggest challenge was balancing a premium medical aesthetic with accessibility and trust, ensuring visitors felt comfortable while navigating healthcare information.

Project Objectives:

The following objectives were established for the project:

• To establish a professional and trustworthy online presence for the gynecology clinic.
• To simplify the appointment booking process through clear calls-to-action and intuitive navigation.
• To present the clinic's medical services in a structured and easy-to-understand manner.
• To create a calm and welcoming digital experience that reflects the clinic's values.
• To ensure a fully responsive website that provides a seamless experience across desktop, tablet, and mobile devices.
• To strengthen patient confidence through the use of testimonials, clinic imagery, and a clean visual design.
• To optimize the website for performance, accessibility, and search engine visibility.

Brand Implementation:

The visual system was built around the practice’s existing ochre/copper medical aesthetic from the Wix site, then elevated for a custom static site.

Color:

• Primary atmosphere: warm ochre texture (header-bg, hero, philosophy, and key section bands)
• Accent: copper (#8a5a3b / #6e4530) for links, stars, and secondary emphasis
• Surfaces: soft cream (#f8f7f4) with white cards for forms and content
• CTAs: white on dark/ochre backgrounds; dark grey (#333) on light backgrounds for clearer hierarchy

Typography:

• Poppins for both headings and body (header, nav, UI, and long-form text)
• Clean sans-serif tone for clarity and modern medical trust, instead of a mixed serif/sans system.

Logo & identity:

Custom SVG logo mark (abstract feminine silhouette curves) + “Frauenärztin / Dipl. Med. Tatjana Swirski”.

Consistent shared header/footer across all pages.

Photography:

Real practice interiors, Curiohaus exterior, and service imagery rather than generic stock.

Motion & UI language:

• Soft reveal-on-scroll
• Carousels for praxis images and testimonials
• Accordion for services overview
• Rounded pills for CTAs, restrained shadows, no heavy “card dashboard” look

Website Structure:

The website was structured to provide visitors with a clear and intuitive navigation flow. Information was organized into logical sections, allowing patients to quickly understand the clinic's services, learn about the practice, and schedule an appointment with minimal effort.

A single-page layout was adopted to reduce navigation complexity while ensuring that all essential information remained easily accessible.

The information hierarchy was organized as follows:

• Hero Section
• About the Clinic
• Medical Services
• Practice Gallery
• Patient Testimonials
• Contact Information
• Appointment Booking
• Footer

Booking Experience:

A seamless booking experience was implemented to minimise friction throughout the customer journey.

The EasyHotel booking solution was integrated into the website, allowing visitors to initiate reservations without leaving the platform. Dedicated booking actions were provided across hotel pages, while persistent.

booking access was maintained through global navigation and mobile interactions. The booking workflow was designed to remain simple, consistent, and aligned with the overall boutique experience.

Development Approach:

The website was developed using an AI-assisted development workflow with Claude. The development process was focused on translating the approved visual direction and information architecture into a functional, responsive, and user-friendly website.

The website structure was first established to ensure that important information could be accessed through a clear and logical flow. The interface was then developed section by section, with attention given to responsive behavior, typography, spacing, visual consistency, and overall usability.

AI-assisted development was used to accelerate the implementation process, while the generated output was reviewed, refined, and customized to align with the intended design and user experience. Content, layouts, interactions, and responsive behavior were continuously adjusted throughout the process.

The final implementation was optimized to provide a consistent experience across desktop, tablet, and mobile devices. Key conversion elements, including appointment booking and contact options, were integrated into the user journey to ensure that patients could easily move from exploring the clinic to taking action.

Development Focus:

• AI-assisted development using Claude
• Responsive and mobile-friendly implementation
• Structured and maintainable website architecture
• Clear patient-focused navigation
• Appointment booking integration
• Contact and inquiry functionality
• Cross-device layout optimization
• Performance and usability refinement

Performance & Accessibility:

The website was developed with a strong focus on performance, accessibility, and usability to ensure a smooth experience for all visitors. Responsive layouts were implemented to provide consistent functionality across desktop, tablet, and mobile devices.

Images and visual assets were optimized to reduce unnecessary loading times, while content was structured with clear typography, sufficient spacing, and strong visual hierarchy to improve readability. Interactive elements and calls-to-action were designed to remain clear and easy to identify throughout the user journey.

Accessibility considerations were incorporated through readable font sizes, appropriate contrast, descriptive content structure, and intuitive navigation. The overall experience was designed to minimize friction and ensure that important information, contact options, and appointment booking could be accessed easily by users across different devices.

Outcome:

A modern and professional digital presence was successfully established for the gynecology clinic, with a focus on building patient trust and simplifying access to essential information.

The final website provided a clear and intuitive user experience through well-structured content, streamlined navigation, and prominent appointment booking options. The clinic's services, practice environment, and patient testimonials were presented in a cohesive and welcoming interface designed to support informed decision-making.

The website was also optimized for responsive use across desktop, tablet, and mobile devices, ensuring that patients could access the clinic's information and booking options conveniently from any device.

Overall, the project resulted in a modern, trustworthy, and patient-focused website that strengthened the clinic's online presence and created a smoother path from discovering the practice to booking an appointment.