A website and online shop for a catering brand in Vienna, where customers build their own Brötchen boxes and order them for delivery across the city.
Client
Vorstadt Brötchen, Vienna
My role
UI/UX designer
Type of work
Website redesign and online shop
Industry
Catering, food
Timeline
5 weeks
Typeface
Kumbh Sans
In short
Vorstadt Brötchen makes handmade Brötchen, canapés, and small desserts for events and offices in Vienna.
I redesigned the website around the brand's Viennese character and turned ordering into a proper online shop.
The heart of it is a box configurator: choose the size, pick four varieties, and add it to the cart.
5weeks of design work
6box sizes, from 20 to 120 pieces
5delivery options across Vienna
3payment methods at checkout
01
Overview
Viennese tradition, ordered online.
Vorstadt Brötchen is a catering brand from Vienna's 19th district. Every Brötchen is topped by hand, and the brand is as much about presentation as taste. Customers order for meetings, parties, and events, online, by phone, or by email.
The brief was a site that feels classic without feeling dated: warm beige and charcoal, hand-drawn illustration, and an ordering flow simple enough for a busy office manager. I designed the website and the online shop at Mesh WEB in five weeks.
02
The challenge
Heritage on one side, a shop on the other.
Classic, not old
The brand draws on old Vienna. The site had to carry that character and still feel like a modern shop.
Story before catalogue
Visitors should feel the quality and care first, then be guided to the products.
Orders that are not one item
A catering order is a box of many pieces in several varieties, not a single product with a quantity.
Delivery is local
Prices depend on the district and the day, from collection in the shop to weekend delivery across Vienna.
03
Visual identity
Line drawings of old Vienna.
The visual direction came from historical engravings, traditional signage, and Viennese motifs. White line drawings sit on deep charcoal: a canapé on a pick, coffee-house guests from another century, the city skyline behind the hero. Warm beige carries the buttons and the footer, and food photography brings the colour.
Core palette
Charcoal#303134
Beige#D2C7AE
Canvas#F5F5F5
White#FFFFFF
Typography
Aa
Kumbh SansOne typeface for headings, navigation, and text
A light geometric sans with soft curves, modern enough for the shop and quiet next to the hand-drawn illustrations.
04
Home and about
Tell the story, then open the menu.
The home page moves from the brand promise to proof. A row of tilted photographs answers why Vorstadt Brötchen, the illustrated sections tell where it comes from, and the product range follows as Brötchen, canapés, and fine desserts.
The about page keeps the same rhythm: a split hero, then short sections on craft and detail, each paired with a photograph.
05
Building a box
A catering order, designed as a box.
The hardest part was the order itself. Nobody buys one Brötchen: they buy a box for a meeting of twenty or a party of a hundred, in several varieties. Instead of a long product list with quantities, I designed the box as the product.
Pick a size, then four varieties
The customer chooses the box size first, from 20 to 120 pieces, then picks four varieties from dropdowns, and finally how many boxes. The price updates with every choice.
Key features
Six box sizes as simple buttons
Four varieties, one dropdown each
Box count with a stepper, then one button
Vegan and vegetarian, from the start
The shop and the box both filter by all varieties, vegan, or vegetarian, so dietary needs are a first choice rather than something to check piece by piece.
Key features
Filters above the product grid
The same choice on the box itself
Allergy information on every product
06
Cart and checkout
Four steps, with Vienna built in.
The cart has room for what catering orders need: a note for allergies or delivery details, and a voucher code. Checkout then runs as contact details, shipping, and payment, with the order summary always on the right.
Shipping is priced the way Vienna works: free collection, weekend delivery for the inner districts 1 to 9 or the outer districts 10 to 23, weekday delivery in Vienna, and the wider area on request. Payment offers PayPal, card, and SEPA.
07
Customer account
Reordering made easy.
Regular customers, often offices, order again and again. The account gives them a dashboard of their orders, the order history with status, saved addresses, and a wishlist.
08
Outcome
A classic brand with a modern shop.
The redesign gives Vorstadt Brötchen a home that feels as handmade as its food, and an ordering flow that turns a complicated catering order into a few clear choices. The illustrations and palette carry the brand from the first screen to the checkout.
