Websites
Cecyra Retail Market: grocery redesign
A full redesign for a neighbourhood grocery in the Philippines, styled like a market stall with bold colour blocks and paper price tags. The new homepage also loads 1.18 MB instead of 90.70 MB.
- Context
- Cecyra Retail Market, a neighbourhood grocery in Las Piñas, 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 logo and address on pale green became a poster: tall block type on market green, a bayong of groceries on yellow, and one button each to shop and call.
Product catalogue
Rows of small white cards became a wall of colour blocks, with tiles in different sizes, paper price tags, and one illustrated image set.
Policy section
Pale cards became a dark plum band with gold headings and a link to each full policy.
On a phone
The headline and both buttons come first in large, thumb-friendly blocks, with the groceries right below them.
Overview
Cecyra Retail Market is a neighbourhood grocery in Las Piñas that sells fresh produce, pantry staples, and household essentials. Its website should feel like the shop: quick to scan, clear on prices, and easy to order from on a phone.
The problem
The old homepage downloaded 90.70 MB on every visit, 90.36 MB of it images, which took 73.1 seconds to load on a simulated 10 Mbps connection. The product photos didn't match each other, placeholder text sat on the policy cards, and pale green text on pale backgrounds gave the page little presence.
The solution
A rebuild with no framework, styled like a Filipino market stall: saturated colour blocks, tall poster headlines, and handwritten price tags. 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 cart and order page, and measured the old and new versions with the same script.
What it does
- Ten products on colour blocks, each with a price tag and a tap-to-enlarge photo
- Cart ("My bayong", after the Filipino woven market bag) with quantity controls on every product and in the side panel
- Order page with field checks, including Philippine mobile number formats
- Choice between delivery and store pickup, with the matching fields shown for each
- Order sent as a pre-filled email that the customer sends, with the shop confirming before payment
- Separate hero image for phones, and lazy loading for images further down the page
- Privacy, terms, and refund pages linked from the policy section
- Keyboard support in the cart, reduced-motion support, and GroceryStore structured data
Technical challenges
Showing products without claiming stock
The images are generated illustrations with deliberately blank packaging, not photos of the shop's stock. The site says this above the catalogue and adds that packaging may differ and that the order is confirmed first.
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 nothing is paid until the shop confirms.
A loud design that stays fast
Full-colour image tiles could easily have recreated the old weight problem. The first screen loads only what it shows, so on a phone the homepage starts at 0.47 MB and reaches 1.18 MB after a full scroll.
Verified stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Facts from the code
- Homepage weight on load
- 90.70 → 1.18 MB
- On load, on a phone
- 90.69 → 0.47 MB
- After scrolling the whole page
- 90.70 → 1.22 MB
- Fully loaded, simulated 10 Mbps
- 73.1 → 0.67 s
- Third-party hosts on the homepage
- 3 → 0
- Products in the catalogue
- 10
Outcomes
- Live at cecyrashop.online.
- Measured with the same script: homepage on load down from 90.70 MB to 1.18 MB on desktop and 0.47 MB on phones.
- No failed requests or console errors on the new homepage during the capture run.
Lessons
- A grocery site should feel like a busy shop, not a brochure.
- A consistent image set does more for trust than any single good photo.
- 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 with the same settings 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 blank packaging, and the site says so. The owner's name and the address are masked in the old screenshots.
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.