Clean Planet - Cleaning Services Website
Introduction
CleanPlanet is a modern cleaning service operating in Vienna, Austria, with a second division in Spain. The goal was to ship an original, trustworthy website that stands out among Austrian competitors, prioritizes Commercial Cleaning leads, and makes booking straightforward across languages and devices.
My Role
Product Designer (UX, UI, Research); web implementation in Framer; CMS modeling; integrations.
Team
Solo product designer.
Timeline
June–September 2025
Business Task
Create a distinctive, easy-to-use cleaning services website that is responsive (desktop, tablet, phone), multilingual (EN/DE/ES), and offers a clear, cost-effective booking path for multi-location operations with a B2B focus on Commercial Cleaning.
User Persona
Anna, 31
Busy professional in Vienna
Responsibilities
Books services mostly on desktop at work; sometimes on mobile; needs predictable outcomes.
Traits
Values reliability, clear pricing, and time savings.
Needs
Decide quickly between one-time vs subscription; see what's included; add only the extras she needs.
Design Goals
Memorable & trustworthy
Open with real-work video; surface reviews and before/after evidence.
B2B-first clarity
Persistent Commercial Cleaning CTA; obvious routes for business vs home.
Scalable content
CMS for services/pricing; multilingual copy (EN/DE/ES); location-aware sections.
Responsive & fast
Desktop-first layouts that gracefully scale down; compressed media and lazy-loaded assets.
Key Flows & Features
First-impression system (Hero video + sticky Commercial CTA + branded cursor)
A single, integrated first-impression that combines a full-bleed hero video (with accessible caption and static poster) with an always-visible "Commercial Cleaning" CTA in the header and a subtle branded cursor that automatically reverts to the system cursor on inputs and forms. Together, these elements boost memorability, make the B2B path immediately visible, and reinforce the brand without harming usability.
Services CMS
Problem
Team needs to add/modify services without design/dev cycles.
Solution
Structured services collection (title, description, inclusions, price notes, imagery).
Outcome
Faster updates and scalable content ops.
Before/After slider
Problem
Quality is hard to convey with static shots.
Solution
Interactive slider for real job examples.
Outcome
Higher engagement; tangible proof of outcomes.
Subscription pricing
Problem
Users couldn't compare one-time vs recurring at a glance.
Solution
Pricing cards (Weekly / Bi-weekly / Monthly) with benefits and savings labels.
Outcome
Faster decisions; higher recurring interest.
System & Components
Header with sticky CTA
Hero video block
Service cards (CMS)
Reviews card
Before/After slider
Pricing cards (subscription)
Booking lead form
Language switcher
FAQ accordion
Footer with legal/contacts
Custom cursor
Focus states
Empty/error states
Results & Measurement
Commercial CTA clicks → form submits
Lead-to-booking conversions
Time on page for Pricing
EN/DE/ES split
Events to track:
cta_click_commercial, lead_form_start, lead_form_submit, booking_deeplink_click, lang_switch_en, lang_switch_de, lang_switch_es, before_after_interact, reviews_view, pricing_plan_select.
Qualitative:
1-question post-inquiry — "Was it easy to find what you needed?" (1–5) + optional comment.
What I Did
- Competitive research (AT/ES cleaning sites)
- UX flows & sitemap
- wireframes
- desktop-first UI
- Framer build & responsive behavior
- CMS modeling
- multilingual copy EN/DE/ES
- third-party booking evaluation & integration
- QA & performance passes
Next Steps
A/B hero video vs static image
Geolocate default language
Structured data for reviews/FAQ (SEO)
Deeper Spain localization
CRM integration for lead scoring
Add job gallery with tags