Websites
Wynelle Daily Grocery: grocery redesign
A full redesign for a neighbourhood grocery in the Philippines, built around a vintage kitchen scale: produce on green enamel, bold condensed headlines, and a working dial whose needle follows the cart total. The new homepage also loads 0.77 MB instead of 30.12 MB.
- Context
- Wynelle Daily Grocery, a neighbourhood grocery in Lipa City, Batangas, 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 green gradient card with the logo became a warm kitchen scene: a bold condensed headline beside tomatoes, mangoes, and eggplant piled on a green enamel scale.
Policy section
Light policy cards became a pale green band with a one-line summary and a link to each full policy.
On a phone
The old phone layout was 780 px wide on a 390 px screen. Now the headline, two buttons, and the scale fit the screen, with the cart always in the header.
Overview
Wynelle Daily Grocery sells fresh produce, pantry goods, and household essentials in Lipa City, Batangas. The new website takes its idea from the most familiar object in a market: the scale.
The problem
The old homepage downloaded 30.12 MB on every visit, 29.75 MB of it images, which took 24.4 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, it loaded fonts and icons from three outside hosts, and its product photos showed third-party brands.
The solution
A rebuild with no framework, in sage green, cream, and dark green with a bold condensed display face. Every product sits on the same enamel scale, a working dial in the shop moves its needle as the cart total grows, and the order summary is titled "On the scale". 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, built the cart dial, rebuilt the cart and order page, and measured the old and new versions with the same script.
What it does
- A working dial in the shop: its needle follows the cart total as items are added
- Ten products, each photographed on the same vintage scale
- Product still lifes with blank packaging, replacing photos that showed other brands
- Order summary titled "On the scale"
- Cart with quantity controls and a reminder that nothing is paid yet
- Order sent as a pre-filled email that the customer sends, with the team confirming items and delivery first
- Field checks on the order page, including Philippine mobile number formats
- Note in the shop that the photos are illustrations and may differ from what is delivered
- Cart updates announced to screen readers, reduced-motion support, and GroceryStore structured data
Technical challenges
A concept that does something
The scale isn't only decoration. The dial in the shop is real interface: as products go into the cart, its needle moves with the total, so the concept doubles as live feedback.
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.
Own images instead of other brands
The old product photos showed packaging from other brands. The new still lifes use blank packaging, and the shop states that the photos are illustrations, so the page no longer suggests products it doesn't control.
Verified stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Facts from the code
- Homepage weight on load
- 30.12 → 0.77 MB
- On load, on a phone
- 30.12 → 0.65 MB
- After scrolling the whole page
- 30.12 → 1.32 MB
- Fully loaded, simulated 10 Mbps
- 24.4 → 0.60 s
- Phone layout width (390 px screen)
- 780 → 390 px
- Products in the shop
- 10
Outcomes
- Live at wynellefresh.store.
- Measured with the same script: homepage on load down from 30.12 MB to 0.77 MB on desktop and 0.65 MB on phones.
- No failed requests or console errors on the new site during the capture run.
Lessons
- The best concept is one that also works as an interface.
- One repeated object makes a small range look consistent.
- 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 no people, and the vintage scale is a visual concept; the site says the photos are illustrations. Product descriptions, offers and customer quotes on the site are carried over from the old site. In the old homepage screenshots, a street-level address and a personal name are blurred, and the old product grid isn't shown because it pictured third-party brands.
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.