Redesign brief

Rascajah website redesign

Analysis of the current site, the new architecture, design rationale and the style guide that keeps every page consistent.

1 Audit 2 Layout & flow 3 Colour & type 4 Mockups 5 Content 6 Rationale 7 Style guide

1 · What's missing or outdated

Audit of rascajah.co.za

The current site is a single-page Mobirise template. Strong photography, but little structure to turn visitors into quote requests.

Area	Today	Impact	Fix
Structure	One long page; nav is Home / Designs / About / Contact anchors	Hard to find Cut & Edge, no way to link to a service	Five focused pages with clear names
Hero	Text-led intro; no strong visual or call to action	Best work (LED TV walls, kitchens) is buried	Reel-style hero with the strongest projects and two CTAs
Gallery	Stacked carousels of WhatsApp photos; "Watch Our Gallery" is the only label	No categories, no zoom, slow on mobile	Filterable masonry grid with lightbox
Lead capture	Name / email / phone / message form that posts by email; error text visible in code	Customers in SA prefer WhatsApp; form is a dead end	Sticky WhatsApp + call, pre-filled WhatsApp form, estimator
Services	12-item all-caps list with typos ("WADROBES", "DELIEVERV")	Reads unprofessional, no visuals	Illustrated service sections, proofread copy
Cut & Edge	Two list lines	A second revenue stream with no page	Dedicated trade page with process and WhatsApp cutting-list CTA
Trust	No process, no address visibility, no social proof	Visitors can't judge scale or reliability	"How we work", workshop photos, address, hours, TikTok
Social	Social links in footer only	TikTok videos are strong proof, unused	TikTok section with 6 latest videos
Tech/SEO	Template build, generic title, no structured data, no map	Weak local search presence	Semantic HTML, LocalBusiness schema, map, unique page titles
Accessibility	No visible focus states, small tap targets, alt text "Image Description"	Hard to use on phones	44px+ targets, focus rings, real alt text, reduced-motion support

2 · New layout & user flow

Five pages, one clear path to a quote

Home

Hero reel → trust strip → services → filterable portfolio → How we work → Project Lab teaser → TikTok → Why us → CTA.

Designs & Services

Five alternating service sections, each with its own CTA, then the full gallery.

Cut & Edge

Trade hero → in-house machinery → 4-step process → services table → workshop → WhatsApp cutting list.

Estimator Lab

Four-step configurator with live drawing, board count, price range and Send-to-WhatsApp.

Contact

Call, WhatsApp, email, address, hours, quote form and map.

Style guide

This page: the single source of truth for design.

Primary journeys

Visitor	Path	Goal
Homeowner on phone	Home (reel) → gallery filter → sticky WhatsApp	Message in under 30 seconds
Budget-conscious planner	Home → Estimator → Send to WhatsApp	Arrive with a spec and range
Contractor / DIY	Cut & Edge → WhatsApp cutting list	Get a cutting quote
Needs directions	Contact → map / call	Visit the workshop

3 · Colour palette & typography

Charcoal, oak and the glow of LED light

Their projects glow amber against charcoal and oak, so the site borrows exactly that. The logo's navy and crimson are kept as brand accents, not main colours.

Charcoal#16181B
Headers, dark sections, text

Warm white#FAF8F4
Page background

Linen#F1ECE3
Alt sections

Natural oak#C59A62
Accents, icons, numbers

LED amber#F3B34C
Primary CTA on dark

Brand navy#1F3C88
CTA band, from logo

Brand crimson#A3141F
Micro-accent only

Slate#6B6F76
Secondary text

Display · Fraunces 600

Crafting precision, elevating spaces.

Warm, crafted serif signals premium joinery.

Body & UI · Manrope 400–800

Custom kitchens, wardrobes and TV units made in our Orlando West workshop and installed by our own artisans.

Clean geometric sans for legibility on small screens.

4 · Responsive mockups

Desktop and mobile, live from the build

Desktop · 1400px

Mobile · 375px

Estimator · mobile

Open the full homepage

Responsive behaviour

	Mobile (<940px)	Desktop
Navigation	Burger menu, full-width links	Sticky bar with CTA
Contact	Sticky Call + WhatsApp bar	Floating WhatsApp button
Hero	Stacked, reel below copy	Two columns
Gallery	1–2 column masonry	3 columns
Estimator	Form then preview	Form left, sticky preview and quote right

5 · Section-wise content

Copy blocks by page

Section	Purpose	Content
Hero	Hook + CTA	"Crafting precision, elevating spaces." + 3 proof stats + reel of 5 projects
Trust strip	Remove doubt fast	Free quotes · Design to installation · Soft-close & LED · Granite & quartz · Aluminium & glass · Cut & edge
Services	Show range	6 cards: kitchens, wardrobes, TV spaces, aluminium & glass, cut & edge, offices/bars
Portfolio	Proof	12 photos, filter by Kitchen / Bedroom / Living / Commercial
How we work	Reduce uncertainty	Brief → Design & quote → Made in-house → Installed
Project Lab	Self-qualify leads	Estimator teaser with 3 benefits
TikTok	Social proof	12 newest videos from @rascajahinterior, swipeable
Why us / vision / mission	Differentiate	In-house machinery, one team, durable materials, plus vision and mission
Footer	Convert	Phone, WhatsApp, email, address, hours (Mon–Fri 08–17, Sat 08–13, Sun closed), socials

6 · Design rationale

Why each change was made

Dark, warm palette

Your best photos are lit by LEDs; dark sections make them glow, and oak keeps it warm and natural.

Reel hero

9:16 matches the TikTok content you already make and the portrait photos you shoot, so nothing gets cropped awkwardly.

WhatsApp first

Most local clients message rather than email. Every page ends in a one-tap pre-filled WhatsApp message.

Estimator

Filters tyre-kickers, educates on cost, and gives your team a spec before the first call.

Separate Cut & Edge page

A trade audience searches differently from homeowners. Its own page serves both, and ranks for both.

Process section

Fear of delays and bad installs is the top objection in custom joinery. Four steps address it.

Filterable gallery

People shop by room. Filters get them to relevant work faster and keep them browsing.

Serif + sans pairing

Fraunces says "craft", Manrope says "clear". Together: premium but approachable.

Accessibility & speed

44px targets, visible focus, lazy images, reduced-motion support, no heavy frameworks.

7 · Style guide

Rules for consistent design

Typography scale

H1	Fraunces 600 · 40–74px · lh 1.1
H2	Fraunces 600 · 30–48px
H3	Manrope 700 · 21px
Body	Manrope 400 · 16px · lh 1.6
Eyebrow	Manrope 700 · 12.5px · caps · +16%

Spacing & shape

Section padding	56–104px vertical
Container	1180px max, 20px gutters
Radius	14px small · 22px cards · pill buttons
Shadow	Soft, low-contrast, one level
Grid gap	16–22px

Buttons

Primary on dark Primary on light Secondary WhatsApp

Do & don't

One primary CTA per section
Use real project photos with descriptive alt text
Use amber only for actions and LED highlights
Keep copy sentence-case, free of ALL CAPS blocks

Don't

Don't use crimson for large areas
Don't add stock photos of other people's work
Don't hide phone/WhatsApp behind forms
Don't use more than two typefaces

Motion & accessibility

Fade-up on scroll (0.8s), hover lift (5px), reel crossfade (1s). All disabled for prefers-reduced-motion. Text contrast ≥ 4.5:1; focus ring is 3px amber.