Websites
Jolivane Fashion Boutique: boutique redesign
A full redesign for a fashion boutique in the Philippines: deep indigo, a giant fashion-magazine wordmark, and a tailor's tape measure down the page. The new homepage also loads 0.99 MB instead of 44.47 MB.
- Context
- Jolivane Fashion Boutique, a clothing boutique in Parañaque 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 rose gradient card became a fashion-magazine cover: a huge wordmark on deep indigo, one figure in a floral dress, and a tape measure running down the edge of the page.
Collection
Rows of small product cards became an editorial spread, with large images in staggered sizes and a handwritten label on each look.
Policy section
White cards became one quiet indigo band with italic headings and a clear link to each full policy.
On a phone
The wordmark and figure stay as the cover on a tall screen, with the two main actions in full-width buttons below.
Overview
Jolivane Fashion Boutique sells casual wear, office outfits, and accessories, and takes custom orders from Parañaque City. The new website presents the shop the way a fashion label would: big type, few words, and clothes at the centre of every screen.
The problem
The old homepage downloaded 44.47 MB on every visit, 44.10 MB of it images, which took 35.9 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, and its card-based template looked like many other shop sites rather than a fashion label.
The solution
A rebuild with no framework around one idea from the tailor's bench: deep indigo cloth, a tape measure down the page edge, thin high-contrast type, and handwritten labels. 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
- Fifteen pieces in an editorial layout, with images in staggered sizes
- Giant wordmark that overlaps the hero figure on desktop
- Tape-measure ruler along the page edge as the site's signature
- Dedicated made-to-measure section alongside the collection
- Bag panel with quantity controls and a reminder that nothing is paid yet
- Order sent as a pre-filled email that the customer sends, with the shop confirming colour, size, and availability first
- Field checks on the order page, including Philippine mobile number formats
- Keyboard support in the bag, reduced-motion support, and ClothingStore structured data
Technical challenges
Fashion images without real models
The looks are generated illustrations, composed so that no recognisable faces appear. The site states directly above the collection that they aren't photos of its stock or models.
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 shop confirms colour, size, and availability first.
A dramatic cover that stays light
A full-screen hero is often the heaviest part of a page. Separate hero images and lazy loading keep the homepage on a phone at 0.54 MB on load and 1.48 MB after a full scroll (1.64 MB on desktop).
Verified stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Facts from the code
- Homepage weight on load
- 44.47 → 0.99 MB
- On load, on a phone
- 44.47 → 0.54 MB
- After scrolling the whole page
- 44.47 → 1.64 MB
- Fully loaded, simulated 10 Mbps
- 35.9 → 0.60 s
- Phone layout width (390 px screen)
- 780 → 390 px
- Products in the catalogue
- 15
Outcomes
- Live at jolivanestyle.shop.
- Measured with the same script: homepage on load down from 44.47 MB to 0.99 MB on desktop and 0.54 MB on phones.
- No failed requests or console errors on the new homepage during the capture run.
Lessons
- A single idea from the client's own craft can carry a whole design.
- In fashion, fewer words and bigger images do more of the selling.
- 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 fashion images are generated illustrations without recognisable faces, not photos of real models or stock, and the site says so.
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.