Sites web
Jamirel Family Grocery: boutique redesign
A full redesign for a women's fashion boutique in the Philippines, styled as an old family store: mint-green shelves, clothes displayed like the day's stock, and an order summary printed as a receipt. The new homepage also loads 0.88 MB instead of 78.94 MB.
Les études de cas sont en anglais.
- Contexte
- Jamirel Family Grocery, a women's clothing and accessories boutique in Parañaque 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 peach welcome card became a shopfront: a bold Tagalog headline, "Bawat damit may kwento" (every dress has a story), on deep green above a row of mint shelves with a gown on display.
Shop
A grid of small product cards became "Today's stock": dresses standing in green shelf cabinets, grouped as For the occasion, For every day, and For the finishing touch.
Policy section
Light policy cards became a green band with a one-line summary and a link to each full policy.
On a phone
The headline, two full-width buttons, and the shelf scene fit the first screen, with the basket always in the header.
Aperçu
Jamirel Family Grocery is a boutique for women's clothing and accessories in Parañaque City. Its name sounds like a grocery, so the new website leans into it: a friendly old family store where the clothes are the day's stock.
Le problème
The old homepage downloaded 78.94 MB on every visit, 78.60 MB of it images, which took 63.6 seconds to load on a simulated 10 Mbps connection. It also loaded fonts and icons from three outside hosts, and its card template didn't use the character already in the shop's name.
La solution
A rebuild with no framework, in deep green, mint, and cream with a heavy display face and typewriter details. Products stand in shelf cabinets in three groups, customer quotes come from the regulars, the FAQ becomes questions at the counter, and the order summary prints as a receipt. 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 basket and order page, and measured the old and new versions with the same script.
Fonctionnalités
- Fifteen products in three shelves: For the occasion, For every day, and For the finishing touch
- Product images staged in mint shelf cabinets, like stock in a family store
- Basket with quantity controls and a reminder that nothing is paid yet
- Order summary styled as a printed receipt
- 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
- Basket updates announced to screen readers, reduced-motion support, and ClothingStore structured data
Défis techniques
A grocery name for a boutique
The name says grocery, but the shop sells clothes. Instead of hiding that, the design turns it into the concept: an old family store whose shelves hold dresses, so the name and the products make sense together.
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.
Illustrations without faces
The images are generated, so they shouldn't look like real customers or staff. Models are framed without faces and clothes are shown on stands, and the shop states that the photos are illustrations.
Technologies vérifiées
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Faits tirés du code
- Homepage weight on load
- 78.94 → 0.88 MB
- On load, on a phone
- 78.94 → 0.69 MB
- After scrolling the whole page
- 78.94 → 1.08 MB
- Fully loaded, simulated 10 Mbps
- 63.6 → 0.62 s
- Third-party hosts on load
- 3 → 0
- Products in the shop
- 15
Résultats
- Live at jamirelfamily.store.
- Measured with the same script: homepage on load down from 78.94 MB to 0.88 MB on desktop and 0.69 MB on phones.
- No failed requests or console errors on the new site during the capture run.
Enseignements
- A name that seems to fight the product can become the concept.
- Grouping stock by occasion is easier to browse than one long grid.
- 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 models framed without faces, and the site says so. 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.