Kyrelle Grocery Center: grocery redesign

Kyrelle Grocery Center sells fruit, vegetables, meat, rice, canned goods and Filipino specialties in Kawit, Cavite. The new website looks like the place itself: a stall of stenciled pine crates, and it keeps the shop's own Tagalog voice.

The old homepage downloaded 47.27 MB on every visit, which took 38.1 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. It also showed a certifications block in which the registration number was really the tax number and the VAT number was really the phone number, and it promised weekly promos, a loyalty programme and card payments the shop doesn't offer.

A rebuild with no framework, in teal, green and navy from the logo plus pine, with a stencil display face and a lively sans-serif. Headings are real text given a spray-paint look with an SVG filter. The shop is a wall of pine crates under five navy sign boards, from Prutas to Inumin; every crate card has a clipped kraft price tag, and adding an item drops a crate onto the basket button. A delivery strip explains the area, the ₱500 minimum and the ₱50 fee, and the cart shows how much is still missing. 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 crate drop and the delivery minimum hint, rebuilt the cart and order page, removed the false and unconfirmed claims, and measured the old and new versions with the same script.

• Headings spray-stenciled in teal on a pine plank wall, kept as real, selectable text
• Shop as a wall of pine crates under five navy sign boards: Prutas; Karne, Isda & Itlog; Pantry; Merienda; Inumin
• A crate that drops onto the basket button when an item is added
• Delivery strip with the area, ₱500 minimum and ₱50 fee, and a cart hint showing how much is missing
• Product images with invented brand names, no real brands
• False certification numbers, an unconfirmed food-safety claim, and promos, a loyalty programme and card payments the shop doesn't offer removed
• Order sent as a pre-filled email that the customer sends, with the team confirming the order and delivery first
• Field checks on the order page, including Philippine mobile number formats
• The shop's Tagalog voice and the three original customer quotes kept word for word

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

Homepage weight on load

47.27 → 1.27 MB

On load, on a phone

47.26 → 1.01 MB

After scrolling the whole page

47.27 → 1.61 MB

Fully loaded, simulated 10 Mbps

38.1 → 0.83 s

Phone layout width (390 px screen)

780 → 390 px

Products in the shop

15

• →Live at kyrellefresh.shop.
• →Measured with the same settings: homepage on load down from 47.27 MB to 1.27 MB on desktop and 1.01 MB on phones.
• →No failed requests, console errors or third-party requests on the new site during the capture run.

• A concept that looks like the real place builds trust.
• Check every number a site presents as a credential.
• If images are illustrations, say so on the page.

Client website, shown by name. After launch, the images and fonts were trimmed without changing the design; the new-site figures are measured on that trimmed version, on a local server, with the same settings as the old site. 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 invented brand names and no people; the crates carry the shop's name, and the shop says the photos are illustrations. Product descriptions, store hours and the three customer quotes are carried over from the old site.