I'm working on making
your experience better for
mobile. Check back soon
or visit on desktop.
Spruce Cleaning | UI/UX | Web
Web design & branding for a cleaning company
My UI/UX work for a recent web build for Spruce Cleaning LTD. Also includes branding.
Brief:
Spruce Cleaning approached me to refine their digital presence and create a cohesive user experience that would increase service enquiries through their website. The goal was to make the booking process effortless, build trust with potential customers, and highlight the company’s professionalism and reliability across all digital touchpoints.
Work Carried Out:
I conducted a full UX review of the existing website, identifying opportunities to streamline navigation, strengthen calls to action, and improve clarity of service information. Based on this analysis, I developed detailed UX documentation including user personas, user flows, site architecture, and low-fidelity wireframes for both desktop and mobile experiences.
To align the brand visually, I also created a clean UI direction featuring a fresh colour palette, typography system and component styling consistent with Spruce Cleaning’s trustworthy and approachable identity.
Outcome:
The final UX documentation and wireframes deliver a clear roadmap for future design and development, ensuring the website supports user needs and business goals—helping Spruce Cleaning convert more visitors into customers while maintaining a polished, professional image.
Target audience:
My personas represent the real people Spruce Cleaning serves — homeowners, landlords, and estate agents. They help us understand what drives our customers, what challenges they face, and how we can make their experience effortless.
By designing with these personas in mind, every decision — from layout to messaging — stays focused on what matters most: building trust, saving time, and turning visitors into loyal clients.
Personas
The homeowner
🏡
Sarah Thompson
38 / Female
Sarah is a busy working professional who juggles work and family life. She values a clean, organised home but has limited time to manage deep or post-renovation cleaning herself. She prefers trusted, insured professionals who can deliver spotless results quickly.
Struggles to find time for deep cleaning
Feels anxious about unreliable or unvetted cleaners
Needs reassurance that work will be done to high standards
Wants peace of mind and time to focus on family
Online booking through Spruce Cleaning
Prefers weekday mornings or Fridays
Pain Points
Why?
How?
When?
User Traits
Forgetful
Calm
Generous
Tech comfortable
Trust oriented
Time conscious
The landlord
🏚️
Mark Evans
52 / Male
Mark manages several rental properties and needs quick, professional cleaning services between tenants. He values responsiveness, clear pricing, and reliability above all else.
Cleaning delays causing move-in issues
Poor communication from service providers
Inconsistent quality across jobs
To ensure smooth tenant turnover
Quick quote and scheduling online or by phone
Short-notice bookings, often 24–48 hours before handover
Pain Points
Why?
How?
When?
User Traits
Pragmatic
Decisive
Results-focused
Trust-focused
Efficiency-driven
Price-sensitive
The estate agent
🏬
Olivia Clarke
29 / Female
Olivia coordinates multiple end-of-tenancy cleans weekly. She values fast communication, easy scheduling, and professional results that reflect well on her agency.
Time wasted chasing confirmations
Last-minute cancellations
Need for proof of quality and reliability
To maintain professional standards and client satisfaction
Fast online form or phone booking
Weekdays, often same-day turnaround
Pain Points
Why?
How?
When?
User Traits
Professional
Efficient
Detail-oriented
Responsiveness
Organisation
Stress tolerance
UX implications:
Show trust signals (reviews,
insurance badges, photos of
real results). Place “Get a
Quote” above the fold.
UX implications:
Show reliability, professionalism, and quick communication (e.g., “We respond within 24h”). Possibly highlight bulk or repeat cleaning deals.
UX implications:
Provide credibility through portfolio, testimonials, and possibly a “Partner with Us” note or callout.
Target audience:
My UX strategy focuses on creating a seamless, trustworthy experience that helps users quickly find the right cleaning service and take action. By combining clear design, simple navigation, and strong trust signals, we guide visitors from curiosity to conversion — whether that’s requesting a quote or making a call.
Tone & messaging
Voice
Confident, reassuring and professional.
Tone
Helpful, polished and approachable
Example CTA
“Get a quote in minutes”
“Call now - We’ll handle the rest”
“Book a Trusted Cleaner today”
Principle
Implementation
Core Experience Principles
Clarity
Keep the homepage copy concise and benefit-focused (“Professional cleaning you can trust”).
Speed of action
Show the booking form early (above the fold), and repeat it mid-page + footer.
Trust
Prominently display insurance, satisfaction guarantees, and customer testimonials.
Consitency
Keep CTA colors consistent (Spruce Green), button shapes, and form layouts uniform.
Accessibility
Use legible fonts, strong contrast, large tap targets, and ARIA-friendly forms.
Principle
Implementation
Site Map:
The site map outlines the structure of the Spruce Cleaning website, showing how pages connect and flow. It ensures users can easily find key information — from services to booking forms — while helping the team maintain a clear, logical navigation system.
Main page ▼
├- Hero Section ▼
- Value
- CTA
- Quote form
├- Quote Form ▼
- Brand
- Contact Number
- Contact button
├- Services Overview ▼
│ ├- End of Tenancy Cleaning
│ ├- Deep Cleaning
│ ├- After Builders Cleaning
│ - Domestic Cleaning
├- Interior services ▼
│ ├- Description
│ ├- Painting
│ ├- Mould removal
│ - Tile & grout cleaning
├- Why Choose Us / Process
├- FAQ
- Testimonials
├- Offer cta
- Footer: Phone, Email, Social Links
- Footer: Legal, privacy policy & Terms and conditions
- Privacy Policy
- Footer Phone, Email, Social Links
User flows:
The user flows illustrate the key pathways visitors take when interacting with the Spruce Cleaning website — from landing on the homepage to exploring services, requesting a quote, or making a call. They help visualise how users move through each stage of their journey, highlighting opportunities to simplify steps and reduce friction.
By mapping these flows, we ensure that every interaction feels purposeful and efficient, guiding users smoothly toward conversion while reinforcing trust and professionalism at every touchpoint.
Primary Flow — “Get a Quote”
Landing → Reads Hero Message → Clicks “Get a Quote” → Fills Form → Confirmation → Follow-up Call/Email → Booking Confirmed
Goals: Convert high-intent visitors within 2–3 clicks.
Optimisations:
Keep form above fold & short (6 fields max)
Display reassurance text: “We’ll reply within 24 hours.”
Confirmation state after form submission
Secondary Flow — “Call Directly”
Landing → Sees Phone Number in Header/Hero → Clicks to Call → Speaks to Sales Team → Booking Confirmed
Goals: Encourage instant engagement from mobile users.
Optimisations:
Sticky phone icon on mobile
Use call-tracking number for analytics
Secondary Flow — “Service Exploration”
Home → Scrolls to Services → Clicks “Deep Cleaning” → Reads Details → Clicks “Get a Quote”
Goals: Educate before conversion (for users not ready to book).
Optimisations:
Each service card links to a dedicated detail section
Add “Starting from £___” for clarity if appropriate
Wireframes
The wireframes visualise the layout and flow of each page before design and development begin. They focus on structure, content placement, and user interaction, ensuring the experience feels intuitive and conversion-driven from the very start.
HEADER:
Logo | Nav | Call 0800 774 7836 | CTA
HERO:
Headline + Subheadline + Primary CTA
QUICK QUOTE FORM:
Name, Email, Phone, Service, Property Size, Postcode, Submit
SERVICES GRID:
End of Tenancy | Deep Clean | After Builders | Domestic
INTERIOR SERVICES:
Painting / Mould removal / Tile & grout cleaning
TESTIMONIALS:
Quotes + Names/Locations
CTA:
Large call out / Offer
FAQ:
Accordion (5–7 Qs)
FOOTER:
Contact, Links, Social, Privacy
Design Direction
The design direction defines the visual and emotional tone of the Spruce Cleaning brand online. It focuses on creating a clean, modern, and trustworthy aesthetic that reflects the company’s professionalism and attention to detail.
By combining a fresh colour palette, open layout, and approachable typography, the design builds confidence while keeping the experience simple and inviting. Every visual choice — from button styles to imagery — reinforces Spruce Cleaning’s promise of quality, reliability, and care.
The initial presentation is clean, relatable, and immediately engaging. A prominent call-to-action encourages users to see Spruce Cleaning as more than just a cleaning service, supported by a brief introduction highlighting reliability, service quality, and full legal compliance.
A recent 5-star review reinforces trust and credibility, while a visible booking form invites users to request a quote with ease. All elements are positioned within the header, complemented by tidy, cohesive visuals that reflect the brand’s professionalism and attention to detail.
The services section showcases clear, high-quality imagery for each offering. When users hover over a service, additional details appear, creating an interactive and engaging experience. Subtle hover animations enhance the sense of professionalism while maintaining a smooth, modern feel.
The overall layout remains tidy and visually balanced, perfectly aligning with Spruce Cleaning’s clean and polished brand aesthetic.
The Frequently Asked Questions accordion gives users quick access to essential information about Spruce Cleaning’s services. It addresses common queries efficiently, helping users find answers faster and reducing the need for additional enquiries.
The overall layout remains tidy and visually balanced, perfectly aligning with Spruce Cleaning’s clean and polished brand aesthetic.
The testimonials section showcases authentic feedback from delighted clients, paired with images of real cleaning results. This powerful mix of words and visuals builds trust, highlights customer satisfaction, and reinforces Spruce Cleaning’s reputation as a reliable, 5-star service provider that consistently exceeds expectations.
Call to Action (CTA): This section highlights a special offer and provides users with another clear opportunity to book a service. It reinforces value and encourages conversion by reminding visitors why Spruce Cleaning is the right choice.
Footer: The footer includes all essential contact details, including a direct phone number, along with quick access to legal information such as the Terms of Service and Privacy Policy. It ensures users can easily connect and feel confident in the company’s transparency and professionalism.
Colour palette
The Spruce Cleaning colour palette is built around fresh, natural greens that reflect cleanliness, renewal, and care.
Clean Lime, Clean Bud, and Clean Apple convey energy and freshness, while Clean Mint provides a light, airy background that enhances readability. Clean Apricot adds warmth and friendliness, and Clean Aubergine introduces depth and sophistication for balance.
Together, these tones create a bright, trustworthy, and professional brand identity that feels both eco-conscious and approachable.
Branding
The Spruce logo uses a fresh green colour palette to symbolise cleanliness and care. The Spruce insignia integrated into the letter “e” reinforces the brand’s natural and eco-friendly values, whilst signifying personal power and growth. The logomark is merged together with serif typography to convey trust and professionalism.
Overall, the design communicates a modern, reliable, and environmentally conscious cleaning brand.
Typography
Spruce Cleaning’s typography combines modern simplicity with a touch of character. Poppins is used throughout for body text and interface elements, offering clean lines and excellent readability across devices. For main headers, Melodrama adds personality and elegance, giving the brand a distinctive, sophisticated voice that pairs perfectly with its fresh, professional aesthetic.
Melodrama
Sc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()
Poppins
Sc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()
Recent accolades:
Work:
Notes:
Beyond the frame. Into the Experience.
Hey i'm Chris - someone who's always been drawn to creativity, connection and making things that matter. Whether i'm working on a personal project or collaborating with others, I care deeply about doing things with heart and intention. I specialise in graphics & motion, 3D & Extended Reality (XR), creating immersive and impactful work for entertainment and brand experiences. This space is a reflection of who I am and what I love - a mix of ideas, experiments and things i'm proud to share. I'm forever evolving, always learning and always open to new conversations. If something resonates with you or you're curious about collaborating i'd love to hear from you. I don't share that much commercial work online but you can check out more of my work on Behance, Vimeo and ArtStation.
CPY
LOC
Location: London | hello(at)hillierforshaw.co.uk
▷
©2025 Hillier-Forshaw. All Rights Reserved