Yamira Retail Market: neighbourhood market redesign

Yamira Retail Market sells groceries, fresh produce and household essentials in BF Homes, Parañaque City. The new website borrows the paper every customer takes home: the thermal receipt.

The old homepage downloaded 36.80 MB on every visit, which took 29.7 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, half of the main headline was dark text on a dark background, and it loaded fonts and icons from three outside hosts. The footer also carried a line of search keywords and an unconfirmed VAT claim.

A rebuild with no framework, in cream, navy and strawberry red, with a slab serif and a monospace receipt face. The whole page reads as one long receipt on a navy counter: products are line items with dotted leaders to two-decimal prices, sections are separated by perforations and tear lines, and the cart prints line by line before ending with a subtotal, a decorative barcode and a torn edge. 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 receipt cart and its print animation, rebuilt the order page for delivery, cleaned up the footer and terms, and measured the old and new versions with the same script.

• The whole page as one long receipt, with perforated section breaks
• Products as receipt line items with dotted leaders to two-decimal prices
• Cart that prints line by line and ends with a subtotal, a decorative barcode and a torn edge
• Fifteen products in departments such as fresh produce, eggs and chicken
• Product images with invented brand names and strawberry price stickers, no real brands
• Search keyword line and an unconfirmed VAT claim removed from the footer
• Order sent as a pre-filled email that the customer sends, with the team confirming availability, the delivery fee and the total first
• Field checks on the order page, including Philippine mobile number formats
• The three original customer quotes kept word for word

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

Homepage weight on load

36.80 → 1.38 MB

On load, on a phone

36.79 → 1.06 MB

After scrolling the whole page

36.80 → 1.62 MB

Fully loaded, simulated 10 Mbps

29.7 → 0.77 s

Phone layout width (390 px screen)

780 → 390 px

Products in the shop

15

• →Live at yamiramarket.store.
• →Measured with the same script: homepage on load down from 36.80 MB to 1.38 MB on desktop and 1.06 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.
• Keyword lines help nobody; clear text does.
• 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 and scene images are generated illustrations with invented brand names and no people; only the paper bag carries the shop's own logo, and the shop says the photos are illustrations. Product descriptions, store hours and the three customer quotes are carried over from the old site. In the screenshots, the street address, tax number and phone number on the receipt header and the founder's name on the old homepage are blurred.