Sites web
Mavira Style Boutique: fashion boutique redesign
A full redesign for a fashion boutique in the Philippines, styled as a 1970s record sleeve: magenta and orange grooves, a shop split into Side A and Side B, and every item numbered like a track. The new homepage also loads 0.77 MB instead of 41.23 MB.
Les études de cas sont en anglais.
- Contexte
- Mavira Style Boutique, a fashion boutique in Dasmariñas, 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 white welcome card with the logo became an album cover: a heavy retro headline in a magenta arch, a dancer in a mustard dress against orange grooves, and a "Play Side A" button that opens the shop.
Shop
A grid of pale product cards became "Side A: Wear": large photos on warm stripes, a price sticker on each, and track numbers from A1 onward.
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 arch and headline fill the first screen with two full-width buttons, and the bag stays in the header.
Aperçu
Mavira Style Boutique sells everyday wear and accessories in Dasmariñas, Cavite. The new website treats the shop like a record: a cover, two sides, a track list, and liner notes.
Le problème
The old homepage downloaded 41.23 MB on every visit, 40.88 MB of it images, which took 33.3 seconds to load on a simulated 10 Mbps connection. It also loaded fonts and icons from three outside hosts, and its card template looked like many other shops.
La solution
A rebuild with no framework, in magenta, orange, and mustard with a heavy retro display face. Clothes sit on Side A and bags and accessories on Side B, each item numbered like a track, and customer quotes become liner notes. 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 bag and order page, and measured the old and new versions with the same script.
Fonctionnalités
- Shop in two sides: Side A for clothes and Side B for bags and accessories
- Fifteen products, each with a track number, price sticker, and stock count
- "Play Side A" button on the first screen that leads straight to the shop
- Customer quotes presented as liner notes
- Bag 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 shop that the photos are illustrations and may differ from the piece
- Bag updates announced to screen readers, reduced-motion support, and ClothingStore structured data
Défis techniques
A record that's still a shop
The album idea had to stay out of the way of shopping. Track numbers and sides only label the catalogue; price, stock, and the add button stay in the same place on every item.
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.
Loud colours, light page
A bold, image-led design can easily get heavy. Compressed images, a separate hero for phones, and lazy loading keep the phone homepage at 0.59 MB on load and 0.83 MB after a full scroll.
Technologies vérifiées
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Faits tirés du code
- Homepage weight on load
- 41.23 → 0.77 MB
- On load, on a phone
- 41.22 → 0.59 MB
- After scrolling the whole page
- 41.23 → 0.99 MB
- Fully loaded, simulated 10 Mbps
- 33.3 → 0.54 s
- Third-party hosts on load
- 3 → 0
- Products in the shop
- 15
Résultats
- Live at mavirawardrobe.shop.
- Measured with the same script: homepage on load down from 41.23 MB to 0.77 MB on desktop and 0.59 MB on phones.
- No failed requests or console errors on the new site during the capture run.
Enseignements
- A strong concept works best as labels and layout, not as obstacles.
- Splitting a mixed catalogue into two sides makes it easier to browse.
- 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 of unbranded items, and the site says so. Customer quotes on the site are carried over from the old site. The owner'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.