Mirivelle Golden Court: community store redesign

Mirivelle Golden Court sells groceries, ready-to-eat food, school and office supplies and household goods in Barangay Santol, Mataas na Kahoy, Batangas. The new website borrows a familiar country-store object: the seed packet.

The old homepage downloaded 62.50 MB on every visit, which took 50.4 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, its yellow text was barely readable, it requested images that didn't exist, and it loaded fonts and icons from three outside hosts. Its details also didn't agree: the tax number was labelled a business permit, the legal pages gave a different unit number, there were two extra email addresses on another domain, the founder's name was misspelled, and it announced card payments as "coming soon".

A rebuild with no framework, in deep green, cream and golden yellow, with a round slab serif and a clean sans-serif. Every product is a vintage seed packet: a scalloped "Packet No." flap, a leaf frame drawn from the logo, an arched photo, net weight or grade taken only from the product name, then price and an add button. Products sit on four colour-coded racks: pantry and fresh, ready-to-eat, school and office, home and cleaning. Adding an item "sows" it: the flap tips and a leaf sprouts on the cart button, which grows like a seedling. The shop's Taglish voice is kept. 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.

Designed and built the new site, produced the image set and compressed it for the web, built the seed-packet cards and the seedling cart, rebuilt the cart and order page, aligned the contact and legal details, and measured the old and new versions with the same script.

• Every product as a vintage seed packet with flap, leaf frame and arched photo
• Four colour-coded racks: pantry and fresh, ready-to-eat, school and office, home and cleaning
• Adding an item sprouts a leaf on the cart button, which grows like a seedling
• Hero packet frame with vines drawing in and an opening-hours table
• Product images with invented brand names, no real brands
• One email, one address and the tax number labelled correctly; the founder's name spelled correctly
• Card payments "coming soon" removed; payment as stated in the old FAQ
• Order sent as a pre-filled email that the customer sends, with the team confirming stock, delivery and the total first
• The shop's Taglish voice and the three original customer quotes kept word for word

• HTML
• CSS
• JavaScript
• SVG
• WebP
• JSON-LD structured data

Homepage weight on load

62.50 → 0.93 MB

On load, on a phone

62.49 → 0.65 MB

After scrolling the whole page

62.50 → 1.14 MB

Fully loaded, simulated 10 Mbps

50.4 → 0.77 s

Phone layout width (390 px screen)

780 → 390 px

Products in the shop

15

• →Live at mirivellegolden.site.
• →Measured with the same script: homepage on load down from 62.50 MB to 0.93 MB on desktop and 0.65 MB on phones.
• →No failed requests, console errors or third-party requests on the new site during the capture run.

• The best concept is one that also works as an interface.
• Contact details must say the same thing on every page.
• If images are illustrations, say so on the page.

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 images are generated illustrations with invented brand names and no people, and the shop says the photos are illustrations. Product descriptions, delivery terms and the three customer quotes are carried over from the old site. In the screenshots, the phone number is blurred.