Sites web
Mayrelle Apparel Boutique: clothing boutique redesign
A full redesign for a clothing boutique in the Philippines, framed by capiz windows: arched frames with shell-pane lattices, pieces displayed on dress forms behind them, and panels that slide open as you scroll. The new homepage also loads 1.19 MB instead of 31.26 MB.
Les études de cas sont en anglais.
- Contexte
- Mayrelle Apparel Boutique, a clothing boutique in Imus City, Cavite, 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 blue gradient card with the logo became a shop window: a serif headline with an olive script accent on cream, and a dress on a form behind an arched capiz window.
Collection
A grid of small product cards became "Explore our collection": every piece behind its own arched capiz window, grouped for her, for him, and for kids and everyone.
Policy section
Light policy cards became a cream band with a one-line summary and a link to each full policy.
On a phone
The old phone layout was 780 px wide on a 390 px screen. Now the headline, two buttons, and the capiz window fit the screen, with the cart always in the header.
Aperçu
Mayrelle Apparel Boutique sells everyday and occasion wear for women, men, and kids in Imus City, Cavite. The new website borrows a familiar Filipino detail: the capiz window, with each piece displayed behind its own frame.
Le problème
The old homepage downloaded 31.26 MB on every visit, 30.89 MB of it images, which took 25.3 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, and it loaded fonts and icons from three outside hosts.
La solution
A rebuild with no framework, in cream, dark wood brown, and olive with a classic serif and a script accent. Every product sits behind an arched capiz window in three groups, and the window panels slide open as each one scrolls into view. 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, rebuilt the cart and order page, and measured the old and new versions with the same script.
Fonctionnalités
- Collection in three groups: for her, for him, and for kids and everyone
- Fifteen products, each behind its own arched capiz window
- Window panels that slide open as they scroll into view, without animation for visitors who prefer reduced motion
- 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 size, color, and availability first
- Field checks on the order page, including Philippine mobile number formats
- Note in the collection that the photos are illustrations and may differ from the piece
- Cart updates announced to screen readers and ClothingStore structured data
Défis techniques
A local detail as the whole frame
Capiz windows are instantly recognisable in the Philippines. Using the same arched frame for every product gives the catalogue a consistent rhythm, so fifteen different pieces still read as one collection.
Ordering with no backend
The site is static, so it can't place an order by itself. The order page checks the details and opens a complete pre-filled email for the customer to send, and it explains that the team confirms size and availability first.
Motion that never hides the product
The panels open as a small reveal, but the product is already loaded behind them, and visitors who prefer reduced motion see the windows open from the start.
Technologies vérifiées
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Faits tirés du code
- Homepage weight on load
- 31.26 → 1.19 MB
- On load, on a phone
- 31.25 → 1.29 MB
- After scrolling the whole page
- 31.26 → 1.96 MB
- Fully loaded, simulated 10 Mbps
- 25.3 → 0.74 s
- Phone layout width (390 px screen)
- 780 → 390 px
- Products in the shop
- 15
Résultats
- Live at mayrellefashion.shop.
- Measured with the same script: homepage on load down from 31.26 MB to 1.19 MB on desktop and 1.29 MB on phones.
- No failed requests or console errors on the new site during the capture run.
Enseignements
- A familiar local detail can make a small shop feel rooted.
- Repeating one frame turns a mixed catalogue into a collection.
- 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, and the capiz window is a visual concept, not the real store; the site says the photos are illustrations. Product descriptions and customer quotes on the site are carried over from the old site. The founder's name in the old homepage screenshot 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.