Aller au contenu
KIVA
← Tous les projets

Sites web

Jedira Style Boutique: boutique redesign

A full redesign for a clothing boutique in the Philippines, built like a tailor's swatch book: black and gold from the logo on ivory paper, a fan of swatch blades in the hero that links to colour filters, and product cards cut like fabric swatches with pinked edges. The new homepage also loads 0.80 MB instead of 65.44 MB.

Les études de cas sont en anglais.

Contexte
Jedira Style Boutique, a clothing boutique in Talon Uno, Las Piñas City, Philippines.
Mon rôle
Design, frontend development, and image production
Année
2026
The swatch fan: Serif headline in ivory and gold beside a fan of swatch blades on a gold rivet.
Phone homepage: Headline, buttons and the swatch fan 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 coral gradient card with pale text that was hard to read became a black-and-gold first screen: a large serif headline with "your statement." in gold, beside a fan of swatch blades turning on a gold rivet.

Après: HomepageAvant: Homepage

On a phone

The old phone layout was 780 px wide on a 390 px screen, with pale text on a coral card. Now the headline, buttons and swatch fan fit the screen.

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

Aperçu

Jedira Style Boutique sells casual wear and statement pieces for women, men and kids in Talon Uno, Las Piñas City. The new website borrows the tool every dressmaker uses to choose a fabric: the swatch book.

Le problème

The old homepage downloaded 65.44 MB on every visit, which took 52.4 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, much of its text was pale on a coral background, it requested images that didn't exist, and it loaded fonts, icons and an embedded map from six outside hosts. It also claimed a VAT registration nobody had confirmed.

La solution

A rebuild with no framework, in black and gold from the logo on ivory and cream paper, with a high-contrast serif, a wide display face and a clean sans-serif. In the hero, a fan of swatch blades turns on a gold rivet, and each blade (Neutral, Blue, Jewel, Print) leads to a colour filter. Product cards are swatch pages with pinked zig-zag edges, a punched hole and a gold index number. Colour chips and category tabs filter the range, with a live count of matching pieces. 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, produced the image set and compressed it for the web, built the swatch fan and the colour and category filters, rebuilt the cart and order page, removed the unconfirmed tax claim, and measured the old and new versions with the same script.

Fonctionnalités

  • Fan of swatch blades in the hero, each linking to a colour filter
  • Product cards cut like fabric swatches, with pinked edges, a punched hole and a gold index number
  • Colour chips and category tabs with a live count of matching pieces, usable with a keyboard and screen reader
  • Fifteen pieces for women, men, kids and teens
  • Labels and hang tags drawn from the boutique's own logo, no third-party brands
  • Unconfirmed VAT claim removed; only the tax number is shown
  • Order sent as a pre-filled email that the customer sends, with the team confirming size, availability and delivery first
  • Field checks on the order page, including Philippine mobile number formats
  • The three original customer quotes kept word for word, including the Taglish

Défis techniques

A concept that does something

The swatch fan isn't only decoration. Each blade is a way into the shop's colour filter, so choosing a colour feels like leafing through fabric samples.

Same city, same range, different shop

Another clothing shop in the same city was redesigned in the same period. To keep each brand its own, this one avoids hangers, rails and sketches entirely and builds on fabric swatches, black and gold.

Technologies vérifiées

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

Faits tirés du code

Homepage weight on load
65.44 → 0.80 MB
On load, on a phone
65.00 → 0.59 MB
After scrolling the whole page
66.09 → 0.94 MB
Fully loaded, simulated 10 Mbps
52.4 → 0.63 s
Phone layout width (390 px screen)
780 → 390 px
Products in the shop
15

Résultats

  • Live at jediraboutique.store.
  • Measured with the same script: homepage on load down from 65.44 MB to 0.80 MB on desktop and 0.59 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.
  • Two shops in the same trade deserve two different ideas.
  • 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 with no people; the garments carry labels and tags drawn from the boutique's own logo, with no third-party brands, and the shop says the photos are illustrations. Product descriptions, store hours and the three customer quotes are carried over from the old site. In the old homepage screenshot, the founder's name is blurred.

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 →