Case study

Cocks & Cows: a restaurant chain website

Cocks & Cows is a Danish burger chain with six restaurants, each with its own atmosphere. We designed and built the restaurant chain website on a Headless CMS and Next.js: one brand, six location pages and content the team edits itself.

For Cocks & Cows we designed and built a site that brings six venues together on one platform. Each venue has its own page with its menu and atmosphere, and the whole is built on a shared design system and a fast-loading front end.

Scope of work

Industry: Hospitality
Product type: Restaurant website
Market: Hospitality

Technologies

Headless CMS
Next.js
Product Design

Key facts

Six locations on one site, each with its own page
A design system for a consistent yet varied presentation of menus and venues
Dynamic content loading for comparing what each venue offers
A headless CMS and a Next.js front end
A responsive site on every device

Six burger restaurants, one brand and a site where every venue has a place of its own.

Home page of the Cocks & Cows restaurant chain website

Goals

01
Capture the brand's character
Bring online the spirit of a burger restaurant where burgers and cocktails matter as much as the atmosphere of the venue.
02
Six venues on one site
Show each location separately, with its menu and mood, without splitting the brand across several sites.
03
A fast site with a big menu
Keep load times short, because the burger and cocktail menu is extensive and has to be easy to use on any device.

Process

Discover Define Develop Deliver

Needs analysis
Needs analysis
A review of the brand's needs and what sets each of the six locations apart.
Design system
Design system
Components that present each venue's menu and atmosphere in a consistent yet varied way.
Location pages
Location pages
A separate layout for each of the six venues, within one brand.
Responsive design
Responsive design
Views refined for phone, tablet and desktop.
Development
Development
A headless CMS and a Next.js front end, with a focus on load speed.

Group menus section on the Cocks & Cows website

What we delivered

A brand site with six venue pages and the tooling for the team to edit content themselves.

Design system - shared components for menus, venue descriptions and photos, with room for differences between locations.
Location pages - six separate presentations, each with its own layout and offer.
Offer comparison - dynamic content loading, so the offers of different venues can be browsed without waiting.
Headless CMS - a panel where the brand team updates content, separate from the front end.
Next.js front end - a responsive site built for short load times.

Challenge: one brand and six different restaurants

Cocks & Cows is a Danish burger restaurant chain with six locations. Each venue has its own atmosphere, and all of them share one distinctive brand.

The site had to show both at once: the shared character of the chain and what makes a particular venue stand out. On top of that came an extensive burger and cocktail menu that had to be presented clearly and without long load times.

The site had to work on two levels: one brand, and six venues that each look a little different.

Treat Yourself offer section on the Cocks & Cows website

Bartender making a cocktail at a Cocks & Cows restaurant

Solution: a page per location built from shared components

Each of the six locations got its own page, built from the same components.

The design system keeps the brand consistent while letting each venue have a different layout and mood. Content loads dynamically, so moving between locations and comparing what they offer takes a moment.

Headless CMS and Next.js

Content is managed in a headless CMS, and the site is rendered by a Next.js front end. The brand team changes menus and venue descriptions in the panel, and guests get a lightweight, responsive site. The site uses the design system built for all NoHo Partners brands.