Aller au contenu
KIVA
← Tous les projets

Sites web

Angelisse Wellness Haven: wellness centre redesign

A full redesign for a wellness and massage centre in the Philippines, inspired by hilot, the Filipino tradition of caring touch: sage, terracotta and bone, and a shop built around a line-drawn figure whose pressure points filter the products by body area. The new homepage also loads 1.21 MB instead of 50.34 MB.

Les études de cas sont en anglais.

Contexte
Angelisse Wellness Haven, a wellness and massage centre in Las Piñas City, Philippines.
Mon rôle
Design, frontend development, and image production
Année
2026
Hilot: Serif headline beside a hilot massage scene in an arch.
Phone homepage: Headline, two buttons, and the arch image on a phone.

Ma refonte : avant et après

L'ancien site à côté de mon design, à la même taille d'écran.

Homepage

A sage gradient card with the logo, above a broken image, became a calm first screen: a large serif headline ending in terracotta italics beside a hilot massage scene in an arch.

Après: HomepageAvant: Homepage

On a phone

The old phone layout was 780 px wide on a 390 px screen. Now the headline, two buttons and the arch image fit the screen.

Avant
Avant: On a phone
Après
Après: On a phone

Aperçu

Angelisse Wellness Haven offers massage, skincare and wellness programmes and sells self-care products in Las Piñas City. The new website takes its idea from hilot, the Filipino tradition of caring touch: shop by where on the body you would like a little care.

Le problème

The old homepage downloaded 50.34 MB on every visit, which took 40.6 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, it requested images that didn't exist, so visitors saw broken image placeholders, and it loaded fonts and icons from three outside hosts.

La solution

A rebuild with no framework, in sage, terracotta and bone, with a classic serif and a warm sans-serif. The shop is built around a line-drawn back-view figure with seven softly pulsing pressure points; each one is a real button that filters the products for that body area. Wording that promised medical effects was softened, and the shop and FAQ say the products are for relaxation and everyday self-care, not a substitute for medical care. Images are compressed WebP files that load as the visitor scrolls, and the fonts ship with the site, so the homepage makes no third-party requests.

Captures d'écran

Capturées sur le véritable site, en ligne.

Ma contribution

Designed and built the new site, drew the body map, produced the image set and compressed it for the web, built the body-area filter, rebuilt the cart and order page, reviewed the copy for claims, and measured the old and new versions with the same script.

Fonctionnalités

  • Body map shop: a line-drawn figure with seven pressure points that filter the products by body area
  • Each pressure point is a real button, usable with a keyboard
  • House label on every product drawn from the centre's own logo, no third-party brands
  • Note in the shop and FAQ that the products are not a substitute for medical care
  • Wording that claimed medical effects softened
  • The three original customer quotes kept word for word, with a note that experiences vary
  • Cart with quantity controls and a reminder that nothing is paid yet
  • Order sent as a pre-filled email that the customer sends, with the team confirming availability, delivery and the total first
  • Field checks on the order page, including Philippine mobile number formats

Défis techniques

A concept that does something

The body map isn't only an illustration. Its pressure points are the shop's filter, so the idea of caring touch becomes the way visitors find products.

Wellness without medical promises

Wellness copy easily drifts into health claims. Statements that promised to treat conditions were softened, and the site points visitors to a doctor for medical concerns.

Technologies vérifiées

  • HTML
  • CSS
  • JavaScript
  • SVG
  • WebP
  • JSON-LD structured data

Faits tirés du code

Homepage weight on load
50.34 → 1.21 MB
On load, on a phone
50.32 → 0.88 MB
After scrolling the whole page
50.34 → 1.97 MB
Fully loaded, simulated 10 Mbps
40.6 → 0.70 s
Phone layout width (390 px screen)
780 → 390 px
Products in the shop
15

Résultats

  • Live at angelissehaven.life.
  • Measured with the same script: homepage on load down from 50.34 MB to 1.21 MB on desktop and 0.88 MB on phones.
  • No failed requests, console errors or third-party requests on the new site during the capture run.

Enseignements

  • The best concept is one that also works as an interface.
  • In wellness, careful wording builds more trust than big promises.
  • If images are illustrations, say so on the page.

À propos de cette étude de cas

Client website, shown by name. Screenshots and measurements come from one capture script run on the old and new site, on a local server. The 10 Mbps figure is a simulated connection, not data from real visitors. The product and scene images are generated illustrations; people in them are generated too, not the centre's staff or clients. The products carry a house label drawn from the centre's own logo, with no third-party brands, and the shop says the photos are illustrations. Service descriptions and the three customer quotes are carried over from the old site; wording that claimed medical effects was softened, and this case study makes no medical claim.

Vous prévoyez un nouveau site, ou le vôtre est trop lent ?

Décrivez votre projet en quelques phrases. Dans les deux jours ouvrables, vous recevez des questions, une première approche et une fourchette de prix en CHF.

Demander une offre →