Yonpatri Center brings several needs together under one brand: presenting aesthetic services, organising plastic-surgery information and giving its professional training offer a dedicated space. We developed a Spanish and English website with Astro that connects those areas with service information and booking requests.
The project combines institutional content, service pages, account features and a journey that continues through WhatsApp. The design aims to help people identify their area of interest and prepare their conversation with the team.
Three areas of activity with shared navigation
Home, About Us, Esthetic, Plastic Surgery, Academy and Bookings form the main structure. Each area has a distinct purpose: introducing the centre, presenting services or describing training programmes. Booking links connect the information to a specific enquiry.
The academy is presented as professional training in aesthetics. The project focuses on presenting its programmes and helping people contact the institution.
Content in Spanish and English
The content versions use separate routes. Navigation, service pages, the academy and the booking request have text in both languages. A language selector supports switching within the site’s structure.
This organisation helps present the same brand to audiences with different language preferences. Maintaining parity means reviewing links, form messages and page content as well as translating headings. The structure helps adapt information and support contact in the chosen language.
From choosing a time to continuing on WhatsApp
The form collects a name, service, preferred date and time, together with privacy acceptance. The interface checks booking records to display occupied times and checks the chosen time again before attempting to save it.
The implementation records the request in Cloud Firestore with a pending status and prepares a WhatsApp message containing the appointment details and, when saved, its reference code. If saving fails, the journey still supports continuing the coordination through WhatsApp.
Submitting a request is not the same as having a confirmed appointment. The team must confirm availability and coordinate the deposit. Payment and its verification form part of that coordination outside the form.
Accounts, history and request management
The interface includes email and Google sign-in through Firebase Authentication. An identified account can view bookings associated with its user. The administrative view supports reading requests and updating their status to assist the team’s handling.
The history requires an identified account and records linked to that user. Request management is a team process that complements communication through WhatsApp.
Visual identity applied to the journey
The design uses teal, gold and cream, with Poppins typography and a shared hierarchy for headings, cards and buttons. The aesthetic-services and academy areas share brand elements while retaining details that help distinguish their content.
The interface organises photography, service sections and calls to action in an adaptable composition. The diagrams accompanying this case explain information architecture, languages, requests and management. They illustrate workflows without patient data or account screenshots.
Implementation and the development outcome
The technical base combines Astro, JavaScript, custom CSS, Firebase Authentication and Cloud Firestore. Firebase features load through its web modules. The website brings together information and request capture; final service coordination continues with the team.
The development outcome is a digital structure that brings together services, training and contact in two languages. The public check on 23 October 2026 found Home, Academy and Bookings available in both versions. This case covers the implemented structure and journey. Commercial metrics require their own tracking.
Explore the Yonpatri Center website and its English version. For an implementation with a different booking journey, see the El Mago del Color website. If your organisation needs to connect content and enquiries, explore our web design and development service or talk to us about your project’s scope.