Tomonaka

Target Audience

Tomonaka Restaurant is targeted towards all sushi lovers who want to experience authentic Japanese cuisine, but particularly a younger adult demographic who enjoy social gatherings, social media users, and those who are attending school. Relevant promotions are provided to the target audience such as:

  1. Offering discounts to students with valid student ID
  2. Offering discounts with larger groups to encourage group dining

The competitors's audiences appear to be very broad, generally for customers who enjoy sushi, drinks and other Japanese cuisine. Kiku targets Google+, Facebook, and Wordpress users with their social media presence and by welcoming comments. Itamae targets those who want to experience a "taste of modern Asia". They may also be targeting a young demographic and digital enthusiasts by using iPad menus.

Branding

The name Tomonaka is made up from two words that can both mean friend in Japanese, "tomodachi" and "nakama". The brand pushes the idea of enjoying food with company and being in a friendly environment.

The choice to create a cartoon sushi chef mascot is to help cater more to the brand's demographic of younger adults who have an interest in this subculture. Placing cartoon mascots or tv characters in restaurants and other products is a common marketing practice for promotion in Japan.1 This may be a risky approach for a restaurant in Toronto but it also offers a unique look to differentiate it from its competitors.

Competitor sites used relevant naming and symbols that matches their brand and service. "Kiku" comes from the word chrysanthemum and likewise their logo features a flower. "Itamae" means sushi chef, also relevant to their restaurant. To-ne has a fish symbol in their logo which is reflected in their main dishes.

1 Examples:
How did Nine Cartoon Girls Increase Pizza Hut Sales by 200%? - Dramafever
2011 Toyota Corolla Marks Miku's US Debut - Vocaloidism
Ajisen Ramen - Ramen restaurant incorporating a female mascot

Layout

Tomonaka features a flexible responsive layout with the main content in a single column, and aside content in 4 columns that reduce to single column on mobile. The layout is based off a 960 grid as it is a commonly used system across the web, and it can evenly divide into 1-16 columns. 2

Competitor sites used a range of single and multi-column elements in their layout. Itamae uses a fixed single column with full-width footer and navigation. The other sites have also have a single column for their main body, and 3-4 columns for special menu items and footer / bottom content.

Both Tomonaka and To-Ne have responsive layouts. Kiku and Itamae did not pass the mobile-friendly test from Google Webmaster Tools:

  1. Kiku Mobile-Friendly Test
  2. Itamae Mobile-Friendly Test

It is important to make the site both desktop and mobile friendly. Statistics show that accessing the web via mobile has surpassed desktop as of early 2014.3 Tomonaka's target audience is a young demographic, and an increasing number of young adults also access the web on the go.4 I decided to incorporate a responsive design as the range of platforms to access the web become more vast, and to enable the target audience a more user-friendly experience on mobile.

2 960 Grid System - ResponsiveDesign.is, Justin Avery
3 Mobile Now Exceeds PC: The Biggest Shift Since The Internet Began - Search Engine Watch
4 Mobile Marketing Statistics - Smart Insights

Navigation

Tomonaka's header is fixed so the user can quickly access the links instead of scrolling up. It also includes a phone number and email address as a clear call to action. Although this is not apparent in competitor sites, it is a common practice on the web and can improve the site's user experience when the information is prominent. 5

All competitor sites feature their logo on the upper left corner with the main navigation aligned to the top right. I chose the same design method, as the brand and navigation are two important elements of the website and need to be easily accessible, while also conserving space.

Itamae Sushi appears to have two menus, one at the top and one below the fold. This may be because it is a microsite of their main restaurant page, however it is also redundant and confusing to have two About Us pages. A suggestion would be to combine the navigation bars to form submenus.

5 16 Tips for a Better Website - Web Design Ledger, Michael Adams

Content & Visuals

The most important information for a sushi restaurant is the food/menu, contact information, hours and prices. Tomonaka incorporates all of these items somewhere on each page and easy access to the information through navigation or asides.

Common pages across competitors are: Home, Menu, Gallery, and Contact. A couple have an About section, Kiku has a Service section and Itamae has an Hours/Prices page. I chose not to make a page for About or Hours/Prices for Tomonaka because the main description of the restaurant is on the front page to let customers know right away who they are. The Hours/Prices and About blurb are also on each page in the aside.

Photos were used very prominently across all competitor websites to portray their product, some including a carousel on the home page. I went with a similar approach by adding a gallery section, a featured photograph on the main page with simple animation, and subtle background photo across the site. Adding these images in an organized manner helps to attract the user while not being too intrusive. The main graphics were optimized with TinyPNG to load faster. 6

One downside with Itamae's webpage is the excessive use of textures and images overlaying one another that can cause the page to look busy and cluttered.

6 Photos courtesy of Angela, Jason and Adley. Hooray for photographer friends that eat sushi all the time.

Colours

Tomonaka focuses on three main colours: red (the primary colour), white, and black, plus a secondary analogous colour for aside content. Red and white are significant colours as they are a part of Japan's flag. In Japanese culture, red can be a colour of vitality, power, energy, and happiness.7 The combination of black and white is for strong colour contrast between background and foreground, in order to meet accessibility guidelines. I kept the main body content as simple black text on white background, and also made the colours and boxes flat for the most part. This is to avoid colourful distractions that deter the reader from getting to the point of the content.

Competitor websites also have a similar palette by including black and white with warm analogous colours. Itamae's colours are vibrant with many varying shades that don't provide enough contrast, especially between foreground and background. Kiku keeps it simple with three basic colours, one being a pink hue that contrasts the rest of the page. Overall these palettes can give the feeling of a warm and welcoming restaurant.

7 What is the Meaning of Color in Japanese Culture? - ehow
The Meanings of Red - Color Matters

Fonts

The main fonts of choice for Tomonaka are Raleway for distinguishable headings and Open Sans (Light) for everything else. Navigation and footer links have extra letter spacing for readability. Icon fonts are also used to quickly and easily recognize navigation items. I chose mainly sans-serif types. Sans-serif fonts are simple and easier to read on desktop and mobile screens. Serif fonts are more suited for print, and script / calligraphic fonts can be overpowering or distracting from the main content. I also chose a thin weight in some areas because it is not only a modern trend, but it helps to reduce clutter and add simplicity to modern pages that are often packed with content on small screens. 8

Kiku and To-Ne Sushi used sans-serif fonts throughout their site with carrying font weights and sizes for headings. This provides a clean and consistent appearance. Itamae has an inconsistent use of fonts between pages, with Times New Roman on the main page and navigation, but sans-serif type everywhere else.

8 Flat and Thin Are In - Smashing Magazine


Back to top