Toyo Branding &
Website

Old meets new

Freelance
4 min read
Web Design
Development
Branding
Chef cooking at hibachi
A restaurant which offers unique food and experience served to you in a Teppanyaki style cuisine. Toyo has established themselves since 1981, making them the oldest teppanyaki restaurant in Montreal.
My mission is to update Toyo’s brand identity and website which was not updated since launch.

Design Challenge
A modern design showcasing the restaurant’s established identity.

Design tools

Affinity Designer
Figma

Development

HTML 5
CSS 3
NuxtJs
Veutify
il8n

Toyo is a family restaurant I worked at as a part-time busboy while studying. I interacted with their design and experienced the pain points of costumers first hand while working there for a year. Without a brand guideline or design system, I wanted to upgrade the restaurant while maintaining the traditional feel to it.

Toyo grill logo

Toyo grill- The red circle at the center is taken straight from the Japanese flag.

Logo rework
A logo needs to be simple
-Sagi Haviv

I created three logo options for the client to choose from. The brand suffers from an identity crisis since their website is “Toyo grill”, “Toyo steakhouse” for their Google business profile, and plain “Toyo” on their old logo.

Toyo- Taken from their old logo, I changed the colors to make it seem like a Japanese lantern

Toyo steakhouse logo

Toyo steakhouse- I changed the font to a strong font. The House symbol is inspired by Shogi pieces, a Japanese chess game.

Toyo's old logo

Toyo's old logo

Going responsive
Website redesign and
development

The major problem of their website is that it is not responsive on mobile. The owner also wanted it to have a better Search Engine Optimization (SEO). For this purpose, I chose Vue and NuxtJs as a framework to have a Server Side Rendered (SSR) website to give the sit a huge SEO boost.

Toyogrill.ca mobile view
Low performance on toyogrill mobile

Toyo’s old website with Google’s Lighthouse Audit performance score. The code is really outdated using a CSS table layout which was not responsive

Code challenge

One of the challenges with working on a business site here in Montreal is the requirement for French language support. Learning an internalization framework (il8n) for the project thought me a lot about the importance of reading documentations in general. My original proposed solution was a client-side rendered website with a reservation system and a Content Management System (CMS) for the owner to edit the site. Since the owner did not want a reservation system and won't make use for dynamic content, I saw NuxtJs as a perfect solution.

New site's iphone mockup
New site Mac mockup
New site audit

By using NuxtJs, a huge performance boost was achieved.

Design vs code
Finding the middle ground

This project thought me the importance of communication between developers and designers. Although I wore both hats, my initial design based on a FullPage plugin was not compatible with the framework NuxtJs due to Server Side Rendering.

First home page design

First home page design

I ended up using Veutify (google’s materialize framework for Vue) instead and redesigned the project. A lot of my time could’ve been saved if only I tested the plugin with NuxtJs first. I can imagine this happening in a real-world project where designers design without consulting with the developers.

Credits

Alex Chen  
Site translation (French)
Alan Wong
Photos and video
Veutify Discord team
Veutify support
Pablo Stanley
Avatasaaars

Merci beaucoup!

Learn more about me

Kelvin's avatar

Thank you for viewing my work!
I feel like we’re closer now…
Let’s make it official and get
to know me more!

Previous Project

3
/
4