Re-imagining a Thai restaurant's online brand

Introduction

Koh Thai is one of my favourite local Thai restaurants. With four cosy locations serving up authentic Thai dishes, they’ve built a loyal following thanks to their fresh flavours and warm atmosphere. Though they used to have more venues before COVID, I’m thankful they’ve pulled through, as they’re a true gem for anyone craving great Thai food.

Their current website does what it needs to: users can find their venues, get information, read their menus, place orders and make bookings online. However, I felt there was room to give it a bit more personality and polish, to better reflect the vibrant and traditional vibe they bring to the table every day.

Koh Thai's current homepage

The Challenge

I wanted to improve their online presence with a design that would resonate with their authentic, traditional style, and make the site more attractive and engaging for their customers. This spark came from one of their newsletter emails, which reminded me how much I love this restaurant and how sad I was to find some of their locations had closed down due to the pandemic.

Clicking through to their site, I saw a potential for a fresh look and a more streamlined experience. What solidified this as a project for me, was an idea for how I could present their logo. It’s composition of strokes made it perfect candidate for a path drawing animation:

Koh Thai's handwritten logo

The Process

Discovery

I kicked things off by analysing their fonts and colour palette on their website and Instagram page. Their site’s Raleway font is neat and readable, but it felt a bit generic. So instead, for headings, I picked Caveat, a handwritten font which matched the logo’s personality and gave the site warmth and authenticity. I paired this with Overpass Mono for the body text, a monospaced font that added a subtle touch of tradition and refinement.

Typography, colours, and motifs added to Figma

I also built a mood board from their current images and social media, and then checked out other restaurant and Thai sites to spot ideas and good practices that could help lift Koh Thai’s web presence.

Planning

Next, I tackled their sitemap. The existing structure was a little tangled, so I listed out every piece of content on their site and did a card-sorting exercise to simplify the user journey.

Their tech stack I thought was a bit tricky, but only from an internal standpoint. They used different third-parties for click and collect, delivery, bookings, and gift cards, but for the user, this didn’t matter as long as they got what they needed done. The key was to make that journey as smooth and efficient as possible.

Visuals

Instead of designing the homepage, I started with the logo animation. I traced the strokes into individual layers and imported them into Lottie to create a clean, engaging motion effect that would become the site’s signature element.

Logo sprite sheet

With the animation ready, I went on to design the homepage. For the hero, I chose one of their photos, which was focused on a wooden decorative artefact, to set that warm, traditional tone right away. I kept this minimal to let the animation and imagery do the talking.

New homepage concept

For the venue pages, I went with a similar approach and used an image of the location to paint a picture of the atmosphere. I also simplified the calls to action to include just Order and Book. The order button gives the option for collection or delivery, which decluttered the page.

Location page comparison

I also had the idea to create pages for their menus, instead of linking to PDF files. Assuming they didn’t make frequent changes to their menu, I thought it was a good approach, to make it a more user-friendly experience for mobile users:

Mobile PDF menu compared to on-page

Finally, I loved their “Koh Cooking” initiative. However, this was on a separate page, tucked under their “restaurants” dropdown, which I felt didn’t belong there. My approach was instead to put this on a large, prominent section in the Home and Our Story pages, and scale up the size of the videos for better impact.

Koh Kooking concept comparison

Development

Finally, I adapted everything for mobile and built the site in Framer, importing styles and components from Figma to speed up development. This is where the finishing touches came in, introducing the scroll animations and page transitions to make the site feel more alive.