Sites web
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.
Les études de cas sont en anglais.
- Contexte
- Cecyra Retail Market, a neighbourhood grocery in Las Piñas, 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 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.
Aperçu
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.
Le problème
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.
La 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.
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 cart and order page, and measured the old and new versions with the same script.
Fonctionnalités
- 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
Défis techniques
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.
Technologies vérifiées
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Faits tirés du 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
Résultats
- 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.
Enseignements
- 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.
À propos de cette étude de cas
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.
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.