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


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.


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.


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.