Bar storefront and online ordering

Context

A bar that takes care of its menu sells first through images. The site therefore rests on high-quality visuals, which conflicts directly with the requirement to be fast, especially on mobile where most of the browsing happens, often on the move and on an average connection.

The problem

The tension between visual ambition and performance is constant.

• High-definition visuals that weigh heavily on first impression
• A menu that changes regularly and has to stay editable without a developer
• Order taking that must not break the mood of the site
• Pickup slots to offer without promising the impossible

The solution

A server-rendered site, images processed and served in the right format, and ordering built into the journey rather than pushed onto a third-party tool.

• Immersive homepage, built around one main visual
• Structured drinks menu, editable from the back office
• Images resized and served in a modern format, matched to the screen
• Online ordering with collection on site, and slots derived from real opening hours
• Online payment, and stock management from a simple back office

My role

Design and development of the site, the menu back office, the ordering journey and the payment integration, plus the performance work on images.

Constraints

• High-definition visuals to reconcile with fast display on mobile
• Menu editable by the owner, with no technical involvement
• Pickup slots consistent with real opening hours and capacity
• An upmarket visual identity to hold on every screen
• A public site, and therefore indexable, which requires server rendering

Outcome

A storefront that does the menu justice without sacrificing load time, and ordering built into the site rather than outsourced.

• Images are served at the format and size of the screen, not at their original definition
• The owner updates the menu themselves
• Collection on site relies on genuinely available slots