Sites web
Joymera Retail Market: market redesign
A full redesign for a neighbourhood market in the Philippines, built around painted wood, yellow tables, and the shop's bag mascot. The new homepage also loads 1.44 MB instead of 42.90 MB.
Les études de cas sont en anglais.
- Contexte
- Joymera Retail Market, a neighbourhood market in Bacoor, Cavite, 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 in a rounded card became a full market scene: a brush-script headline on painted blue boards, a table of groceries, and the shop's mascot waving from the counter.
Products
Small cards with thumbnails became a shelf: every product sits on the same blue wall and yellow table, with a round red price sticker.
Policy section
Pale cards became a deep maroon band with script headings and a clear link to each full policy.
On a phone
The hero is redrawn for a tall screen: headline first, two full-width buttons, and the groceries on the table below.
Aperçu
Joymera Retail Market is a neighbourhood market in Bacoor that sells fresh produce, pantry staples, and household essentials. The new website carries the same cheerful personality as the shop's mascot and is easy to browse on a phone.
Le problème
The old homepage downloaded 42.90 MB on every visit, 42.54 MB of it images, which took 34.6 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, and the look gave the shop's strong mascot little room.
La solution
A rebuild with no framework, set in a painted market: blue boards, yellow tables, maroon signs, and Filipino words like sariwa and sulit in the copy. Products are grouped into four aisles with sticky tabs, and images are compressed WebP files that load as the visitor scrolls.
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 basket and order page, and measured the old and new versions with the same script.
Fonctionnalités
- Fifteen products in four aisles, with tabs that jump between them
- The client's bag mascot used across the page, from the hero to the basket
- Basket panel with quantity controls and a reminder that nothing is paid yet
- Order page styled as a handwritten shopping list on notebook paper
- Field checks on the order page, including Philippine mobile number formats
- Order sent as a pre-filled email that the customer sends, with the shop confirming before payment
- Fonts hosted with the site, so the homepage makes no third-party requests
- Keyboard support in the basket, reduced-motion support, and GroceryStore structured data
Défis techniques
One world for every product
Fifteen different items had to look like they belong on the same shelf. Each generated image uses the same blue wall, yellow table, and lighting, with plain packaging. The site says the photos are illustrations and that items are confirmed before payment.
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.
A rich page that stays light
A full-bleed hero and many product images could easily get heavy. A separate hero for phones and lazy loading keep the phone homepage at 0.93 MB on load and 1.54 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
- 42.90 → 1.44 MB
- On load, on a phone
- 42.89 → 0.93 MB
- After scrolling the whole page
- 42.90 → 1.60 MB
- Fully loaded, simulated 10 Mbps
- 34.6 → 0.74 s
- Phone layout width (390 px screen)
- 780 → 390 px
- Products in the catalogue
- 15
Résultats
- Live at joymeramarket.store.
- Measured with the same script: homepage on load down from 42.90 MB to 1.44 MB on desktop and 0.93 MB on phones.
- No failed requests or console errors on the new homepage during the capture run.
Enseignements
- If a client already has a strong mascot, build the design around it.
- One shared set-up for product images makes a small shop look organised.
- A little of the customer's own language says more than a slogan.
À propos de cette étude de cas
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, and the site says so. The mascot comes from the client's logo. The owner's name is masked in the old homepage screenshot.
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.