top of page
Frame 16 (2).png

Project overview

Project Title:
Design and build a cleaning company website

Designing and building a responsive website for a cleaning company using Wix studio

Role:
Website designer , copywriter and SEO strategist

Client Brief

The client requires a clean, professional, and high-UX website for their flat-rate cleaning company, to be designed and built. The overall project scope includes full brand development (logo, colors, language), conversion-focused copywriting, and a full local SEO strategy for search visibility. The core objective is to deliver a frictionless, transparent user experience that drives direct bookings by incorporating specialized functionality to address all client needs upfront.

​

Core Website Functionality:

  •  Users must be able to ascertain their precise flat-rate cleaning cost upfront, determined dynamically based on their specific cleaning requirements.

  • Users must have the ability to pick, add, or edit their cleaning needs to ensure they only pay for exactly what is cleaned.

  • The website must integrate full appointment booking capabilities directly, eliminating the need for traditional contact forms.

  • A dedicated feature that allow users to add specific instructions for the arrangement of small items during the service (especially when they are not home).

Scope and Strategy

Based on the client’s initial requirements, I outlined the comprehensive project strategy including defined goals, mandatory functionality, key deliverables, and platform limitations for the new website.

Project goals

To establish a leading digital presence for the client’s flat-rate cleaning service by delivering a high-UX, conversion-focused website that provides instant pricing and direct booking functionality. I have defined the project into the following core strategic pillars, ensuring every deliverable supports the client's business objectives:

​

  • Clean and professional UX: Full responsive build using Wix Studio's design environment, focusing on modern aesthetics and mobile-first experience.

  • Instant cost clarity: Implementation of a custom Quote Calculator to provide instant, non-negotiable flat-rate pricing.

  • Direct bookings: Seamlessly integrating bookings for real-time appointment scheduling and secure payment processing.

  • Visibility: Development of all copywriting and a targeted Local SEO Strategy.

Mandatory Core Functionality & Strategy To Fulfillment

The following functionality, determined by the client's need for flexibility and transparency, will be custom-engineered within the Wix Studio environment:

​

  • Upfront Cost Calculation: A cost or quote calculator will be implemented. This will dynamically process user inputs (e.g., number of rooms) to display the final flat-rate cost instantly.

  • A La Carte Customization: This critical feature will allow users to add, edit, or exclude specific cleaning tasks or areas. This customization ensures users only pay for exactly what was cleaned, reinforcing the transparency of the flat-rate model.

  • Small Item Arrangement Instructions: A dedicated, persistent field will be added during the booking flow, allowing clients to provide specific notes on how they want personal items arranged during the service. This enhances trust and personalization for clients who are away during the clean.

  • Direct Bookings: A booking system will also be implemented to allow users book cleaning appointments in real time on the spot without the need for further interactions.

Scope of Work (The Deliverables)

The scope is comprehensive, covering both the visual identity and the entire digital strategy:

​

  • Brand Development: Design and definition of the company logo, full brand color palette, and strategic brand language/tone.

  • Website Design & Build: Full site design, responsive development, and delivery on the Wix Studio platform.

  • Content Strategy: Conversion-focused copywriting for all pages, aligning content with SEO goals.

  • SEO Strategy: Technical and content-based local SEO setup (keyword research, meta-tagging, mobile optimization).

Development Platform

I selected Wix Studio for this project because its integrated design and build environment, powerful responsive capabilities, and reduced need for custom coding combined with my existing familiarity ensures an efficient and reliable delivery.

However, recognizing that the platform has some advanced limitations, I have strategically addressed them to make this project a success.

​

Mitigation of the platform's limitations:

  1. Custom Quote Calculator: The platform does not natively support designing or building a complex, customized quote calculator without code (Velo is Wix Studio's JavaScript-based development tool).

    • Mitigation: To bypass extensive custom Velo coding, I have integrated a third-party plugin. This allows me to use drag-and-drop fields and write custom formulas, ensuring users receive accurate flat-rate cleaning quotes regardless of the specific services they choose.

  2. Marquee Frames (Visual Animation): The platform's built-in functionality for flowing text (left-to-right or right-to-left) is limited strictly to text elements and cannot be applied to images or frames.

    • Mitigation: I successfully implemented this visual functionality on non-text elements using a short, optimized line of custom code sourced and verified from external tutorials, achieving the desired animated visual effect.

Understanding the users

Personas

I started the project by crafting personas of the website's users (my client's customers). Creating these detailed user profiles was essential to humanize the people I was designing for, ensuring I would keep their needs front and center throughout the process and avoid drifting toward only the client's expectations.

