Main hero screen
Cleaning Services
Website for a local cleaning company with a service catalog and a complete WhatsApp-based order path.
RoleProduct Designer & Fullstack Developer
TypeBusiness website with an order path
LocationSpain
FocusDesigning a simple and clear order path without complex forms or backend.
StackNext.js, TypeScript, CSS Modules
Duration3 weeks (1 week design, 2 weeks development)
Project summary
- Project type
- Service business website
- Goal
- Present cleaning services clearly and make it easier for users to calculate a request and contact the business.
- Main features
- Service structure
- Pricing logic
- Cart-like request path
- WhatsApp order request
- Responsive layout
- My role
- Frontend implementation, UI structure, interaction logic, and deployment preparation.
- Stack
- React
- TypeScript
- CSS Modules
- Result
- A service website with clearer offer presentation, interactive pricing, and a direct path from service selection to contact.
Problem
The client had no website and no structured way to present services or accept orders. Requests were handled manually through calls and messaging apps, without a clear request path.
Solution
I designed and built a service-based website with a simple order path. Users can browse services, view details in modals, and add them to an order. The system generates a pre-filled WhatsApp message with selected services and total price, removing the need for a backend.
Result
The result is a fast, clear website that helps the client receive structured service requests directly via WhatsApp.
What I did
- Designed the full UI/UX from scratch
- Built fully responsive layouts (mobile, tablet, desktop)
- Implemented cart logic and price calculation
- Developed service detail modals
- Built WhatsApp message generation logic
- Implemented a full order path without backend
- Added multilingual support (EN / ES)
- Implemented dark and light themes
Hero
Main project visual showing the primary landing header and value proposition.
Responsive Design
Fully responsive layout optimized for desktop and mobile use.
Desktop viewport
Mobile viewport
Landing Experience
Clear landing structure designed to communicate value and guide users through the service path.
Service steps and trust-building content
Services Catalog
Structured service grid with clear pricing and promotional emphasis.
Catalog cards grid with promo module
Service Details Modal
Focused modal view presenting a selected service, short explanation, and quick pricing context before adding it to the order.
Selected service modal
Order Summary / Cart
Order review step with selected services, quantity controls, and subtotal visibility before completing the request.
Cart sidebar with selected services and subtotal
FAQ & Content
Supporting content blocks that reduce friction and answer common questions.
FAQ list with supporting visual content section
Contact / Conversion
Quick order form designed to simplify the final conversion step.
Final order and contact form modal
Need a website that makes customer contact easier?
I can prepare a clear website with a simple path to an inquiry, booking request or conversation.