← Back to all work
Identity / Graphic Design, Digital & Web Design — 2021 · Private Client

The Tea House

The Tea House website: the third brand-story panel, an ochre 03 over an organic crop of three guests at a table with takeaway coffee and pizza, the heading Keeping you fueled. For business or pleasure. in ochre at right under the ghosted What We Do title, with the nav, the section rail and the player controls in place

An identity system and bespoke UI/UX web platform for The Tea House, a tea room and event venue in Accra: a leaf mark in two greens, ochre display type and a set of organic overlapping shapes carried across the site's story, menu, booking and reservation flows.

The Tea House was delivered in 2021 for a private client. The brand is built on a two-tone leaf mark and an ochre-and-olive palette, with large ghosted section titles and overlapping organic shapes used as both decoration and cropping device. Those shapes carry through the site’s circular image masks, so the photography of the kitchen, the diners and the garden all sit inside the same silhouette as the logo.

The eighteen plates below are the Adobe XD artboards for the website at 1920 × 1080: the homepage and brand story, the location, help and policy screens, the menu with its dish detail modal, three priced booking packages — Baby at GHC 200, Business at GHC 300 and Titan at GHC 700 — the spaces and events pages, and the reservation panel. It is a graphic design and digital & web design commission — the identity, the art direction and the site’s screens — and it was published on Behance on 24 August 2021.

Identity & homepage

The mark, the wordmark and the opening screen

The Tea House - The homepage artboard: the two-tone leaf mark and The Tea House wordmark at top left, the headline Nourish your mind, body and business in ochre, and two overlapping organic olive-and-gold shapes sweeping down the fold past circular Menu and Spaces buttons.
The Tea House - The About section, built around an overhead photograph of a full breakfast plate of eggs, roasted tomatoes and bacon, with the About The Tea House heading set in ochre to its right on a pale ground.

Brand story

Three numbered panels under a ghosted What We Do title

The Tea House - What We Do opening on 01, Forging the best meals, pairing the ochre heading with a circular crop of a chef tossing a flaming wok against the full-bleed ghosted section title.
The Tea House - The second story panel, 02 Serving with a Smile, with the heading on the left and a circular crop of a plated dish at the kitchen pass on the right.
The Tea House - The third story panel, 03 Keeping you fueled. For business or pleasure., built around an organic crop of three guests at a table with two takeaway coffee cups and pizza slices.

Finding the venue

Map, contact form, help tabs and the policy page

The Tea House - The contact artboard: an embedded map pinned at the venue's Airport Residential address under Where to find us, beside an ochre Get in touch with us card holding name, email and message fields above a row of social icons.
The Tea House - The help screen, Have any questions?, with General, Delivery, Orders, Refund and Payments tabs above two columns of expandable policy questions.
The Tea House - The privacy policy page, headed Take a look at our Privacy Policy in ochre, with body copy set in two measures and a pale organic shape bleeding in from the right edge.

Menu & booking packages

Dish listings and three priced packages, each cropped into the brand silhouette

The Tea House - The Nourish your body menu section under a ghosted POPULAR title, showing four circular dish thumbnails with their prices set beneath.
The Tea House - A menu detail modal for the Kuwait Salad: an ochre overlay with a circular dish photograph, Description and Ingredients blocks and a GHC 20 price chip, dismissed by a small round close control.
The Tea House - The Baby Package card in bright green with a Book a Package control and the GHC 200.00 price, its inclusions listed beside a circular photograph of the lit terrace at dusk.
The Tea House - The Business Package card in blue at GHC 300.00, showing the meeting room and its chairs in a circular crop with the package inclusions bulleted above.
The Tea House - The Titan Package card in orange at GHC 700.00, the largest of the three, with a circular photograph of the long boardroom table and green chairs.

Spaces, events & reservations

The layout skeleton, the meetings pairing and the booking panel

The Tea House - A layout skeleton for the spaces grid: six empty rounded placeholder panels on a white artboard, showing the card structure before imagery and copy were placed.
The Tea House - The meetings and events screen, Nourish your meetings and Nourish your events set over two photographs, the fitted interior on the left and the garden lawn with water beyond on the right, above a row of four feature icons.
The Tea House - A second pass of the meetings and events screen with the two photo panels rebalanced and the feature row reading fast and reliable internet, ready to use, easy booking and comfortable space.
The Tea House - A third variant of the same pairing, tightening the captions and moving the View Packages and Make a Reservation controls into the lower thirds of each photograph.
The Tea House - The reservation flow over a full-bleed interior photograph: a white Make your Reservation panel with choose package, date, check in, check out and number of people fields above a dark pill-shaped confirm control.

Film

The delivered site loading on a desktop mockup: the mark and headline in, then the shapes and the two buttons sweeping up the fold