Case study / Food

Crafted

A new ordering site for Crafted, a burger and fried chicken brand, with a menu, add-ons and a cart that match the brand.

In development

Role
UI design
Through
Direct client
Duration
2 weeks
Industry
Food

The Brief

Crafted is a burger and fried chicken brand, and its new website is in development. I’m designing the UI, two weeks of work. The site has one job above the rest: people should be able to order quickly, add extras and add-ons, and see the brand on every screen.

The Challenge

The brand is loud: red headlines, a tilted TASTY graphic and big food photography. The challenge was to keep that energy on the front of the site while the ordering part stays calm and clear, so the order is the easy part.

Key Decisions

The home page carries the brand. The red type, the cream background and the food photography run down the page from the hero, and the featured meals lead into a band with the brand’s line: we don’t do fast food, we do good food, cooked fast.

Three featured meal cards with fried chicken, then a red and pink band with a photo of burgers being handed over
Featured meals and the brand band on the home page.
The home page scrolls to Crowd Favorites, then View Menu opens the menu.

The menu is a grid you can scan. Categories sit as large icons above the products, and each product card shows a photo, the name, a short description, the price and a plus button to add it.

The Our Menu page: a search box, six category icons and a grid of burger cards with prices and plus buttons
The menu: categories, search and a product grid.
The menu: categories above the burger cards.

Extras and add-ons are chosen on the product page. It groups the choices: spice level, meal options such as a sandwich with fries or with a drink, extras and add-ons with their prices, and special instructions. Quantity and one add-to-cart button sit at the bottom, and the total stays in the card on the left.

The Customize Your Order page for a chicken slider: spice level, meal options, extras with prices, notes and quantity
The product page, where spice, meal options, extras and add-ons are chosen before the cart.
Extras, then Add to Cart opens the cart.

The cart keeps the same grouping. Items are split into base items, sides and extras, each line has an Edit link, and the subtotal and the Go to Summary button close the list.

The My Cart panel with two items, base items, sides and extras listed, a subtotal and a Go to Summary button
The cart, grouped the same way as the product page.
From the cart summary to checkout.

The Screens

The Crafted home page: the headline, the Explore Menu button and the TASTY graphic with burgers and fried chicken
The home page hero, with the main call to action.
The sign-in panel opens from the header.
The checkout page: delivery details with personal info, shipping method and address, and the cart summary beside them
Checkout: delivery details beside the cart.
The My Cart summary: three chicken slider lines with quantities and prices, the sub-total and Proceed to Checkout
The order summary, one step before checkout.

Status

In development. This is UI design only, two weeks of work for a site that is not live yet.

Crafted screens on a laptop and screens
Home, the menu, customising an order and the cart.
Crafted mobile screens on phones
Ordering on phones.

Client feedback

The client liked how easy it is to order and add extras and add-ons, and how closely the visuals match their brand.