Websites
Divinel Grocery Haven: grocery redesign
A full redesign for a neighbourhood grocery in the Philippines that walks through one day, from breakfast at sunrise to dinner at night. The new homepage also loads 0.78 MB instead of 147.33 MB.
- Context
- Divinel Grocery Haven, 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 purple gradient card became a sunrise: "Good morning, Las Piñas." in heavy type over an orange sky, with a ripe mango in the morning light.
Products
One long grid of cards became a day in four chapters: breakfast at 8 am, lunch at noon, merienda at 3 pm, and dinner at 7 pm, each with its own sky and products.
Policy section
White cards became one deep purple band with bold headings and a clear link to each full policy.
On a phone
The sunrise stays the first thing on a tall screen, with the headline, two full-width buttons, and the mango below.
Overview
Divinel Grocery Haven is a neighbourhood grocery in Las Piñas. The new website turns its range into a story every Filipino household knows: what you buy for almusal, tanghalian, merienda, and dinner.
The problem
The old homepage downloaded 147.33 MB on every visit, 146.98 MB of it images, which took 118.7 seconds to load on a simulated 10 Mbps connection. Its products sat in one long grid with no sense of when or why you'd need them.
The solution
A rebuild with no framework, organised as one day at the shop. As the visitor scrolls, the sky moves from sunrise to night and a small clock in the header follows the time of day. 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
- Fifteen products in four time-of-day chapters: almusal, tanghalian, merienda, and gabi
- Sky colours that move from sunrise to night as the page scrolls
- Header clock that shows the time of the chapter in view
- Jump links to each chapter, plus a separate bulk-order section
- Cart panel with quantity controls and a reminder that nothing is paid yet
- Order sent as a pre-filled email that the customer sends, with the shop confirming items and delivery first
- Field checks on the order page, including Philippine mobile number formats
- Keyboard support in the cart, reduced-motion support, and GroceryStore structured data
Technical challenges
A story that still sells
The day-in-the-life idea had to stay a shop, not turn into a slideshow. Every chapter opens with a short line about the moment and goes straight into products with prices and an add button.
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 the team confirms first.
From the heaviest page to 0.78 MB
At 147.33 MB, the old homepage was the heaviest in this series of redesigns. Compressed images, a separate hero for phones, and lazy loading bring the homepage down to 0.78 MB on load, and to 0.68 MB on a phone.
Verified stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Facts from the code
- Homepage weight on load
- 147.33 → 0.78 MB
- On load, on a phone
- 147.32 → 0.68 MB
- After scrolling the whole page
- 147.33 → 1.26 MB
- Fully loaded, simulated 10 Mbps
- 118.7 → 0.56 s
- Third-party hosts on the homepage
- 3 → 0
- Products in the catalogue
- 15
Outcomes
- Live at divinelfresh.store.
- Measured with the same script: homepage on load down from 147.33 MB to 0.78 MB on desktop and 0.68 MB on phones.
- No failed requests or console errors on the new homepage during the capture run.
Lessons
- A familiar daily rhythm can organise a catalogue better than categories.
- Small details like a header clock make a concept feel alive.
- 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 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 blank packaging, and the site says so. Product names, prices, and descriptions are the shop's own.
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.