Category:
User Experience / UI / Design System
Client:
Yulaser Laser Beauty
🧠 Overview
Task: Design a clean, elegant website for Yulaser Laser Beauty Clinic that reflects its premium brand identity while improving usability, service discovery, and appointment booking.
Role: Senior UX/UI Designer leading research, interaction design, and high-fidelity UI to create a responsive and trust-driven digital experience for both new and returning clients.
Key Problems:
Existing medical aesthetic websites felt outdated, cluttered, or overly clinical.
Users struggled to understand treatment offerings, pricing, and how to book.
Aesthetic branding needed to align with Yulaser’s professionalism and luxury positioning.
🔧 Process
1. Research & Discovery
User Research: Focused on understanding patient behaviors—how they seek aesthetic treatments, what makes them trust a clinic, and how visually led medical decisions are influenced.
Competitive & Inspiration Audit: Examined international and Israeli aesthetic clinic sites, noting effective use of soft color palettes, trustworthy visuals, and intuitive appointment flows.
2. Define & Plan
Personas & Scenarios: Defined personas like a first-time client seeking laser hair removal and a repeat patient booking follow-up treatments.
UX Goals: Clear goals included building trust through content, simplifying appointment booking, showcasing treatment results, and delivering a calm, premium experience.
3. Ideation & Sketching
Site Structure Sketches: Mapped key sections—home, treatments catalog, before/after gallery, doctor profiles, and contact form.
Wireframe Concepts: Explored layouts that highlight hero imagery, service tiles, and trust elements (credentials, reviews) at the top to reduce bounce rates.
4. Wireframing & Mid‑Fi Designs
Primary Layout: Introduced a prominent hero banner with call-to-actions (e.g., “Book Consultation”), followed by service cards for each treatment.
Trust Elements Integration: Strategically placed certifications, patient testimonials, and staff credentials to reassure visitors early in the flow .
5. High‑Fidelity UI Design
Visual Identity: Implemented a soothing palette with pastel tones and elegant typography—reflecting a blend of clinical professionalism and spa-like comfort.
Imagery & Iconography: Opted for clean-treatment photos and minimalist icons to reinforce professionalism and calm.
6. Mobile‑First & Responsive Approach
Hero & CTAs: Crafted a scaled‑down hero image with single-click “Book Now” button for mobile users.
Service Cards: Redesigned into stacked, scroll-friendly elements with thumb-touch targets.
Sticky Book Button: Persistently accessible CTA encouraged conversions throughout the user journey.
7. Prototype & Usability Testing
Interactive Prototype: Built in Figma/Sketch with flows for browsing treatments, viewing before/after cases, and scheduling appointments.
User Test Findings: Users requested clearer pricing/FAQ info and easier access to staff details—leading to dedicated expandable sections and patient story highlights.
8. Accessibility & Optimization
WCAG Compliance: Ensured sufficient color contrast between text and backgrounds, legible font sizes, and clear labels.
Performance: Optimized images with WebP format and lazy loading to maintain fast page loads, especially for mobile.
9. Final Screens & Features
Home Page: Clean hero area, clearly visible services & quick links to consultations.
Service Details Pages: Large imagery, structured treatment descriptions, FAQs, and “Book Now” CTAs.
Team & Clinic Info Page: Professional staff bios with friendly photos and credentials.
Before/After Gallery: Easily searchable by treatment type, providing transparency and trust.
Contact & Booking Page: Simple, multi-step form capturing contact info, desired treatment, and preferred scheduling.
10. Launch & Iteration
Design Handoff: Comprehensive handoff documentation including UI kit, responsive specs, and interaction notes.
Post-Launch Enhancement: Based on user analytics & feedback, refined booking UI and added elements like live chat, FAQ expansions, and updated portfolio imagery.
🎯 Summary
The Yulaser website project reflects a structured, user-centered UX design journey—from in-depth research and purposeful wireframes to polished high-fidelity designs and responsive testing. It prioritizes trust-building visuals, simplified booking flows, and accessible, calming UI—delivering an experience that aligns with both medical professionalism and aesthetic warmth.
