Websites
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.
- Context
- Sharvielle Retail Plaza, a women's fashion boutique in Taguig City, Philippines.
- My role
- Design, frontend development, and image production
- Year
- 2026
My redesign: before and after
The old site next to my design, at the same screen size.
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.
Overview
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.
The problem
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.
The 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.
Screenshots
Captured from the real, live website.
My 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.
What it does
- 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
Technical challenges
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.
Verified stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Facts from the 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
Outcomes
- 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.
Lessons
- 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.
About this case study
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.
Planning a new website, or is yours too slow?
Describe it in a few sentences. You'll get a reply within two business days with questions, a rough approach, and a price range in CHF.