So Sure
Website Redesign · Homepage Directions
Internal review · June 2026
For review · 3 directions + 1 template

Three homepages.
One brand. Pick the base.

A ground-up redesign of sosurepads.ph. Each direction shares one design system – the So Sure logo, Sansita + Carlito, and the forest / green / navy palette on a calm, dignified canvas – with copy taken straight from the approved copy doc. What changes is how the tokens are spent. Click through, react with your gut, then we tighten the winner.

3
Homepage directions to review
1
Shared design system & component kit
1
Single product page template
~5 min
To click through everything
How to use this review

Feel the mood, not every word.

Open each direction below in a new tab. Don't read line by line – react to the overall feel. Note what you'd want more of, less of, or borrowed across directions. We'll combine the winning moves into the final build.

Homepage directions

Pick one base – we refine from there.

Same system, three theses. Nav and footer stay identical across all three so they read as one brand; the hero and structure carry the personality.

DIRECTION A

Quiet & editorial.

Type-led and calm. White and mist grounds, oversized Sansita headlines, soft drifting leaf-light accents, and generous whitespace. The quietest lane – closest to the Lactacyd / Betadine restraint the client referenced.

Visual mood
Editorial · refined · calm
Hero
Type-led, 4-image slider
Colour moment
One soft green band
Best for
Brand-led, premium feel
Mist grounds Editorial rows Leaf-light accents Hand-drawn underlines Crossfade slider
View Direction A
sosurepads.ph
Preview of homepage direction A – quiet and editorial
Hover to scroll the preview ↓
DIRECTION B

Confident hero.

A full-bleed lifestyle hero, then one navy stats band as the single saturated moment – oversized numbers (1 in 10, 4 hrs, 500 ml), a glass feature card, and a centred testimonial. Bold rhythm on a calm canvas.

Visual mood
Confident · bold · warm
Hero
Full-bleed lifestyle image
Saturated moment
Navy stats band
Best for
Launch energy & confidence
Image hero Navy stats band Oversized numbers Glass pillars Centred testimonial
View Direction B
sosurepads.ph
Preview of homepage direction B – confident hero
Hover to scroll the preview ↓
DIRECTION C

Structured & shop-forward.

A modular bento hero with the product range and where-to-buy surfaced high – a tile hero, the two-product range grid, a prominent forest where-to-buy band, and structured review and FAQ cards. The most shop-forward of the three.

Visual mood
Structured · modular · practical
Hero
Bento tiles
Surfaced fast
Products + where-to-buy
Best for
Conversion & shoppers
Bento hero Product range grid Forest where-to-buy band Review cards Hover lifts
View Direction C
sosurepads.ph
Preview of homepage direction C – structured and shop-forward
Hover to scroll the preview ↓
Foundations & templates

The system every page is built from.

The design system, a worked page template, and the search rulebook. Whichever direction you pick, these stay the shared backbone.

Design system

Colour tokens, the type scale, spacing rhythm, and the core component kit – greens and navy carry the page, brights accent only. Mirrors css/tokens.css.

Open design system →
Preview of the single product page template

Single product page

Gallery with thumbnails, a sticky buy panel, an absorbency gauge, specs, how-to-use, where-to-buy, reviews, and related products – built on Direction A's system.

View product page →

SEO & GEO playbook

How the site gets found on Google and in AI answers – metadata, schema, Tagalog / Taglish search targets, and the structured-data rules each public page follows.

Open playbook →
Side by side

At a glance.

Dimension
A · Quiet
B · Confident
C · Structured
Mood
Editorial · calm
Confident · bold
Structured · practical
Hero
Type-led, crossfade slider
Full-bleed lifestyle image
Bento tiles
Colour use
Whisper · one green band
Navy stats-band moment
Tints + forest band
Products surfaced
Mid-page, 2-up
Featured 2-up row
2-up grid, up high
Where to buy
Standard section
Standard section
Prominent forest band, early
Best for
Brand & PR
Confidence & launch
Conversion & shoppers
Our steer

Don't pick. Borrow.

You don't have to ship just one. Choose the dominant direction that gives the right first impression, then borrow the moves from the others that punch above their weight.

If you want a starting point: A as the editorial base – the calm, dignified feel this 45+ audience responds to – with B's one confident stats moment, and C's where-to-buy surfaced early so shoppers find stockists fast. The product template is already built on A.

If we had to pick one
A, with B's confidence
  • Editorial calm & whitespace from A (the base)
  • One navy stats moment from B
  • Where-to-buy surfaced early from C
  • Hand-drawn underlines across all three
  • Leaf-light hero field, kept subtle