Case study

The Bird: a gin bar website with animation

A bar menu changes, and opening hours corrected by hand soon go out of date. For The Bird we designed and built a gin bar website on Headless CMS WordPress and Next.js: a menu edited in a panel, opening hours pulled from Google Maps, and Lottie animation.

For The Bird, one of the NoHo Partners brands, we designed and built a website with a menu updated from the admin panel, opening hours pulled from Google Maps and Lottie animations that set the mood of the bar.

Scope of work

Industry: Hospitality
Product type: Bar website
Market: Hospitality

Technologies

Headless CMS
Next.js
Product Design
Web

Key facts

Menu showing current availability of food and drinks
Opening hours from a Google Maps integration
Lottie animations and motion design
Headless WordPress CMS and Next.js
Key components shared with the operator's other brands

A gin bar with character got a website that moves and keeps its own opening hours up to date.

Animated The Bird mark on the gin bar website

Goals

01
Bar atmosphere online
Catch attention with animation and movement, so the site has the same character as the venue.
02
An up-to-date menu
Let the bar team change the available food and drinks without a developer.
03
Reliable opening hours
Show opening hours from a single source, with no manual copying onto the site.

Process

Discover Define Develop Deliver

Requirements analysis
Requirements analysis
A detailed review of what the venue and its guests need.
Product workshop
Product workshop
Agreeing the scope of the site and its features together with the client's team.
Wireframes
Wireframes
Page structure and the placement of the menu, opening hours and animations.
Design system
Design system
Components that underpin every page, including the sites of the operator's other brands.
UX/UI design
UX/UI design
A distinct look for The Bird while keeping the key components consistent.
Development
Development
Headless WordPress CMS, a Next.js front end, Google Maps integration and Lottie animations.

Guests raising a toast with glasses of gin and tonic

What we delivered

A website where the menu and opening hours are always current, and movement sets the mood of the bar.

Menu - a list of food and drinks where the bar team updates what's available.
Google Maps integration - the venue's opening hours pulled in automatically.
Lottie animations - motion design that catches the eye and captures the character of the gin bar.
Headless WordPress CMS and Next.js - a content panel separated from a fast front end.
Versions for every device - fully responsive views for phone, tablet and desktop.

Challenge: the bar's character and always current information

The Bird is a gin bar with a strong character of its own. The site had to capture that while giving guests simple information: what's on the menu and when the bar is open.

The availability of food and drinks changes, so the menu had to be easy for the bar team to update. Opening hours needed to come from a single source rather than manually edited text. On top of that, the site had to catch the eye and work just as well on a phone as on a desktop.

A bar's website should set the mood, but first it has to tell the truth about what's on the menu and how late it's open.

Solution: animation, a menu in the panel and hours from Google Maps

Movement carries the character of the bar: Lottie animations and motion design, built on the same components as the rest of the site.

The menu is edited in a headless WordPress CMS, so the availability of food and drinks is changed in the admin panel, without a developer. The site pulls its opening hours from a Google Maps integration. The Next.js front end handles views on every device.

Shared components, a look of its own

The Bird uses the design system we built for all NoHo Partners brands. The key components are consistent, while the UX/UI design gives them a look that suits a gin bar.

Gin of the month with strength and flavour ratings

Bartender lining up craft beer bottles on the bar

Results: the bar team updates the menu itself

The bar team updates the menu themselves, and the opening hours on the site match those on Google Maps.

Shared components made content management simpler across the operator's websites. Users responded well to the site, and the automatic opening hours and animations improved the guest experience before they even reached the venue.