personas

Additional findings

Because I had created user personas, it was easy for me to visualize a user journey for each persona type. This also helped me in identifying additional user needs that was not discussed during the client debrief:

  • Review or Testimonial page: There is a need for a review or testimonial page to build trust and help users commit to booking a service. This also need to display a snippet of them on the homepage and services page so they are easily accessible.

  • Gallery page: There is also a need for a gallery page. This will enhance the user experience and build trust because not only can users see the reviews of other customers, but have a look at previous jobs done. This will also have to be displayed on the homepage as well.

  • AI Assistant chatbox: This unrequested feature will allow users to ask the AI assistant questions and get answers in real time. This will enhance the user experience and reduce friction in getting information

Starting the design

Site Map

To initiate the design phase, I first created a comprehensive sitemap. This visualization clearly identifies all necessary pages and their hierarchy, serving two critical purposes:

  1. To guide the construction of the main user flow.

  2. To strategically determine the optimal placement of all navigation elements including buttons, links, and menu items.

AFTER HOURS SITEMAP (1) 1.png

Site Map

Wireframes

To establish a good foundation and maintain an holistic view of the whole design without investing excessive time or resources, I utilized Figma. I first created wireframes of the custom pages and individual sections, but not all pages.

​

This strategic decision to limit the scope of the wireframes conserved effort and time. It was based on two primary factors:

​

  1. Platform Widgets: The Services widget, individual service pages, and the Booking/Checkout processes cannot be designed from scratch within Wix Studio, but they are highly customized via the platform's configuration settings.

  2. Third-Party App Integration: The Custom Quote Calculator and the Gallery page were designated for immediate integration with specialized external plugins/apps to resolve known platform limitations without custom Velo code. Custom wireframing these app interfaces would have been unnecessary.

​

I then connected these finalized screens to create a low-fidelity prototype to test and refine the user flow and layout before moving to the final visual design.

Afterhours wireframe homepage with rationale.png

Wireframe: Homepage

Afterhours wireframe services with rationale (1).png

Wireframe: Services page

Building the Website & Refining the Responsive Design

After successful usability testing of the low-fidelity wireframes, I proceeded to build the pages in Wix Studio. I populated the sections with final imagery and integrated text content, strategically placing keywords to enhance the Local SEO strategy.

Core Functionality Implementation

I utilized Wix Studio's native capabilities by adding the Wix Bookings App (which provides the Booking Calendar, Services Widget, and integrated Checkout process). I then customized these native widgets and integrated the two crucial third-party plugins: the Custom Quote Calculator (on its own dedicated page) and the Gallery plugin. I also strategically placed a condensed gallery section as the final element on the homepage to offer immediate visual proof of service quality.

Overcoming Mobile-First Constraints

While I approach web projects with a mobile-first mindset, Wix Studio mandates designing the desktop version first, which is then automatically cascaded down to tablet and mobile screens. These automatic renders often require manual refinement due to suboptimal image sizing, typography, and margins, and they often fail to account for the unique content real estate and functional requirements of smaller screens.

Therefore, I undertook a detailed responsive refinement process:

  1. Tweak & Hide: I manually adjusted image sizes, text scales, and element margins for both tablet and mobile breakpoints. I edited some elements and hid others entirely where they were redundant.

  2. Redesign Sections: I designed new, mobile-exclusive sections that replaced the hidden desktop elements, ensuring the smaller screen retained crucial functionality while adhering to mobile UX patterns.

The Friction-Free Conversion Solution

After full site testing, I observed a potential edge-case friction point: users could only access the primary conversion CTAs (Quote Calculator and Services) from the Hero section or the mid-page Popular Services section. This forced users to scroll to the top or bottom of the page to convert.

To ensure the most important calls-to-action were always accessible, I implemented an adaptive sticky navigation strategy:

  • Desktop/Tablet: The main header containing the CTAs was made to appear only when the user scrolls upward (looking for navigation), preventing content disruption during downward scrolling.

  • Mobile: Due to the limited screen real estate, I added both primary CTAs to a frozen bar at the bottom of the screen. This ensures the link to the quote calculator is instantly accessible without interfering with the hamburger menu or blocking important page content.

Refined after hours homepage.png

Mockup: Homepage

Refined after hours services (1).png

Mockup: Services page

Refined after hours about us.png

Mockup: About us page

You can view the almost completed full website

bottom of page