web designer and developer

Peking Restaurant

September 2017

Peking Restaurant is a family owned Chinests take out restaraunt that was incepted in 1994.

Problem: In the recent years, they faced menu price issues from customers who were seeing inconcistent pricing online from what it really is in stores. And that truly has to do with the multiple websites that serve menus that tend to be outdated, or to people taking pictures of old menus that are still up on sites and are being referenced today.

Solution: Launching a website for the establishment would provide customers a consistent place to obtain information about the restaurant as well as obtain actual menu prices. Since the restaurant has their own website and take responsibility of the content on the website, if customers sees inconsistent pricing in other places, it would be obvious to them which one is correct.

Visit the Site

My goal was to create a simple, reasy to read one page website for the restaurant. My workflow was the following:

peking peking ^ edited, "water colored" version for site

1. Find a point of focus for the design:

Their paper menu has a framed image of the Temple of the Heavens. I want to stay true to their menu and their restaurant name (Peking aka Beijing) so I chosed this as the focal point. I searched through images of the Temple of the Heavens to find inpisration. The temple was very grand-- there was so many details involved in constructing and painting the temple. You can see it from the tiled roofs to the multiple of patterns running around its body.

My goal was to keep the design simple, so I didn't want to introduce so many colors and textures. I ended up going for golden brown/grey color and a toned down "watered colored" look for the temple. This still gave the temple a sense of grandeur since the darkest colors are focused around its roofs. From this, I decided to have the background of the website to be white to give even more contrast to the temple.

Since the temple imagery takes up quite some space, and it is framed by the stone rail at the bottom, I decided that it will be placed fixed at the bottom of the site. The stone rail will extend horizontally across the site to frame it. Keeping to the minimalism theme, this will be the only peice of graphic on the site.

peking ^ name on menu

peking ^ name on site

2. Topography

  • At this point, I moved my development to the web. I wanted a flat modern look to the website and I wanted everything to be easily found and easy to read. I also needed the content to actually stand out more than the design, since that is the most imporant thing to convey. There was only one color that stood out more than the temple, and still gave a neat modern look was black.
  • My next steps was finding a font for the restaurant name. The establishment's menu has "PEKING" written out in all caps, Times New Roman, with some word art coloring. I wanted to modernize it but at the same time keeping some of its identity. I chose a free font from Google that had a thick bold weight and gave off the same feeling in caps as the menu did. I choose a Google font instead of a system font or a downloaded font since it is 1. free and easily available and easy to use, 2. does not vary significantly from browser to browser, 3. generally looks better than downloadable fonts and 4. more performant than hosting my own.

peking ^ mobile

peking ^ desktop

3. Content Placement

  • Since there were only going to be two links on the site, location and menu, I placed them top right, directly across of the restaurant name. This is an intuitive spot for navigation, and works well responsively. Since this is a one page site, the links will scroll-animate a customer to the correct section of the site.
  • The next important thing was the address, phone number and delivery information. I wanted this information to be easy to find and almost always visible. To me, this is THE most important thing for a food establishment other than their name (and what type of cusine they serve). So I chose to display it right under the restaurant name and together, those items will be fixed on the page. Even as a user scrolls through the site, on desktop, that information will always be on their screen. On mobile, due to the lack of real estate, I was okay with it scrolling out of view as long as it was one of the first things a customer sees when they land on the page.

peking ^ current large overwhelming menu

peking ^ ex: re-organized based on protein

4. Menu Reorganization

The most difficult part of this project was displaying their menu. Peking's menu is a typial Chinese take-out restaurant menu-- their selections are extensive and rather overwhelming. I started entering and displaying them in the order they were showing in their instore-menu, but it quickly became clear that not only was it difficult to find what a customer is looking for, but it was becoming insanely long and very hard to follow. Many items also repeat or are located in different places. For example, their "Moo Shu Vegetable" will be listed under "Vegetable" but their "Moo Shu Chicken/Beef/Pork/Shrimp" was listed under "Peking Dishes". Why were they not listed under the same category? So I ended up going out of the way and re-organizing the menu in a way that I think makes it easier for customers to find what they are looking for. The only categories I kept were their Appetizers, Soups, Fried Rice, Lo Mein, Lunch Special, Combination Special, and Dinner Specails. Everything else I placed it under categories based on the protein: Chicken, Beef, Pork, Seafood, Mixed Protein (usually a combination of the previous three), and Vegetables & Tofu. This really helped sorten their very lengthy menu, and makes it easier for customers to find what they are want based on a dish's main ingredient.