Jessara Vital Citadel: daily necessities store redesign

Jessara Vital Citadel sells pantry goods, fresh food, home care and personal care products in Pinagsama, Taguig City. The new website feels like walking into the store: you follow the aisle signs.

The old homepage downloaded 67.35 MB on every visit, which took 54.3 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, its yellow quote was barely readable, and it loaded fonts and icons from three outside hosts. It also listed a business registration number, a tax region and a registered proprietor nobody had confirmed, and "trusted" claims.

A rebuild with no framework, in light blue, navy and white, with a soft serif and a clean sans-serif. Light-blue aisle signs hang on cables and sway in as each section scrolls into view, from Aisle 1 for pantry and fresh food onward; a "Welcome" sign hangs over the hero above a store directory. Product cards carry shelf-edge price strips, and a line-drawn cart from the logo rolls along a dashed floor track to show how far down the page you are. Because the store doesn't deliver yet, customers order online and pick up and pay at the counter; three floor decals explain how. 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.

Designed and built the new site, produced the image set and compressed it for the web, built the swaying aisle signs and the scroll cart, rebuilt the order page for pickup, removed the unconfirmed registration details, and measured the old and new versions with the same script.

• Hanging aisle signs that sway in as each section scrolls into view
• "Welcome" sign over the hero and a store directory of four sections
• Line-drawn cart rolling along a floor track as a scroll indicator
• Shelf-edge price strips on every product card
• Pickup ordering with three floor decals explaining the steps; payment at the counter
• Product images with invented brand names, no real brands
• Unconfirmed registration number, tax region, proprietor line and "trusted" claims removed
• Order sent as a pre-filled email that the customer sends, with the team confirming the order first
• The two original customer quotes kept word for word

• HTML
• CSS
• JavaScript
• SVG
• WebP
• JSON-LD structured data

Homepage weight on load

67.35 → 0.48 MB

On load, on a phone

67.34 → 0.35 MB

After scrolling the whole page

67.35 → 0.71 MB

Fully loaded, simulated 10 Mbps

54.3 → 0.44 s

Phone layout width (390 px screen)

780 → 390 px

Products in the shop

15

• →Live at jessaravital.life.
• →Measured with the same script: homepage on load down from 67.35 MB to 0.48 MB on desktop and 0.35 MB on phones.
• →No failed requests, console errors or third-party requests on the new site during the capture run.

• The best concept is one that also works as an interface.
• Build the checkout around how the shop actually hands over goods.
• If images are illustrations, say so on the page.

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 images are generated illustrations with invented brand names and no people, and the shop says the photos are illustrations. Product descriptions, pickup terms and the two customer quotes are carried over from the old site. In the new phone menu screenshot, the phone number is blurred.