Sites web
Sharvielle Retail Plaza: boutique redesign
A full redesign for a women's fashion boutique in the Philippines, staged as a theatre: red velvet curtains, a collection presented in three acts, and an order summary styled as an admission ticket. The new homepage also loads 1.06 MB instead of 69.77 MB.
Les études de cas sont en anglais.
- Contexte
- Sharvielle Retail Plaza, a women's fashion boutique in Taguig 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 blue-and-gold welcome card became an opening night: a fine serif headline before red velvet curtains, a figure in an evening dress centre stage, and a "Raise the curtain" button that opens the collection.
Collection
A grid of small product cards became "The collection, in three acts": runways you slide along, each act a mood, starting with Act I, La vie moderne.
Policy section
Light policy cards became a dark burgundy 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 stage fit the screen, with the bag always in the header.
Aperçu
Sharvielle Retail Plaza sells women's clothing in Taguig City, from everyday blouses to evening wear. The new website presents the collection like a show: the curtain rises, the pieces walk out in three acts, and the order is your ticket.
Le problème
The old homepage downloaded 69.77 MB on every visit, 69.39 MB of it images, which took 56.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 deep red, burgundy, and cream with a fine high-contrast serif. A short curtain animation opens the page, the collection runs as three runways (everyday, evening, and finishing touches), customer quotes become reviews of the show, and the order summary is an admission ticket. 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
- Collection in three acts: La vie moderne, The evening edit, and The finishing touch
- Runways you slide along with buttons, swipe, or the keyboard
- Short curtain animation on load, skipped for visitors who prefer reduced motion
- Order summary styled as an "Admit one" ticket
- 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
- Phone link fixed: the old site dialled a different number from the one it displayed
- Bag updates announced to screen readers and ClothingStore structured data
Défis techniques
A show that doesn't make you wait
An opening animation can easily get in the way. The curtain finishes in under two seconds, the content behind it is already loaded, and visitors who prefer reduced motion skip it.
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.
A stage that isn't a real place
The theatre is a visual idea, not a venue, and the models and pieces are illustrations. The collection states that the photos are illustrations, so the concept sets a mood without suggesting a real show or real stock.
Technologies vérifiées
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Faits tirés du code
- Homepage weight on load
- 69.77 → 1.06 MB
- On load, on a phone
- 69.76 → 1.12 MB
- After scrolling the whole page
- 69.77 → 1.40 MB
- Fully loaded, simulated 10 Mbps
- 56.3 → 0.69 s
- Phone layout width (390 px screen)
- 780 → 390 px
- Products in the collection
- 15
Résultats
- Live at sharvielleshop.online.
- Measured with the same script: homepage on load down from 69.77 MB to 1.06 MB on desktop and 1.12 MB on phones.
- No failed requests or console errors on the new site during the capture run.
Enseignements
- An animation earns its place only if it's short and can be skipped.
- Grouping a collection by mood makes a small range feel curated.
- 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, and the theatre stage is a visual concept, not a real venue; the site says the photos are illustrations. Product descriptions and customer quotes on the site are carried over from the old site.
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.